Removed star rating and reviews

Added tags, description, ingredients and subheading

src/app/(storefront)/products/[handle]/ProductDetails.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { HttpTypes } from '@medusajs/types';
-import { ShoppingCart, Star } from 'lucide-react';
+import { ShoppingCart } from 'lucide-react';
 import Image from 'next/image';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -21,6 +21,10 @@ export default function ProductDetails({ product }: ProductDetailsProps) {
 
   const { addToCart } = useCart();
 
+  useEffect(() => {
+    setSelectedVariant(product.variants?.[0] as HttpTypes.StoreProductVariant);
+  }, [product]);
+
   return (
     <div className='px-4 py-8 pt-28'>
       <div className='grid md:grid-cols-2 gap-8 overflow-visible'>
@@ -46,20 +50,22 @@ export default function ProductDetails({ product }: ProductDetailsProps) {
           </div> */}
         </div>
         <div className='sticky top-20 self-start'>
-          <h1 className='text-3xl font-bold mb-4'>{product.title}</h1>
+          <span className='text-s-title font-medium mb-4'>{product.title}</span>{' '}
-          <div className='flex items-center mb-4'>
+          <span className='mb-4'>{product.subtitle}</span>
-            <div className='flex text-yellow-400'>
+          {product.tags && product.tags.length > 0 && (
-              {[...Array(5)].map((_, i) => (
+            <div className='flex flex-wrap mb-4'>
-                <Star key={i} className='w-5 h-5 fill-current' />
+              {product.tags.map((tag) => (
+                <span key={tag.id} className='mr-2 mb-2 px-2 py-1 border-dashed border-2 border-grey-200'>
+                  {tag.value}
+                </span>
               ))}
             </div>
-            <span className='ml-2 text-sm text-gray-600'>(128 reviews)</span>
+          )}
-          </div>
+          <p className='mb-4'>₹{selectedVariant?.calculated_price?.calculated_amount?.toFixed(2)}</p>
-          <p className='text-2xl font-bold mb-4'>₹{selectedVariant?.calculated_price?.calculated_amount?.toFixed(2)}</p>
           <p className='text-gray-600 mb-6'>{product.description}</p>
-
+          {product.variants && product.variants.length > 1 && (
             <div className='mb-6'>
-            <h3 className='text-lg font-semibold mb-2'>Choose Variant:</h3>
+              <h3 className='text-lg font-medium mb-2'>Variants:</h3>
               <RadioGroup
                 defaultValue={product.variants?.[0].id}
                 onValueChange={(value) =>
@@ -79,7 +85,7 @@ export default function ProductDetails({ product }: ProductDetailsProps) {
                 ))}
               </RadioGroup>
             </div>
-
+          )}
           <div className='flex items-center mb-6'>
             <Button variant='outline' size='sm' onClick={() => setQuantity(Math.max(1, quantity - 1))}>
               -
@@ -92,42 +98,24 @@ export default function ProductDetails({ product }: ProductDetailsProps) {
           <Button className='w-full md:w-auto' onClick={() => addToCart(selectedVariant?.id as string, quantity)}>
             <ShoppingCart className='mr-2 h-4 w-4' /> Add to Cart
           </Button>
-
+          {product.material && (
-          <h2 className='text-2xl font-bold mb-4'>Product Details</h2>
+            <div className='mt-6'>
-          <ul className='list-disc pl-5 space-y-2 text-gray-600'>
+              <h2 className='text-lg font-medium mb-4'>Ingredients</h2>
-            <li>Single-origin cocoa beans from Ecuador</li>
+              <p className='text-gray-600 relative overflow-hidden group'>
-            <li>Fair trade certified</li>
+                {product.material}
+                <span className='absolute bottom-0 left-0 h-[2px] bg-black w-full transform -translate-x-full transition-transform duration-500 group-hover:translate-x-0'></span>
+              </p>
+            </div>
+          )}
+          <h2 className='text-lg font-medium mb-4 mt-4'>Product Details</h2>
+          <ul className='list-none pl-5 space-y-2 text-gray-600'>
+            <li>Single-origin cocoa beans</li>
             <li>No artificial flavors or preservatives</li>
-            <li>100g (3.5oz) bar</li>
             <li>Available in different cocoa percentages</li>
           </ul>
         </div>
       </div>
 
-      <div className='mt-12'>
-        <h2 className='text-2xl font-bold mb-4'>Customer Reviews</h2>
-        <div className='space-y-4'>
-          {[...Array(3)].map((_, i) => (
-            <Card key={i}>
-              <CardContent className='p-4'>
-                <div className='flex items-center mb-2'>
-                  <div className='flex text-yellow-400'>
-                    {[...Array(5)].map((_, j) => (
-                      <Star key={j} className='w-4 h-4 fill-current' />
-                    ))}
-                  </div>
-                  <span className='ml-2 text-sm font-medium'>John Doe</span>
-                </div>
-                <p className='text-gray-600'>
-                  This chocolate is absolutely divine! The rich flavor and smooth texture make it a perfect treat for
-                  any chocolate lover. I especially love the 85% cocoa variant for its intense flavor.
-                </p>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-
       <div className='mt-12'>
         <h2 className='text-2xl font-bold mb-4'>Related Products</h2>
         <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
@@ -143,7 +131,7 @@ export default function ProductDetails({ product }: ProductDetailsProps) {
                 />
                 <h3 className='font-bold mb-2'>Milk Chocolate Truffles</h3>
                 <p className='text-gray-600 mb-2'>Smooth, creamy milk chocolate truffles</p>
-                <p className='font-bold'>$9.99</p>
+                <p className='font-bold'>₹{selectedVariant?.calculated_price?.calculated_amount?.toFixed(2)}</p>
               </CardContent>
             </Card>
           ))}