Добавлен новый компонент FulfillmentWarehouseDemo и соответствующая вкладка в UIKitSection. Обновлены импорты и форматирование кода для улучшения читаемости и структуры. Исправлены стили вкладок для более удобного взаимодействия с пользователем.

src/components/admin/ui-kit-section.tsx

@@ -1,78 +1,131 @@
-"use client"
+"use client";
 
-
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { ButtonsDemo } from './ui-kit/buttons-demo'
-import { FormsDemo } from './ui-kit/forms-demo'
-import { CardsDemo } from './ui-kit/cards-demo'
-import { TypographyDemo } from './ui-kit/typography-demo'
-import { ColorsDemo } from './ui-kit/colors-demo'
-import { IconsDemo } from './ui-kit/icons-demo'
-import { LayoutsDemo } from './ui-kit/layouts-demo'
-import { NavigationDemo } from './ui-kit/navigation-demo'
-import { SpecializedDemo } from './ui-kit/specialized-demo'
-import { AnimationsDemo } from './ui-kit/animations-demo'
-import { StatesDemo } from './ui-kit/states-demo'
-import { MediaDemo } from './ui-kit/media-demo'
-import { InteractiveDemo } from './ui-kit/interactive-demo'
-import { BusinessDemo } from './ui-kit/business-demo'
-import { TimesheetDemo } from './ui-kit/timesheet-demo'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ButtonsDemo } from "./ui-kit/buttons-demo";
+import { FormsDemo } from "./ui-kit/forms-demo";
+import { CardsDemo } from "./ui-kit/cards-demo";
+import { TypographyDemo } from "./ui-kit/typography-demo";
+import { ColorsDemo } from "./ui-kit/colors-demo";
+import { IconsDemo } from "./ui-kit/icons-demo";
+import { LayoutsDemo } from "./ui-kit/layouts-demo";
+import { NavigationDemo } from "./ui-kit/navigation-demo";
+import { SpecializedDemo } from "./ui-kit/specialized-demo";
+import { AnimationsDemo } from "./ui-kit/animations-demo";
+import { StatesDemo } from "./ui-kit/states-demo";
+import { MediaDemo } from "./ui-kit/media-demo";
+import { InteractiveDemo } from "./ui-kit/interactive-demo";
+import { BusinessDemo } from "./ui-kit/business-demo";
+import { TimesheetDemo } from "./ui-kit/timesheet-demo";
+import { FulfillmentWarehouseDemo } from "./ui-kit/fulfillment-warehouse-demo";
 
 export function UIKitSection() {
   return (
     <div className="p-8">
       <div className="mb-8">
         <h1 className="text-3xl font-bold text-white mb-2">UI Kit</h1>
-        <p className="text-white/70">Полная коллекция компонентов дизайн-системы SferaV</p>
+        <p className="text-white/70">
+          Полная коллекция компонентов дизайн-системы SferaV
+        </p>
       </div>
 
       <Tabs defaultValue="buttons" className="w-full">
         <TabsList className="flex flex-wrap gap-1 bg-white/5 backdrop-blur border-white/10 p-2 rounded-lg mb-8 h-auto">
-          <TabsTrigger value="buttons" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
+          <TabsTrigger
+            value="buttons"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
             Кнопки
           </TabsTrigger>
-          <TabsTrigger value="forms" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
+          <TabsTrigger
+            value="forms"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
             Формы
           </TabsTrigger>
-          <TabsTrigger value="cards" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
+          <TabsTrigger
+            value="cards"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
             Карточки
           </TabsTrigger>
-          <TabsTrigger value="typography" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
+          <TabsTrigger
+            value="typography"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
             Типографика
           </TabsTrigger>
-          <TabsTrigger value="colors" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
+          <TabsTrigger
+            value="colors"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
             Цвета
           </TabsTrigger>
-          <TabsTrigger value="icons" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
+          <TabsTrigger
+            value="icons"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
             Иконки
           </TabsTrigger>
-          <TabsTrigger value="layouts" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
+          <TabsTrigger
+            value="layouts"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
             Макеты
           </TabsTrigger>
-          <TabsTrigger value="navigation" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
+          <TabsTrigger
+            value="navigation"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
             Навигация
           </TabsTrigger>
-          <TabsTrigger value="specialized" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
+          <TabsTrigger
+            value="specialized"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
             Специальные
           </TabsTrigger>
-          <TabsTrigger value="animations" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
+          <TabsTrigger
+            value="animations"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
             Анимации
           </TabsTrigger>
-          <TabsTrigger value="states" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
+          <TabsTrigger
+            value="states"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
             Состояния
           </TabsTrigger>
-          <TabsTrigger value="media" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
+          <TabsTrigger
+            value="media"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
             Медиа
           </TabsTrigger>
-          <TabsTrigger value="interactive" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
+          <TabsTrigger
+            value="interactive"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
             Интерактив
           </TabsTrigger>
-          <TabsTrigger value="business" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
+          <TabsTrigger
+            value="business"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
             Бизнес
           </TabsTrigger>
-          <TabsTrigger value="timesheet" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
+          <TabsTrigger
+            value="timesheet"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
             Табель
           </TabsTrigger>
+          <TabsTrigger
+            value="fulfillment-warehouse"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
+          >
+            Склад фулфилмент
+          </TabsTrigger>
         </TabsList>
 
         <TabsContent value="buttons" className="space-y-6">
@@ -134,7 +187,11 @@ export function UIKitSection() {
         <TabsContent value="timesheet" className="space-y-6">
           <TimesheetDemo />
         </TabsContent>
+
+        <TabsContent value="fulfillment-warehouse" className="space-y-6">
+          <FulfillmentWarehouseDemo />
+        </TabsContent>
       </Tabs>
     </div>
-  )
-} 
+  );
+}