diff options
Diffstat (limited to 'src/lib/variant/components')
| -rw-r--r-- | src/lib/variant/components/VariantGroupCard.jsx | 43 |
1 files changed, 42 insertions, 1 deletions
diff --git a/src/lib/variant/components/VariantGroupCard.jsx b/src/lib/variant/components/VariantGroupCard.jsx index 8cb1eec4..dd5983a9 100644 --- a/src/lib/variant/components/VariantGroupCard.jsx +++ b/src/lib/variant/components/VariantGroupCard.jsx @@ -1,14 +1,55 @@ import { useState } from 'react' import VariantCard from './VariantCard' +import Image from '@/core/components/elements/Image/Image' +import currencyFormat from '@/core/utils/currencyFormat' const VariantGroupCard = ({ variants, ...props }) => { + console.log('variant', variants) const [showAll, setShowAll] = useState(false) const variantsToShow = showAll ? variants : variants.slice(0, 2) return ( <> {variantsToShow?.map((variant, index) => ( - <VariantCard key={index} product={variant} {...props} /> + <> + <VariantCard key={index} product={variant} {...props} /> + {variant.program && + variant.program.items && + variant.program.items.map((item) => ( + <div key={item.id}> + <div className='flex gap-x-3'> + <div className='w-4/12 flex items-center gap-x-2'> + <Image + src={item.parent.image} + alt={item.name} + className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md' + /> + </div> + <div className='w-8/12 flex flex-col'> + <div className='mb-2'> + <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'> + {variant.program.type.label} + </span> + </div> + <p className='product-card__title wrap-line-ellipsis-2'>{item.name}</p> + <p className='text-caption-2 text-gray_r-11 mt-1'> + Berat Item : {item.weight} Kg + </p> + <div className='flex flex-wrap gap-x-1 items-center mt-1'> + {item.price.discountPercentage > 0 && ( + <> + <p className='text-caption-2 text-gray_r-11 line-through'> + {currencyFormat(item.price.price)} + </p> + </> + )} + </div> + <p className='text-caption-2 text-gray_r-12 font-bold mt-2'>Gratis</p> + </div> + </div> + </div> + ))} + </> ))} {variants.length > 2 && ( <button |