diff options
Diffstat (limited to 'src/components/variants')
| -rw-r--r-- | src/components/variants/VariantCard.js | 9 | ||||
| -rw-r--r-- | src/components/variants/VariantGroupCard.js | 31 |
2 files changed, 40 insertions, 0 deletions
diff --git a/src/components/variants/VariantCard.js b/src/components/variants/VariantCard.js index 2d27371b..a821480c 100644 --- a/src/components/variants/VariantCard.js +++ b/src/components/variants/VariantCard.js @@ -41,6 +41,15 @@ export default function VariantCard({ {product.code || '-'} {product.attributes.length > 0 ? ` ・ ${product.attributes.join(', ')}` : ''} </p> + <div className="flex flex-wrap gap-x-1 items-center mt-auto"> + {product.price.discount_percentage > 0 && ( + <> + <p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(product.price.price)}</p> + <span className="badge-red">{product.price.discount_percentage}%</span> + </> + )} + <p className="text-caption-2 text-gray_r-12">{currencyFormat(product.price.price_discount)}</p> + </div> <p className="text-caption-2 text-gray_r-11 mt-1"> {currencyFormat(product.price.price_discount)} × {product.quantity} Barang </p> diff --git a/src/components/variants/VariantGroupCard.js b/src/components/variants/VariantGroupCard.js new file mode 100644 index 00000000..98f2d739 --- /dev/null +++ b/src/components/variants/VariantGroupCard.js @@ -0,0 +1,31 @@ +import { useState } from "react" +import VariantCard from "./VariantCard" + +export default function VariantGroupCard({ + variants, + ...props +}) { + const [ showAll, setShowAll ] = useState(false) + const variantsToShow = showAll ? variants : variants.slice(0, 2) + + return ( + <> + { variantsToShow?.map((variant, index) => ( + <VariantCard + key={index} + data={variant} + {...props} + /> + )) } + { variants.length > 2 && ( + <button + type="button" + className="btn-light py-2 w-full" + onClick={() => setShowAll(!showAll)} + > + { !showAll ? 'Lihat Semua' : 'Tutup' } + </button> + ) } + </> + ) +}
\ No newline at end of file |