diff options
Diffstat (limited to 'src/components/variants')
| -rw-r--r-- | src/components/variants/VariantCard.js | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/src/components/variants/VariantCard.js b/src/components/variants/VariantCard.js new file mode 100644 index 00000000..cb4d8272 --- /dev/null +++ b/src/components/variants/VariantCard.js @@ -0,0 +1,48 @@ +import { createSlug } from "@/core/utils/slug"; +import Image from "../elements/Image"; +import Link from "../elements/Link"; +import currencyFormat from "@/core/utils/currencyFormat"; + +export default function VariantCard({ + data, + openOnClick = true +}) { + let product = data; + + const Card = () => ( + <div className="flex gap-x-3"> + <div className="w-4/12 flex items-center gap-x-2"> + <Image + src={product.parent.image} + alt={product.parent.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"> + <p className="product-card__title wrap-line-ellipsis-2"> + {product.parent.name} + </p> + <p className="text-caption-2 text-gray_r-11 mt-1"> + {product.code || '-'} + {product.attributes.length > 0 ? ` ・ ${product.attributes.join(', ')}` : ''} + </p> + <p className="text-caption-2 text-gray_r-11 mt-1"> + {currencyFormat(product.price.price_discount)} × {product.quantity} Barang + </p> + <p className="text-caption-2 text-gray_r-12 font-bold mt-2"> + {currencyFormat(product.quantity * product.price.price_discount)} + </p> + </div> + </div> + ); + + if (openOnClick) { + return ( + <Link href={'/shop/product/' + createSlug(product.parent.name, product.parent.id)}> + <Card /> + </Link> + ); + } + + return <Card/>; +}
\ No newline at end of file |