From 8ee5432961a5b73e8e5c42af2eda05621723c9e7 Mon Sep 17 00:00:00 2001
From: IT Fixcomart <it@fixcomart.co.id>
Date: Fri, 11 Nov 2022 18:02:11 +0700
Subject: Connect to solr (search product), header component with title, fix
 product card layout, show product search result

---
 src/pages/shop/search.js | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/pages/shop/search.js

(limited to 'src/pages/shop/search.js')

diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js
new file mode 100644
index 00000000..6e6839be
--- /dev/null
+++ b/src/pages/shop/search.js
@@ -0,0 +1,46 @@
+import axios from "axios";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import Header from "../../components/Header";
+import ProductCard from "../../components/ProductCard";
+
+export async function getServerSideProps(context) {
+  const { q, page = 1 } = context.query;
+  let searchResults = await axios(`http://${context.req.headers.host}/api/shop/search?q=${q}&page=${page}`);
+  searchResults = searchResults.data;
+  return { props: { searchResults, q } };
+}
+
+export default function ShopSearch({ searchResults, q, page = 1 }) {
+  const pageTotal = Math.ceil(searchResults.response.numFound / searchResults.responseHeader.params.rows);
+
+  return (
+    <>
+      <Header title={`Jual ${q} - Indoteknik`} />
+      <main>
+        <div className="p-4">
+          <h1 className="mb-1">Produk</h1>
+          <div className="text-xs mb-4">
+            Menampilkan&nbsp;
+            {searchResults.responseHeader.params.start + 1}-{searchResults.responseHeader.params.start + searchResults.responseHeader.params.rows}
+            &nbsp;dari&nbsp;
+            {searchResults.response.numFound}
+            &nbsp;produk untuk pencarian {q}
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            {searchResults.response.products.map((product) => (
+              <ProductCard key={product.id} data={product} />
+            ))}
+          </div>
+          <div className="flex justify-center gap-x-1 mt-4">
+            {[...Array(pageTotal)].map((v, i) => (
+              <Link href={`/shop/search?q=${q}&page=${i+1}`} key={i} className={"p-1 px-2 rounded ease-linear duration-150 " + (page == (i + 1) ? "bg-yellow-900 text-white" : "bg-gray-100 hover:bg-gray-300 text-gray-900")}>
+                {i + 1}
+              </Link>
+            ))}
+          </div>
+        </div>
+      </main>
+    </>
+  )
+}
\ No newline at end of file
-- 
cgit v1.2.3