diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/icons/filter.svg | 1 | ||||
| -rw-r--r-- | src/pages/_app.js | 22 | ||||
| -rw-r--r-- | src/pages/shop/search.js | 8 |
3 files changed, 29 insertions, 2 deletions
diff --git a/src/icons/filter.svg b/src/icons/filter.svg new file mode 100644 index 00000000..c15ce7b9 --- /dev/null +++ b/src/icons/filter.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
\ No newline at end of file diff --git a/src/pages/_app.js b/src/pages/_app.js index 136b8cb3..1d8c5ce0 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -2,8 +2,23 @@ import '../styles/globals.css'; import NextProgress from "next-progress"; import { ToastContainer, Slide } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; +import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; +import Image from 'next/image'; function MyApp({ Component, pageProps }) { + const router = useRouter(); + const [pageLoading, setPageLoading] = useState(false); + + useEffect(() => { + const handleStartLoading = () => { setPageLoading(true) }; + const handleCompleteLoading = () => { setPageLoading(false) }; + + router.events.on('routeChangeStart', handleStartLoading); + router.events.on('routeChangeComplete', handleCompleteLoading); + router.events.on('routeChangeError', handleCompleteLoading); + }, [router]); + return ( <> <ToastContainer @@ -17,7 +32,12 @@ function MyApp({ Component, pageProps }) { <NextProgress color="#D7A30A" options={{ showSpinner: false, }} /> - <Component {...pageProps} /> + {pageLoading ? ( + <div className='h-screen w-screen flex flex-col justify-center items-center'> + <Image src='/images/loading.gif' width={64} height={64} alt='Loading Indoteknik' /> + <h1>Loading</h1> + </div> + ) : <Component {...pageProps} />} </> ) } diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js index 9b085ad0..ce76f88e 100644 --- a/src/pages/shop/search.js +++ b/src/pages/shop/search.js @@ -2,6 +2,7 @@ import axios from "axios"; import Header from "../../components/Header"; import Pagination from "../../components/Pagination"; import ProductCard from "../../components/ProductCard"; +import FilterIcon from "../../icons/filter.svg"; export async function getServerSideProps(context) { const { q, page = 1 } = context.query; @@ -20,7 +21,12 @@ export default function ShopSearch({ searchResults, q, page }) { <Header title={`Jual ${q} - Indoteknik`} /> <main> <div className="p-4"> - <h1 className="mb-1">Produk</h1> + <div className="flex justify-between items-center gap-x-2 mb-1"> + <h1>Produk</h1> + <button className="btn-light py-1 flex items-center gap-x-2"> + <FilterIcon className="w-4 h-4" /> <span>Filter</span> + </button> + </div> <div className="text-sm mb-4"> {productFound > 0 ? ( <> |
