fix(ui): заменить таблицы на карточки данных и улучшить функциональность поиска

components/data-page-toolbar.tsx

@@ -3,7 +3,11 @@
 import { ReactNode } from "react"
 import { SearchIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
-import { Input } from "@/components/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group"
 import {
   Filters,
   type Filter,
@@ -58,15 +62,16 @@ function DataPageToolbar<T extends string = string>({
         />
       )}
       {onSearchChange != null && (
-        <div className="flex items-center gap-2 h-8 px-3 border border-input rounded-md bg-background min-w-[220px]">
-          <SearchIcon className="size-3.5 text-muted-foreground shrink-0" />
-          <Input
-            className="h-6 border-0 bg-transparent px-0 shadow-none focus-visible:ring-0"
+        <InputGroup className="min-w-[220px] max-w-sm">
+          <InputGroupAddon>
+            <SearchIcon className="size-3.5" />
+          </InputGroupAddon>
+          <InputGroupInput
             placeholder={searchPlaceholder}
             value={search ?? ""}
             onChange={(e) => onSearchChange(e.target.value)}
           />
-        </div>
+        </InputGroup>
       )}
       {countLabel && (
         <span className="text-sm text-muted-foreground ml-auto">{countLabel}</span>