feat: updated filters dropdown and created stories for it

components/tools/FiltersDropdown.stories.tsx

@@ -0,0 +1,75 @@
+import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import type { Language, Technology } from '@/types/components/tools/ToolDataType';
+
+import tags from '../../config/all-tags.json';
+import FiltersDropdown from './FiltersDropdown';
+
+const meta: Meta<typeof FiltersDropdown> = {
+  title: 'Components/FiltersDropdown',
+  component: FiltersDropdown,
+  argTypes: {
+    dataList: {
+      control: false
+    },
+    checkedOptions: {
+      control: {
+        type: 'object'
+      }
+    },
+    setCheckedOptions: {
+      control: false
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FiltersDropdown>;
+
+const Dropdown: Story = {
+  args: {
+    checkedOptions: []
+  },
+
+  render: (args) => {
+    const [{ checkedOptions }, updateArgs] = useArgs();
+
+    const setCheckedOptions: React.Dispatch<React.SetStateAction<string[]>> = (newValue) => {
+      if (typeof newValue === 'function') {
+        const updatedValue = (newValue as (prevState: string[]) => string[])(checkedOptions);
+
+        updateArgs({ checkedOptions: updatedValue });
+      } else {
+        updateArgs({ checkedOptions: newValue });
+      }
+    };
+
+    return <FiltersDropdown {...args} checkedOptions={checkedOptions} setCheckedOptions={setCheckedOptions} />;
+  }
+};
+
+const languageList = tags.languages as Language[];
+
+export const LanguageDropdown: Story = {
+  ...Dropdown,
+
+  args: {
+    ...Dropdown.args,
+    dataList: languageList,
+    checkedOptions: []
+  }
+};
+
+const technologyList = tags.technologies as Technology[];
+
+export const TechnologyDropdown: Story = {
+  ...Dropdown,
+
+  args: {
+    ...Dropdown.args,
+    dataList: technologyList,
+    checkedOptions: []
+  }
+};

components/tools/FiltersDropdown.tsx

@@ -3,11 +3,9 @@ import { twMerge } from 'tailwind-merge';
 
 import type { Category, Language, Technology } from '@/types/components/tools/ToolDataType';
 
-import Checkbox from './Checkbox';
-
 type DataList = Language[] | Technology[] | Category[];
 
-interface FiltersDropdownProps {
+export interface FiltersDropdownProps {
   dataList?: DataList;
   checkedOptions?: string[];
   setCheckedOptions: React.Dispatch<React.SetStateAction<string[]>>;
@@ -28,7 +26,7 @@ export default function FiltersDropdown({
   setCheckedOptions,
   className = ''
 }: FiltersDropdownProps) {
-  const handleClickOption = (option: string) => {
+  const handleClickOption = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, option: string) => {
     const isChecked = checkedOptions.includes(option);
     const updatedOptions = isChecked ? checkedOptions.filter((item) => item !== option) : [...checkedOptions, option];
 
@@ -37,13 +35,30 @@ export default function FiltersDropdown({
 
   return (
     <div
-      className={twMerge(`max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150 ${className}`)}
+      className={twMerge(
+        `max-w-lg flex flex-col max-h-[40vh] gap-1 overflow-y-auto p-2 px-0 duration-200 delay-150 bg-gray-200 ${className}`
+      )}
       data-testid='FiltersDropdown-div'
     >
       {dataList.map((data, index) => {
         const checked = checkedOptions.includes(data.name);
 
-        return <Checkbox key={index} name={data.name} checked={checked} handleClickOption={handleClickOption} />;
+        return (
+          <div
+            key={index}
+            className={twMerge(
+              `hover:bg-gray-300 text-black p-1 py-2 gap-1 flex cursor-pointer items-start ${checked ? 'bg-gray-400' : ''}`
+            )}
+            onClick={(event) => handleClickOption(event, data.name)}
+          >
+            {checked ? (
+              <img src='/img/illustrations/icons/CheckedIcon.svg' alt='checked' />
+            ) : (
+              <img src='/img/illustrations/icons/UncheckedIcon.svg' alt='unchecked' />
+            )}
+            <div className='-mt-px mb-px text-xs'>{data.name}</div>
+          </div>
+        );
       })}
     </div>
   );