chore: rate UI added to the component

rezahedi · Jan 7, 2024 · b34d41c · b34d41c
1 parent 851294a
commit b34d41c
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/app/(app)/app/components/ProductCard.tsx b/app/(app)/app/components/ProductCard.tsx
@@ -26,13 +26,19 @@ export default function ProductCard( {product, nutrients = []}: {product: Produc
         <div className='w-1/3 overflow-hidden rounded-xl'>
           <Image src={product.image || `/no-image.webp`} alt={product.name} className='w-full h-full object-cover aspect-square group-hover:scale-105 transition-transform duration-300 transform' width="170" height="170" loading='lazy' />
         </div>
-        <div className='flex-1'>
+        <div className='flex-1 flex flex-col gap-1'>
           <h3 className="font-normal group-hover:underline">{product.name}</h3>
           {(product.brandName || product.brandName) &&
-            <p className="text-text-2 font-light text-sm pb-2">{product.brandName ? product.brandName : product.brandOwner}</p>}
+            <p className="text-text-2 font-light text-sm">{product.brandName ? product.brandName : product.brandOwner}</p>}
           {product.servingSize>0 &&
             <p className='pt-1 font-light text-xs'><b>Serving Size:</b> {product.servingSize}{product.servingUnit}</p>}
           {product.ingredients && <p className='pt-2 text-xs text-text-2 line-clamp-2 lowercase'>{product.ingredients}</p>}
+          <div className='flex items-center gap-2 text-sm pt-2'>
+            <div style={{
+                backgroundColor: `#84CC16`
+              }} className='rounded-2xl w-4 h-4'></div>
+            <p>Good <i>({product.rated}/100)</i></p>
+          </div>
         </div>
       </div>
       {nutrients.length > 0 && (