diff options
Diffstat (limited to 'src/components/Filter.js')
| -rw-r--r-- | src/components/Filter.js | 34 |
1 files changed, 29 insertions, 5 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> ) : ''} |