diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/ConfirmAlert.js | 7 | ||||
| -rw-r--r-- | src/components/Header.js | 8 | ||||
| -rw-r--r-- | src/components/ProductCard.js | 17 |
3 files changed, 21 insertions, 11 deletions
diff --git a/src/components/ConfirmAlert.js b/src/components/ConfirmAlert.js index 3a8f796d..27155011 100644 --- a/src/components/ConfirmAlert.js +++ b/src/components/ConfirmAlert.js @@ -1,5 +1,3 @@ -import { useState } from "react"; - const ConfirmAlert = ({ title, caption, @@ -13,10 +11,11 @@ const ConfirmAlert = ({ <div className="menu-overlay" onClick={onClose}></div> )} <div className={"p-4 rounded border bg-white border-gray_r-6 fixed top-[50%] left-[50%] translate-x-[-50%] z-[70] w-[80%] translate-y-[-50%] " + (show ? "block" : "hidden")}> - <p className="h2 mb-4">{title}</p> + <p className="h2 mb-2">{title}</p> + <p className="text-gray_r-11 mb-6">{caption}</p> <div className="flex gap-x-2"> <button className="flex-1 btn-light" onClick={onClose}>Batal</button> - <button className="flex-1 btn-yellow" onClick={onSubmit}>Hapus</button> + <button className="flex-1 btn-red" onClick={onSubmit}>Hapus</button> </div> </div> </> diff --git a/src/components/Header.js b/src/components/Header.js index 88d4d368..fe76baba 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -84,26 +84,26 @@ export default function Header({ title }) { <Link className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" href="/shop/brands" onClick={closeMenu}> <span>Profil Saya</span> <div className="ml-auto"> - <ChevronRightIcon className="stroke-gray-700" /> + <ChevronRightIcon className="stroke-gray-700 w-5 h-5" /> </div> </Link> ) : ''} <Link className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" href="/shop/brands" onClick={closeMenu}> <span>Semua Brand</span> <div className="ml-auto"> - <ChevronRightIcon className="stroke-gray-700" /> + <ChevronRightIcon className="stroke-gray-700 w-5 h-5" /> </div> </Link> <Link className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" href="/blog" onClick={closeMenu}> <span>Blog Indoteknik</span> <div className="ml-auto"> - <ChevronRightIcon className="stroke-gray-700" /> + <ChevronRightIcon className="stroke-gray-700 w-5 h-5" /> </div> </Link> <button className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" onClick={closeMenu}> <span>Kategori</span> <div className="ml-auto"> - <ChevronRightIcon className="stroke-gray-700" /> + <ChevronRightIcon className="stroke-gray-700 w-5 h-5" /> </div> </button> </div> diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js index 604ee9e0..b8967cc8 100644 --- a/src/components/ProductCard.js +++ b/src/components/ProductCard.js @@ -2,6 +2,7 @@ import Link from "./Link"; import currencyFormat from "../helpers/currencyFormat"; import { createSlug } from "../helpers/slug"; import { LazyLoadImage } from "react-lazy-load-image-component"; +import { ChevronRightIcon } from "@heroicons/react/20/solid"; import 'react-lazy-load-image-component/src/effects/blur.css'; @@ -34,17 +35,27 @@ export default function ProductCard({ data }) { <span className="badge-red">{product.lowest_price.discount_percentage}%</span> </div> ) : ''} + {product.lowest_price.price_discount > 0 ? ( <p className="text-caption-1 text-gray_r-12 font-bold"> {currencyFormat(product.lowest_price.price_discount)} </p> ) : ( - <a href="https://wa.me" className="py-2 rounded block text-sm border border-yellow-900 text-center"> - Tanya Harga + <a + href="https://wa.me" + target="_blank" + rel="noreferrer" + className="flex items-center gap-x-1 text-caption-1" + > + Tanya Harga <ChevronRightIcon className="text-yellow_r-11 w-5 h-5" /> </a> )} + {product.stock_total > 0 ? ( - <div className="badge-green mt-2">Ready Stock {product.stock_total > 5 ? '> 5' : '< 5'}</div> + <div className="flex gap-x-1 mt-2"> + <div className="badge-green">Ready Stock</div> + <div className="badge-gray">{product.stock_total > 5 ? '> 5' : '< 5'}</div> + </div> ) : ''} </div> </div> |