diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/LineDivider.js | 2 | ||||
| -rw-r--r-- | src/pages/shop/product/[slug].js | 80 |
2 files changed, 47 insertions, 35 deletions
diff --git a/src/components/LineDivider.js b/src/components/LineDivider.js index ce92f4ee..4e8c7b52 100644 --- a/src/components/LineDivider.js +++ b/src/components/LineDivider.js @@ -1,6 +1,6 @@ const LineDivider = () => { return ( - <hr className="h-1.5 bg-gray_r-4 border-none"/> + <hr className="h-1 bg-gray_r-4 border-none"/> ); }; diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js index b76cdee9..16763ab7 100644 --- a/src/pages/shop/product/[slug].js +++ b/src/pages/shop/product/[slug].js @@ -11,6 +11,7 @@ import { createOrUpdateItemCart } from "../../../helpers/cart"; import toast from "react-hot-toast"; import Footer from "../../../components/Footer"; import Image from "../../../components/Image"; +import LineDivider from "../../../components/LineDivider"; export async function getServerSideProps( context ) { const { slug } = context.query; @@ -113,7 +114,8 @@ export default function ProductDetail({ product }) { alt={product.name} className="border-b border-gray_r-6 w-full h-[300px] object-contain object-center bg-white" /> - <div className="p-4 pb-10"> + + <div className="p-4"> <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}> {product.manufacture.name ?? '-'} </Link> @@ -135,8 +137,12 @@ export default function ProductDetail({ product }) { ) : ( <p className="text-gray_r-11">Dapatkan harga terbaik, <a href="">hubungi kami.</a></p> )} + </div> + + <LineDivider /> - <div className="flex gap-x-2 mt-5"> + <div className="p-4"> + <div className="flex gap-x-2"> <div className="w-9/12"> <label className="form-label mb-1">Pilih: <span className="text-gray_r-11 font-normal">{product.variant_total} Varian</span></label> <select name="variant" className="form-input" value={selectedVariant} onChange={onchangeVariant} > @@ -168,42 +174,48 @@ export default function ProductDetail({ product }) { + Keranjang </button> </div> + </div> - <div className="mt-10"> - <h2 className="font-bold mb-2">Detail Produk</h2> - <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> - <h3 className="text-gray-900">Jumlah Varian</h3> - <p className="text-gray-800">{product.variant_total} Varian</p> - </div> - <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> - <h3 className="text-gray-900">Nomor SKU</h3> - <p className="text-gray-800" id="sku_number">SKU-{activeVariant.id}</p> - </div> - <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> - <h3 className="text-gray-900">Part Number</h3> - <p className="text-gray-800" id="part_number">{activeVariant.code}</p> - </div> - <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> - <h3 className="text-gray-900">Stok</h3> - <p className="text-gray-800" id="stock"> - {activeVariant.stock > 0 ? (activeVariant.stock > 5 ? 'Lebih dari 5' : 'Kurang dari 5') : '0'} - </p> - </div> - <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> - <h3 className="text-gray-900">Berat Barang</h3> - <p className="text-gray-800" id="weight">{activeVariant.weight > 0 ? activeVariant.weight : '1'} KG</p> - </div> - </div> + <LineDivider /> - <div className="mt-10"> - <h2 className="font-bold mb-4">Deskripsi Produk</h2> - <div className="text-gray-800 leading-7" dangerouslySetInnerHTML={{__html: (product.description != '' ? product.description : 'Belum ada deskripsi produk.')}}></div> + <div className="p-4"> + <h2 className="font-bold mb-2">Detail Produk</h2> + <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> + <h3 className="text-gray-900">Jumlah Varian</h3> + <p className="text-gray-800">{product.variant_total} Varian</p> </div> - - <div className="mt-10"> - <h2 className="font-bold mb-4">Produk Lainnya</h2> - <ProductSlider products={similarProducts}/> + <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> + <h3 className="text-gray-900">Nomor SKU</h3> + <p className="text-gray-800" id="sku_number">SKU-{activeVariant.id}</p> + </div> + <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> + <h3 className="text-gray-900">Part Number</h3> + <p className="text-gray-800" id="part_number">{activeVariant.code}</p> + </div> + <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> + <h3 className="text-gray-900">Stok</h3> + <p className="text-gray-800" id="stock"> + {activeVariant.stock > 0 ? (activeVariant.stock > 5 ? 'Lebih dari 5' : 'Kurang dari 5') : '0'} + </p> </div> + <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300"> + <h3 className="text-gray-900">Berat Barang</h3> + <p className="text-gray-800" id="weight">{activeVariant.weight > 0 ? activeVariant.weight : '1'} KG</p> + </div> + </div> + + <LineDivider /> + + <div className="p-4"> + <h2 className="font-bold mb-4">Deskripsi Produk</h2> + <div className="text-gray-800 leading-7" dangerouslySetInnerHTML={{__html: (product.description != '' ? product.description : 'Belum ada deskripsi produk.')}}></div> + </div> + + <LineDivider /> + + <div className="p-4"> + <h2 className="font-bold mb-4">Produk Lainnya</h2> + <ProductSlider products={similarProducts}/> </div> <Footer /> |