diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-22 11:03:34 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-22 11:03:34 +0700 |
| commit | f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c (patch) | |
| tree | 253dcf854a3c92e09ca846e86a09e5b4c5d16be1 /src/lib/variant/components/VariantCard.jsx | |
| parent | 3c559031623649a67825ff47f34512f0eb946861 (diff) | |
prettier
Diffstat (limited to 'src/lib/variant/components/VariantCard.jsx')
| -rw-r--r-- | src/lib/variant/components/VariantCard.jsx | 82 |
1 files changed, 40 insertions, 42 deletions
diff --git a/src/lib/variant/components/VariantCard.jsx b/src/lib/variant/components/VariantCard.jsx index 6c7ab22f..6e7ea871 100644 --- a/src/lib/variant/components/VariantCard.jsx +++ b/src/lib/variant/components/VariantCard.jsx @@ -1,17 +1,13 @@ -import { useRouter } from "next/router" -import { toast } from "react-hot-toast" +import { useRouter } from 'next/router' +import { toast } from 'react-hot-toast' -import Image from "@/core/components/elements/Image/Image" -import Link from "@/core/components/elements/Link/Link" -import { createSlug } from "@/core/utils/slug" -import currencyFormat from "@/core/utils/currencyFormat" -import { updateItemCart } from "@/core/utils/cart" +import Image from '@/core/components/elements/Image/Image' +import Link from '@/core/components/elements/Link/Link' +import { createSlug } from '@/core/utils/slug' +import currencyFormat from '@/core/utils/currencyFormat' +import { updateItemCart } from '@/core/utils/cart' -const VariantCard = ({ - product, - openOnClick = true, - buyMore = false -}) => { +const VariantCard = ({ product, openOnClick = true, buyMore = false }) => { const router = useRouter() const addItemToCart = () => { @@ -22,41 +18,43 @@ const VariantCard = ({ }) return } - + const checkoutItem = () => { router.push(`/shop/checkout?product_id=${product.id}&qty=${product.quantity}`) } const Card = () => ( - <div className="flex gap-x-3"> - <div className="w-4/12 flex items-center gap-x-2"> + <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" + 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"> + <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> - <div className="flex flex-wrap gap-x-1 items-center mt-auto"> + <div className='flex flex-wrap gap-x-1 items-center mt-auto'> {product.price.discountPercentage > 0 && ( <> - <p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(product.price.price)}</p> - <span className="badge-red">{product.price.discountPercentage}%</span> + <p className='text-caption-2 text-gray_r-11 line-through'> + {currencyFormat(product.price.price)} + </p> + <span className='badge-red'>{product.price.discountPercentage}%</span> </> )} - <p className="text-caption-2 text-gray_r-12">{currencyFormat(product.price.priceDiscount)}</p> + <p className='text-caption-2 text-gray_r-12'> + {currencyFormat(product.price.priceDiscount)} + </p> </div> - <p className="text-caption-2 text-gray_r-11 mt-1"> + <p className='text-caption-2 text-gray_r-11 mt-1'> {currencyFormat(product.price.priceDiscount)} × {product.quantity} Barang </p> - <p className="text-caption-2 text-gray_r-12 font-bold mt-2"> + <p className='text-caption-2 text-gray_r-12 font-bold mt-2'> {currencyFormat(product.quantity * product.price.priceDiscount)} </p> </div> @@ -69,29 +67,29 @@ const VariantCard = ({ <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id)}> <Card /> </Link> - { buyMore && ( - <div className="flex justify-end gap-x-2 mb-2"> - <button - type="button" - onClick={addItemToCart} - className="btn-yellow text-gray_r-12 py-2 px-3 text-caption-1" + {buyMore && ( + <div className='flex justify-end gap-x-2 mb-2'> + <button + type='button' + onClick={addItemToCart} + className='btn-yellow text-gray_r-12 py-2 px-3 text-caption-1' > Tambah Keranjang </button> - <button - type="button" - onClick={checkoutItem} - className="btn-solid-red py-2 px-3 text-caption-1" + <button + type='button' + onClick={checkoutItem} + className='btn-solid-red py-2 px-3 text-caption-1' > Beli Lagi </button> </div> - ) } + )} </> ) } - return <Card/> + return <Card /> } -export default VariantCard
\ No newline at end of file +export default VariantCard |
