summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/product/components/ProductFilterDesktop.jsx54
-rw-r--r--src/lib/product/components/ProductSearch.jsx56
2 files changed, 34 insertions, 76 deletions
diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx
index 276a7cc9..e430ac58 100644
--- a/src/lib/product/components/ProductFilterDesktop.jsx
+++ b/src/lib/product/components/ProductFilterDesktop.jsx
@@ -1,9 +1,8 @@
-import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
import { useRouter } from 'next/router'
import { useState } from 'react'
import _ from 'lodash'
import { toQuery } from 'lodash-contrib'
-import { Accordion, Badge, Checkbox, Label, TextInput } from 'flowbite-react'
+import { Accordion, Checkbox, Label, TextInput } from 'flowbite-react'
const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = null }) => {
const router = useRouter()
@@ -51,29 +50,22 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
return (
<>
- <Accordion
- flush={true}
- alwaysOpen={true}
- >
+ <Accordion flush={true} alwaysOpen={true}>
<Accordion.Panel>
<Accordion.Title>Kategori</Accordion.Title>
- <Accordion.Content className='overflow-auto max-h-[150px]'>
- <div
- className='flex flex-col gap-4 scroll-snap'
- id='checkbox'
- >
+ <Accordion.Content className='overflow-auto max-h-[200px]'>
+ <div className='flex flex-col gap-4 scroll-snap' id='checkbox'>
{categories.map((category, index) => (
- <div
- className='flex items-center gap-2'
- key={index}
- >
+ <div className='flex items-center gap-2' key={index}>
<Checkbox
+ id={`categoryOption${index}`}
checked={categoryValues.includes(category)}
onChange={handleCategorysChange}
value={category}
/>
- <Label htmlFor='accept'> {category} </Label>
- {/* <div className='badge-solid-red'>250</div> */}
+ <Label htmlFor={`categoryOption${index}`} className='dark:text-gray_r-12/80'>
+ {category}
+ </Label>
</div>
))}
</div>
@@ -82,24 +74,20 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
<Accordion.Panel>
{!defaultBrand && (
<>
- <Accordion.Title >Brand</Accordion.Title>
- <Accordion.Content className='overflow-auto max-h-[150px]'>
- <div
- className='flex flex-col gap-4 scroll-snap'
- id='checkbox'
- >
+ <Accordion.Title>Brand</Accordion.Title>
+ <Accordion.Content className='overflow-auto max-h-[200px]'>
+ <div className='flex flex-col gap-4 scroll-snap' id='checkbox'>
{brands.map((brand, index) => (
- <div
- className='flex items-center gap-2'
- key={index}
- >
+ <div className='flex items-center gap-2' key={index}>
<Checkbox
+ id={`brandOption${index}`}
checked={brandValues.includes(brand)}
onChange={handleBrandsChange}
value={brand}
/>
- <Label htmlFor='accept'> {brand} </Label>
- {/* <div className='badge-solid-red'>250</div> */}
+ <Label htmlFor={`brandOption${index}`} className='dark:text-gray_r-12/80'>
+ {brand}
+ </Label>
</div>
))}
</div>
@@ -108,7 +96,7 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
)}
</Accordion.Panel>
<Accordion.Panel>
- <Accordion.Title> Harga </Accordion.Title>
+ <Accordion.Title>Harga</Accordion.Title>
<Accordion.Content>
<div className='mb-3'>
<TextInput
@@ -132,11 +120,7 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
</Accordion.Panel>
</Accordion>
<div className='p-5'>
- <button
- type='button'
- className='btn-solid-red w-full mt-6'
- onClick={handleSubmit}
- >
+ <button type='button' className='btn-solid-red w-full mt-6' onClick={handleSubmit}>
Terapkan
</button>
</div>
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 3078eac5..b5d7c974 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -10,7 +10,6 @@ import useActive from '@/core/hooks/useActive'
import MobileView from '@/core/components/views/MobileView'
import DesktopView from '@/core/components/views/DesktopView'
import NextImage from 'next/image'
-import { ChevronDownIcon } from '@heroicons/react/24/outline'
import ProductFilterDesktop from './ProductFilterDesktop'
import { useRouter } from 'next/router'
@@ -43,7 +42,6 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
)
const [open, setOpen] = useState(1)
- const [order, setOrder] = useState(query?.orderBy)
const handleOpen = (value) => {
setOpen(open === value ? 0 : value)
@@ -55,15 +53,15 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
{ value: 'stock', label: 'Ready Stock' }
]
- const handleOrderBy = (e) => {
+ const handleOrderBy = (e) => {
let params = {
...router.query,
- orderBy: e.target.value
- }
- params = _.pickBy(params, _.identity)
- params = toQuery(params)
- router.push(`${prefixUrl}?${params}`)
- }
+ orderBy: e.target.value
+ }
+ params = _.pickBy(params, _.identity)
+ params = toQuery(params)
+ router.push(`${prefixUrl}?${params}`)
+ }
useEffect(() => {
if (!products) {
@@ -109,21 +107,13 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
)}
</div>
- <button
- className='btn-light mb-6 py-2 px-5'
- onClick={popup.activate}
- >
+ <button className='btn-light mb-6 py-2 px-5' onClick={popup.activate}>
Filter
</button>
<div className='grid grid-cols-2 gap-3'>
{products &&
- products.map((product) => (
- <ProductCard
- product={product}
- key={product.id}
- />
- ))}
+ products.map((product) => <ProductCard product={product} key={product.id} />)}
</div>
<Pagination
@@ -184,17 +174,6 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
)}
</div>
<div className='justify-end flex '>
- {/* <div>
- <select
- name='jumlah-baris'
- className='form-input mt-2'
- >
- <option value=''>Jumlah Baris</option>
- {orderOptions.map((option, index) => (
- <option value={option.value}> {option.label} </option>
- ))}
- </select>
- </div> */}
<div className='ml-3'>
<select
name='urutan'
@@ -203,7 +182,10 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
>
<option value=''>Urutkan</option>
{orderOptions.map((option, index) => (
- <option value={option.value}> {option.label} </option>
+ <option key={index} value={option.value}>
+ {' '}
+ {option.label}{' '}
+ </option>
))}
</select>
</div>
@@ -211,12 +193,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
</div>
<div className='grid grid-cols-5 gap-x-3 gap-y-6'>
{products &&
- products.map((product) => (
- <ProductCard
- product={product}
- key={product.id}
- />
- ))}
+ products.map((product) => <ProductCard product={product} key={product.id} />)}
</div>
<div className='flex justify-between items-center mt-6 mb-2'>
<div className='pt-2 pb-6 flex items-center gap-x-3'>
@@ -229,10 +206,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
<div className='text-gray_r-12/90'>
<span>
Barang yang anda cari tidak ada?{' '}
- <a
- href='#'
- className='text-red_r-9'
- >
+ <a href='#' className='text-red_r-9'>
Hubungi Kami
</a>
</span>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 04:46:20 +0000