Initial commit

components/product-detail/ProductDetailInfo.tsx

@@ -0,0 +1,159 @@
+import React from 'react';
+import { RiSubtractLine, RiAddLine, RiTruckLine, RiArrowGoBackLine, RiSecurePaymentLine, RiLoader4Line } from '@remixicon/react';
+import { Product, ProductVariant } from './ProductDetail.tsx';
+import { Button } from '../ui/button';
+
+interface ProductDetailInfoProps {
+  product: Product;
+  selectedVariant: ProductVariant | null;
+  selectedOptions: Record<string, string>;
+  quantity: number;
+  setQuantity: (quantity: number) => void;
+  handleAddToCart: () => void;
+  onOptionChange: (optionName: string, value: string) => void;
+  isAddingToCart?: boolean;
+}
+
+const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
+  product,
+  selectedVariant,
+  selectedOptions,
+  quantity,
+  setQuantity,
+  handleAddToCart,
+  onOptionChange,
+  isAddingToCart = false
+}) => {
+  const formatPrice = (price: { amount: string; currencyCode: string }) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    }).format(parseFloat(price.amount));
+  };
+
+  const price = selectedVariant?.price || product.priceRange.minVariantPrice;
+  const compareAtPrice = product.compareAtPriceRange?.minVariantPrice;
+  const hasDiscount = compareAtPrice && parseFloat(compareAtPrice.amount) > parseFloat(price.amount);
+
+  return (
+    <div>
+      <h1 className="text-4xl font-bold text-gray-900 mb-4 font-heading">
+        {product.title}
+      </h1>
+
+      {/* Price */}
+      <div className="flex items-center space-x-4 mb-6">
+        <span className="text-2xl font-bold text-gray-900">
+          {formatPrice(price)}
+        </span>
+        {hasDiscount && compareAtPrice && (
+          <>
+            <span className="text-xl text-gray-500 line-through">
+              {formatPrice(compareAtPrice)}
+            </span>
+            <div className="bg-red-100 text-red-800 text-sm font-semibold px-3 py-1 rounded">
+              {Math.round(((parseFloat(compareAtPrice.amount) - parseFloat(price.amount)) / parseFloat(compareAtPrice.amount)) * 100)}% OFF
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Description */}
+      {product.description && (
+        <div className="text-gray-600 mb-8 text-lg leading-relaxed">
+          {product.descriptionHtml ? (
+            <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} />
+          ) : (
+            <p>{product.description}</p>
+          )}
+        </div>
+      )}
+
+      {/* Product Options */}
+      {product.options
+        .filter(option => option.name !== 'Title')
+        .map(option => (
+          <div key={option.id} className="mb-6">
+            <label className="block text-sm font-semibold text-gray-700 mb-2">
+              {option.name}
+            </label>
+            <div className="flex flex-wrap gap-2">
+              {option.values.map(value => (
+                <Button
+                  key={value}
+                  onClick={() => onOptionChange(option.name, value)}
+                  variant={selectedOptions[option.name] === value ? 'default' : 'outline'}
+                >
+                  {value}
+                </Button>
+              ))}
+            </div>
+          </div>
+        ))}
+
+      {/* Quantity Selector */}
+      <div className="mb-8">
+        <label className="block text-sm font-semibold text-gray-700 mb-2">
+          Quantity
+        </label>
+        <div className="flex items-center border border-gray-300 rounded-lg w-32">
+          <Button
+            onClick={() => setQuantity(Math.max(1, quantity - 1))}
+            variant="ghost"
+            size="icon-sm"
+            disabled={quantity <= 1}
+          >
+            <RiSubtractLine />
+          </Button>
+          <span className="flex-1 text-center font-semibold text-sm">{quantity}</span>
+          <Button
+            onClick={() => setQuantity(quantity + 1)}
+            variant="ghost"
+            size="icon-sm"
+          >
+            <RiAddLine />
+          </Button>
+        </div>
+      </div>
+
+      {/* Add to Cart Button */}
+      <Button
+        onClick={handleAddToCart}
+        disabled={!selectedVariant?.availableForSale || isAddingToCart}
+        size="lg"
+        className="w-full py-4 text-lg"
+      >
+        {isAddingToCart ? (
+          <span className="flex items-center justify-center gap-2">
+            <RiLoader4Line className="animate-spin" />
+            Adding...
+          </span>
+        ) : selectedVariant?.availableForSale ? (
+          'Add to Cart'
+        ) : (
+          'Out of Stock'
+        )}
+      </Button>
+
+      {/* Additional Info */}
+      <div className="mt-8 pt-8 border-t border-gray-200">
+        <div className="space-y-3 text-sm text-gray-600">
+          <div className="flex items-center space-x-2">
+            <RiTruckLine />
+            <span>Free shipping on orders over $100</span>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RiArrowGoBackLine />
+            <span>30-day return policy</span>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RiSecurePaymentLine />
+            <span>Secure payment</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductDetailInfo;