add filters

src/views/home/articles/ArticleItem.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import { cn } from '../../../lib/cn';
+import { useAppSelector } from '../../../redux/hooks';
 
 export interface ArticleItemProps {
     id: number;
@@ -9,6 +10,65 @@ export interface ArticleItemProps {
 
 const ArticleItem: React.FC<ArticleItemProps> = ({ id, name, tags }) => {
     const navigate = useNavigate();
+
+    const filterTags = useAppSelector(
+        (state) => state.store.articles.articleTagFilter,
+    );
+    const nameFilter = useAppSelector(
+        (state) => state.store.articles.filterName,
+    );
+
+    const highlightZ = (name: string, filter: string) => {
+        if (!filter) return name;
+
+        const s = filter.toLowerCase();
+        const t = name.toLowerCase();
+        const n = t.length;
+        const m = s.length;
+
+        const mark = Array(n).fill(false);
+
+        // Проходимся с конца и ставим отметки
+        for (let i = n - 1; i >= 0; i--) {
+            if (i + m <= n && t.slice(i, i + m) === s) {
+                for (let j = i; j < i + m; j++) {
+                    if (mark[j]) break;
+                    mark[j] = true;
+                }
+            }
+        }
+
+        // === Формируем единые жёлтые блоки ===
+        const result: any[] = [];
+        let i = 0;
+
+        while (i < n) {
+            if (!mark[i]) {
+                // обычный символ
+                result.push(name[i]);
+                i++;
+            } else {
+                // начинаем жёлтый блок
+                let j = i;
+                while (j < n && mark[j]) j++;
+
+                const chunk = name.slice(i, j);
+                result.push(
+                    <span
+                        key={i}
+                        className="bg-yellow-400 text-black rounded px-1"
+                    >
+                        {chunk}
+                    </span>,
+                );
+
+                i = j;
+            }
+        }
+
+        return result;
+    };
+
     return (
         <div
             className={cn(
@@ -26,7 +86,7 @@ const ArticleItem: React.FC<ArticleItemProps> = ({ id, name, tags }) => {
                     #{id}
                 </div>
                 <div className="text-[18px] font-bold flex items-center bg-red-400r">
-                    {name}
+                    {highlightZ(name, nameFilter)}
                 </div>
             </div>
             <div className="text-[14px] flex text-liquid-light gap-[10px] mt-[10px]">
@@ -36,6 +96,8 @@ const ArticleItem: React.FC<ArticleItemProps> = ({ id, name, tags }) => {
                         className={cn(
                             'rounded-full px-[16px] py-[8px] bg-liquid-lighter',
                             v == 'Sertificated' && 'text-liquid-green',
+                            filterTags.includes(v) &&
+                                'border-liquid-brightmain border-[1px] border-solid text-liquid-brightmain',
                         )}
                     >
                         {v}