diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Header.js | 69 | ||||
| -rw-r--r-- | src/components/ProductCard.js | 39 |
2 files changed, 108 insertions, 0 deletions
diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 00000000..3d5d0f84 --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,69 @@ +import Image from "next/image"; +import Link from "next/link"; +import ShoppingCartIcon from "../icons/shopping-cart.svg"; +import SearchIcon from "../icons/search.svg"; +import MenuIcon from "../icons/menu.svg"; +import ChevronRightIcon from "../icons/chevron-right.svg"; +import { useState } from "react"; + + +export default function Header() { + const [isMenuActive, setIsMenuActive] = useState(false); + + const openMenu = () => setIsMenuActive(true); + const closeMenu = () => setIsMenuActive(false); + + return ( + <> + <div className={isMenuActive ? 'menu-wrapper active' : 'menu-wrapper'}> + <div className="flex gap-x-2 items-center"> + <Link href="/login" className="w-full py-2 btn-light">Masuk</Link> + <Link href="/register" className="w-full py-2 btn-primary">Daftar</Link> + </div> + <div className="flex flex-col gap-y-4 mt-5"> + <Link className="flex w-full font-normal text-gray-800" href="/shop/brands"> + <span>Brand</span> + <div className="ml-auto"> + <ChevronRightIcon className="stroke-gray-700" /> + </div> + </Link> + <Link className="flex w-full font-normal text-gray-800" href="/blog"> + <span>Blog</span> + <div className="ml-auto"> + <ChevronRightIcon className="stroke-gray-700" /> + </div> + </Link> + <button className="flex w-full font-normal text-gray-800" id="open_category_parent_menu"> + <span>Kategori</span> + <div className="ml-auto"> + <ChevronRightIcon className="stroke-gray-700" /> + </div> + </button> + </div> + </div> + <div className={isMenuActive ? 'menu-overlay block opacity-100' : 'menu-overlay hidden opacity-0'} onClick={closeMenu}></div> + + <div className="sticky-header"> + <div className="flex justify-between items-center"> + <Link href="/"> + <Image src="/images/logo.png" alt="Logo Indoteknik" width={120} height={40} /> + </Link> + <div className="flex gap-4"> + <Link href="/shop/cart"> + <ShoppingCartIcon className="w-6" /> + </Link> + <button onClick={openMenu}> + <MenuIcon className="w-6" /> + </button> + </div> + </div> + <form action="" method="GET" className="flex mt-2"> + <input type="text" name="product_name" className="form-input rounded-r-none border-r-0 focus:outline-none" placeholder="Ketikan nama, merek, part number"/> + <button type="submit" aria-label="search" className="btn-light bg-transparent px-2 py-1 rounded-l-none border-l-0"> + <SearchIcon /> + </button> + </form> + </div> + </> + ) +}
\ No newline at end of file diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js new file mode 100644 index 00000000..f51473ad --- /dev/null +++ b/src/components/ProductCard.js @@ -0,0 +1,39 @@ +import Link from "next/link"; +import currencyFormat from "../helpers/currencyFormat"; +import { createSlug } from "../helpers/slug"; +import { LazyLoadImage } from "react-lazy-load-image-component"; + +import 'react-lazy-load-image-component/src/effects/blur.css'; + + +export default function productCard({ data }) { + let product = data; + return ( + <div className="product-card"> + <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="block"> + <LazyLoadImage effect="blur" src={product.image ? product.image : '/images/noimage.jpeg'} alt={product.name} className="product-card__image" /> + </Link> + <div className="product-card__description"> + <div> + {typeof product.manufacture.name !== undefined ? ( + <a href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)} className="product-card__brand">{product.manufacture.name}</a> + ) : ( + <span className="product-card__brand">-</span> + )} + <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="product-card__title wrap-line-ellipsis-3"> + {product.name} + </Link> + </div> + <div> + {product.lowest_price.discount_percentage > 0 ? ( + <div className="flex gap-x-1 items-center mt-2"> + <span className="badge-yellow">{product.lowest_price.discount_percentage}%</span> + <p className="text-xs text-gray-800 line-through">{currencyFormat(product.lowest_price.price)}</p> + </div> + ) : ''} + <p className="text-sm text-gray-900 font-semibold">{product.lowest_price.price_discount > 0 ? currencyFormat(product.lowest_price.price_discount) : 'Tanya harga'}</p> + </div> + </div> + </div> + ) +}
\ No newline at end of file |