From d6d2d9ceef2e95b604ac4ebdc054cad44a8440b1 Mon Sep 17 00:00:00 2001
From: IT Fixcomart <it@fixcomart.co.id>
Date: Mon, 31 Oct 2022 16:31:56 +0700
Subject: Product detail and header

---
 src/components/header.js      | 68 +++++++++++++++++++++++++++++++++++++++++++
 src/components/productCard.js | 35 ++++++++++++++++++++++
 2 files changed, 103 insertions(+)
 create mode 100644 src/components/header.js
 create mode 100644 src/components/productCard.js

(limited to 'src/components')

diff --git a/src/components/header.js b/src/components/header.js
new file mode 100644
index 00000000..baebbd3a
--- /dev/null
+++ b/src/components/header.js
@@ -0,0 +1,68 @@
+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 { 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">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="stroke-gray-700 feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+              </div>
+          </Link>
+          <Link className="flex w-full font-normal text-gray-800" href="/blog">
+              <span>Blog</span>
+              <div className="ml-auto">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="stroke-gray-700 feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+              </div>
+          </Link>
+          <button className="flex w-full font-normal text-gray-800" id="open_category_parent_menu">
+              <span>Kategori</span>
+              <div className="ml-auto">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="stroke-gray-700 feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+              </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..dc292316
--- /dev/null
+++ b/src/components/productCard.js
@@ -0,0 +1,35 @@
+import Link from "next/link";
+import currencyFormat from "../helpers/currencyFormat";
+import { createSlug } from "../helpers/slug";
+
+export default function productCard({ data }) {
+  let product = data;
+  return (
+    <div className="product-card">
+      <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="block">
+        <img src={product.image} alt={product.name} className="product-card__image" loading="lazy" />
+      </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>
+          )}
+          <a href={'/shop/product/' + createSlug(product.name, product.id)} className="product-card__title wrap-line-ellipsis-3">
+            {product.name}
+          </a>
+        </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
-- 
cgit v1.2.3