From 949a03f9a12b17fad85ecc58baad6352ba98d04d Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 27 Mar 2023 13:41:19 +0700
Subject: fix dark mode

---
 .../product/components/ProductFilterDesktop.jsx    | 54 ++++++++-------------
 src/lib/product/components/ProductSearch.jsx       | 56 ++++++----------------
 2 files changed, 34 insertions(+), 76 deletions(-)

(limited to 'src/lib')

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>
-- 
cgit v1.2.3