diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Filter.js | 34 | ||||
| -rw-r--r-- | src/components/Header.js | 10 |
2 files changed, 34 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" /> |