diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Filter.js | 34 | ||||
| -rw-r--r-- | src/components/Header.js | 10 | ||||
| -rw-r--r-- | src/icons/trash.svg | 4 |
3 files changed, 38 insertions, 10 deletions
diff --git a/src/components/Filter.js b/src/components/Filter.js index 4727fb9d..19e9778f 100644 --- a/src/components/Filter.js +++ b/src/components/Filter.js @@ -93,7 +93,7 @@ const Filter = ({ </div> <form className="flex flex-col gap-y-4" onSubmit={submit}> {selectedBrand || selectedCategory || priceFrom || priceTo || orderBy ? ( - <button type="button" className="text-yellow-900 font-semibold ml-auto" onClick={reset}> + <button type="button" className="text-yellow_r-12 font-semibold ml-auto" onClick={reset}> Reset Filter </button> ) : ''} @@ -101,10 +101,34 @@ const Filter = ({ <div> <label>Urutkan</label> <div className="flex gap-2 mt-2 overflow-x-auto w-full"> - <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800 flex-shrink-0" + (orderBy == 'price-asc' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('price-asc')}>Harga Terendah</button> - <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800 flex-shrink-0" + (orderBy == 'price-desc' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('price-desc')}>Harga Tertinggi</button> - <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800 flex-shrink-0" + (orderBy == 'popular' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('popular')}>Populer</button> - <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800 flex-shrink-0" + (orderBy == 'stock' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('stock')}>Ready Stock</button> + <button + type="button" + className={"p-2 rounded border border-gray_r-6 flex-shrink-0" + (orderBy == 'price-asc' ? ' border-yellow_r-9 text-yellow_r-10' : '')} + onClick={() => changeOrderBy('price-asc')} + > + Harga Terendah + </button> + <button + type="button" + className={"p-2 rounded border border-gray_r-6 flex-shrink-0" + (orderBy == 'price-desc' ? ' border-yellow_r-9 text-yellow_r-10' : '')} + onClick={() => changeOrderBy('price-desc')} + > + Harga Tertinggi + </button> + <button + type="button" + className={"p-2 rounded border border-gray_r-6 flex-shrink-0" + (orderBy == 'popular' ? ' border-yellow_r-9 text-yellow_r-10' : '')} + onClick={() => changeOrderBy('popular')} + > + Populer + </button> + <button + type="button" + className={"p-2 rounded border border-gray_r-6 flex-shrink-0" + (orderBy == 'stock' ? ' border-yellow_r-9 text-yellow_r-10' : '')} + onClick={() => changeOrderBy('stock')} + > + Ready Stock + </button> </div> </div> ) : ''} diff --git a/src/components/Header.js b/src/components/Header.js index ea808000..88d4d368 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -69,7 +69,7 @@ export default function Header({ title }) { <title>{title}</title> </Head> <div className={'menu-wrapper' + (isMenuActive ? ' active ' : '')}> - <div className="flex gap-x-2 items-center border-b border-gray-500 p-4"> + <div className="flex gap-x-2 items-center border-b border-gray_r-6 p-4"> {auth ? ( <h1>Hi, {auth.name}</h1> ) : ( @@ -81,26 +81,26 @@ export default function Header({ title }) { </div> <div className="flex flex-col"> {auth ? ( - <Link className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3" href="/shop/brands" onClick={closeMenu}> + <Link className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" href="/shop/brands" onClick={closeMenu}> <span>Profil Saya</span> <div className="ml-auto"> <ChevronRightIcon className="stroke-gray-700" /> </div> </Link> ) : ''} - <Link className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3" href="/shop/brands" onClick={closeMenu}> + <Link className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" href="/shop/brands" onClick={closeMenu}> <span>Semua Brand</span> <div className="ml-auto"> <ChevronRightIcon className="stroke-gray-700" /> </div> </Link> - <Link className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3" href="/blog" onClick={closeMenu}> + <Link className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" href="/blog" onClick={closeMenu}> <span>Blog Indoteknik</span> <div className="ml-auto"> <ChevronRightIcon className="stroke-gray-700" /> </div> </Link> - <button className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3" onClick={closeMenu}> + <button className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" onClick={closeMenu}> <span>Kategori</span> <div className="ml-auto"> <ChevronRightIcon className="stroke-gray-700" /> diff --git a/src/icons/trash.svg b/src/icons/trash.svg new file mode 100644 index 00000000..e23673ee --- /dev/null +++ b/src/icons/trash.svg @@ -0,0 +1,4 @@ +<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-trash"> + <polyline points="3 6 5 6 21 6"></polyline> + <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path> +</svg>
\ No newline at end of file |
