filter

src/components/drop-down-list/Filter.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { cn } from '../../lib/cn';
-import { checkMark, chevroneDropDownList } from '../../assets/icons/input';
+import { checkMark } from '../../assets/icons/input';
 import { useClickOutside } from '../../hooks/useClickOutside';
+import { Sort, SortActive } from '../../assets/icons/filters';
 
 export interface FilterItem {
   text: string;
@@ -11,106 +12,101 @@ export interface FilterItem {
 interface FilterProps {
   disabled?: boolean;
   className?: string;
-    onChange: (state: string[]) => void; // теперь массив выбранных значений
+  onChange: (items: FilterItem[]) => void;
   defaultState?: FilterItem[];
   items: FilterItem[];
 }
 
 export const Filter: React.FC<FilterProps> = ({
+  disabled = false,
   className = '',
   onChange,
   defaultState = [],
-    items = [{ text: '', value: '' }],
+  items = [],
 }) => {
-    if (items.length === 0) items.push({ text: '', value: '' });
+  const [value, setValue] = React.useState<FilterItem[]>(defaultState);
-
+  const [active, setActive] = React.useState(false);
-    const [selectedValues, setSelectedValues] =
-        React.useState<FilterItem[]>(defaultState);
-    const [active, setActive] = React.useState<boolean>(false);
-
-    React.useEffect(() => {
-        onChange(selectedValues.map((v) => v.value));
-    }, [selectedValues]);
 
   const ref = React.useRef<HTMLDivElement>(null);
-    useClickOutside(ref, () => setActive(false));
+
+  useClickOutside(ref, () => {
+    setActive(false);
+  });
+
+  React.useEffect(() => {
+    onChange(value);
+  }, [value]);
 
   const toggleItem = (item: FilterItem) => {
-        const exists = selectedValues.some((v) => v.value === item.value);
+    const exists = value.some((val) => val.value === item.value);
     if (exists) {
-            setSelectedValues(
+      setValue(value.filter((val) => val.value !== item.value));
-                selectedValues.filter((v) => v.value !== item.value),
-            );
     } else {
-            setSelectedValues([...selectedValues, item]);
+      setValue([...value, item]);
     }
   };
 
-    const displayText =
-        selectedValues.length > 0
-            ? selectedValues.map((v) => v.text).join(', ')
-            : 'Выберите...';
-
   return (
     <div className={cn('relative', className)} ref={ref}>
       <div
         className={cn(
-                    'flex items-center h-[40px] rounded-[10px] bg-liquid-lighter px-[16px] w-[220px]',
+          'items-center h-[40px] rounded-full bg-liquid-lighter w-[40px] flex',
-                    'text-[16px] font-bold cursor-pointer select-none',
+          'text-[18px] font-bold cursor-pointer select-none',
-                    'transition-all active:scale-95 duration-300 overflow-hidden whitespace-nowrap text-ellipsis',
+          'overflow-hidden',
+          (active || value.length > 0) && 'w-fit border-liquid-brightmain border-[1px] border-solid',
         )}
-                onClick={() => setActive(!active)}
+        onClick={() => {
-                title={displayText}
+          if (!disabled) setActive(!active);
+        }}
       >
-                {displayText}
+        <div className="text-liquid-brightmain pl-[42px] pr-[16px] w-fit">
+          {value.length}
+        </div>
       </div>
 
+      {/* Sort icons */}
       <img
-                src={chevroneDropDownList}
+        src={Sort}
         className={cn(
-                    'absolute right-[16px] h-[24px] w-[24px] top-[8.5px] rotate-0 transition-all duration-300 pointer-events-none',
+          'absolute left-[8px] top-[8px] h-[24px] w-[24px] rotate-0 transition-all duration-300 pointer-events-none',
-                    active && 'rotate-180',
+        )}
+      />
+      <img
+        src={SortActive}
+        className={cn(
+          'absolute left-[8px] top-[8px] h-[24px] w-[24px] rotate-0 transition-all duration-300 pointer-events-none opacity-0',
+          (active || value.length > 0) && 'opacity-100',
         )}
       />
 
+      {/* Dropdown */}
       <div
         className={cn(
-                    'absolute rounded-[10px] bg-liquid-lighter w-[220px] left-0 top-[48px] z-50 transition-all duration-300',
+          'absolute rounded-[10px] bg-liquid-lighter w-[460px] left-0 top-[48px] z-50 transition-all duration-300',
           'grid overflow-hidden',
-                    active
+          active ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
-                        ? 'grid-rows-[1fr] opacity-100'
-                        : 'grid-rows-[0fr] opacity-0',
         )}
       >
         <div className="overflow-hidden p-[8px]">
-                    <div
+          <div className="overflow-y-scroll max-h-[200px] thin-scrollbar pr-[8px] grid grid-cols-2 gap-[20px]">
-                        className={cn(
+            {items.map((v) => {
-                            'overflow-y-scroll max-h-[220px] thin-scrollbar pr-[8px]',
+              const selected = value.some((val) => val.value === v.value);
-                            'grid grid-cols-2 gap-[4px]',
-                        )}
-                    >
-                        {items.map((v, i) => {
-                            const isSelected = selectedValues.some(
-                                (sel) => sel.value === v.value,
-                            );
               return (
                 <div
-                                    key={i}
+                  key={v.value}
                   className={cn(
-                                        'cursor-pointer h-[36px] relative transition-all duration-300 flex items-center pl-[8px] pr-[24px] rounded-[6px]',
+                    'cursor-pointer h-[36px] relative transition-all duration-300',
-                                        'text-[14px] font-medium select-none',
+                    'text-[16px] font-medium select-none flex items-center pl-[8px]',
-                                        'hover:bg-liquid-background',
+                    'hover:bg-liquid-background rounded-[10px]',
-                                        isSelected &&
+                    selected && 'bg-liquid-background/50',
-                                            'bg-liquid-background font-semibold',
                   )}
                   onClick={() => toggleItem(v)}
                 >
                   {v.text}
-
+                  {selected && (
-                                    {isSelected && (
                     <img
                       src={checkMark}
-                                            className="absolute right-[6px] w-[16px] h-[16px]"
+                      className="absolute right-[8px] h-[20px] w-[20px]"
                     />
                   )}
                 </div>

src/components/drop-down-list/Sorter.tsx

@@ -45,8 +45,8 @@ export const Sorter: React.FC<SorterProps> = ({
                 className={cn(
                     'grid items-center h-[40px] rounded-full bg-liquid-lighter grid-cols-[40px]',
                     'text-[18px] font-bold cursor-pointer select-none',
-                    'transitin-all active:scale-95 duration-300 overflow-hidden',
+                    'overflow-hidden',
-                    active && ' grid-cols-[1fr]',
+                    active && ' grid-cols-[1fr]  border-liquid-brightmain border-[1px] border-solid',
                 )}
                 onClick={() => {
                     setActive(!active);
@@ -54,7 +54,7 @@ export const Sorter: React.FC<SorterProps> = ({
             >
                 <div
                     className={cn(
-                        'text-liquid-brightmain pl-[40px] pr-[16px]',
+                        'text-liquid-brightmain pl-[42px] pr-[16px]',
                         active && '',
                     )}
                 >
@@ -63,7 +63,7 @@ export const Sorter: React.FC<SorterProps> = ({
                 </div>
             </div>
 
-            <div className="h-[24px] w-[24px] bg-red-500"></div>
+            <div className="h-[24px] w-[24px]"></div>
             <img
                 src={Sort}
                 className={cn(

src/views/home/missions/Filter.tsx

@@ -14,7 +14,7 @@ const Filters = () => {
     ];
 
     return (
-        <div className=" h-[50px] mb-[20px] flex">
+        <div className=" h-[50px] mb-[20px] flex gap-[20px]">
             <div></div>
 
             <Sorter
@@ -35,12 +35,11 @@ const Filters = () => {
                 onChange={(v) => console.log(v)}
             />
 
-            {/* <Filter
+            <Filter
                 items={items}
-                defaultState={[items[0], items[3]]} // начальные выбранные элементы
+                defaultState={[]}
-                onChange={(values) => console.log(values)} // обработчик изменения
+                onChange={(values) => console.log(values)}
-                className="w-[240px]"
+            />
-            /> */}
         </div>
     );
 };