feat: use react select in search modal filter

src/components/Checkbox.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { MutableRefObject, useState } from 'react';
 import Toggle from 'react-toggle';
 
@@ -7,10 +8,10 @@ interface SelectorProps {
   labelComponent?: JSX.Element;
   disabled?: boolean;
   innerRef?: MutableRefObject<any>;
-  placeholder?: string;
   fieldClass?: string;
   isChecked?: boolean;
   onChangeCallback?: (value, { target }) => void;
+  dir?: 'ltr' | 'rtl';
 }
 
 export default function Checkbox({
@@ -20,9 +21,9 @@ export default function Checkbox({
   disabled = false,
   innerRef = null,
   fieldClass = '',
-  placeholder = 'Type something...',
   isChecked,
   onChangeCallback,
+  dir = 'ltr',
 }: Readonly<SelectorProps>): JSX.Element {
   const [checkboxValue, setCheckboxValue] = useState<boolean>(isChecked);
 
@@ -34,7 +35,7 @@ export default function Checkbox({
   }
 
   return (
-    <div className={`checkbox-field ${fieldClass}`}>
+    <div className={clsx('checkbox-field', 'fieldClass', dir)}>
       {label && (
         <label
           htmlFor={name}

src/components/SearchModal/SearchFilter.tsx

@@ -1,3 +1,4 @@
+import Checkbox from 'components/Checkbox';
 import { useTranslation } from 'next-i18next';
 
 interface SearchFilterProps {
@@ -25,28 +26,20 @@ export function SearchFilter({
         marginBottom: '1em',
       }}
     >
-      <div style={{ display: 'flex', gap: '.25em' }}>
-        <input
-          type='checkbox'
-          name='filter-link'
-          id='filter-link'
-          onChange={({ target }) => setCanSearchLink(target.checked)}
-          checked={canSearchLink}
-        />
-        <label htmlFor='filter-link'>{t('common:link.links')}</label>
-      </div>
-      <div style={{ display: 'flex', gap: '.25em' }}>
-        <input
-          type='checkbox'
-          name='filter-category'
-          id='filter-category'
-          onChange={({ target }) => setCanSearchCategory(target.checked)}
-          checked={canSearchCategory}
-        />
-        <label htmlFor='filter-category'>
-          {t('common:category.categories')}
-        </label>
-      </div>
+      <Checkbox
+        name='favorite'
+        isChecked={canSearchLink}
+        onChangeCallback={(value) => setCanSearchLink(value)}
+        label={t('common:link.links')}
+        dir='rtl'
+      />
+      <Checkbox
+        name='filter-category'
+        isChecked={canSearchCategory}
+        onChangeCallback={(value) => setCanSearchCategory(value)}
+        label={t('common:category.categories')}
+        dir='rtl'
+      />
     </div>
   );
 }

src/styles/globals.scss

@@ -161,6 +161,14 @@ input::placeholder {
   display: flex;
   align-items: center;
   gap: 5px;
+
+  &.ltr {
+    flex-direction: row;
+  }
+
+  &.rtl {
+    flex-direction: row-reverse;
+  }
 }
 
 select:not(.nostyle) {