231 lines
8.3 KiB
TypeScript
231 lines
8.3 KiB
TypeScript
"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 { FulfillmentWarehouseDemo } from "./ui-kit/fulfillment-warehouse-demo";
|
||
import { SuppliesDemo } from "./ui-kit/supplies-demo";
|
||
import { WBWarehouseDemo } from "./ui-kit/wb-warehouse-demo";
|
||
import { SuppliesNavigationDemo } from "./ui-kit/supplies-navigation-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>
|
||
</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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<TabsTrigger
|
||
value="supplies"
|
||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
|
||
>
|
||
Поставки
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="wb-warehouse"
|
||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2"
|
||
>
|
||
Склад WB
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="supplies-navigation"
|
||
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">
|
||
<ButtonsDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="forms" className="space-y-6">
|
||
<FormsDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="cards" className="space-y-6">
|
||
<CardsDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="typography" className="space-y-6">
|
||
<TypographyDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="colors" className="space-y-6">
|
||
<ColorsDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="icons" className="space-y-6">
|
||
<IconsDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="layouts" className="space-y-6">
|
||
<LayoutsDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="navigation" className="space-y-6">
|
||
<NavigationDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="specialized" className="space-y-6">
|
||
<SpecializedDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="animations" className="space-y-6">
|
||
<AnimationsDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="states" className="space-y-6">
|
||
<StatesDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="media" className="space-y-6">
|
||
<MediaDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="interactive" className="space-y-6">
|
||
<InteractiveDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="business" className="space-y-6">
|
||
<BusinessDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="timesheet" className="space-y-6">
|
||
<TimesheetDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="fulfillment-warehouse" className="space-y-6">
|
||
<FulfillmentWarehouseDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="supplies" className="space-y-6">
|
||
<SuppliesDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="wb-warehouse" className="space-y-6">
|
||
<WBWarehouseDemo />
|
||
</TabsContent>
|
||
|
||
<TabsContent value="supplies-navigation" className="space-y-6">
|
||
<SuppliesNavigationDemo />
|
||
</TabsContent>
|
||
</Tabs>
|
||
</div>
|
||
);
|
||
}
|