diff options
Diffstat (limited to 'src/pages/shop/search.js')
| -rw-r--r-- | src/pages/shop/search.js | 46 |
1 files changed, 46 insertions, 0 deletions
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 + {searchResults.responseHeader.params.start + 1}-{searchResults.responseHeader.params.start + searchResults.responseHeader.params.rows} + dari + {searchResults.response.numFound} + 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 |