From 939a8b1321fdae064f1600a2d8d35a22db278fe5 Mon Sep 17 00:00:00 2001 From: Veronika Smirnova Date: Mon, 21 Jul 2025 23:03:16 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D1=8B=20=D0=BD=D0=BE=D0=B2=D1=8B=D0=B5=20=D0=B3=D1=80?= =?UTF-8?q?=D0=B0=D0=B4=D0=B8=D0=B5=D0=BD=D1=82=D1=8B=20=D0=B2=20=D0=B3?= =?UTF-8?q?=D0=BB=D0=BE=D0=B1=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B=D0=B5=20=D1=81?= =?UTF-8?q?=D1=82=D0=B8=D0=BB=D0=B8=20=D0=B8=20=D0=BE=D0=B1=D0=BD=D0=BE?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=B4=D0=B5=D0=BC=D0=BE=D0=BD?= =?UTF-8?q?=D1=81=D1=82=D1=80=D0=B0=D1=86=D0=B8=D0=BE=D0=BD=D0=BD=D1=8B?= =?UTF-8?q?=D0=B5=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=D1=8B=20=D0=B4=D0=BB=D1=8F=20=D0=B8=D1=85=20=D0=BE=D1=82=D0=BE?= =?UTF-8?q?=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F.=20=D0=92?= =?UTF-8?q?=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D0=B3=D1=80=D0=B0?= =?UTF-8?q?=D0=B4=D0=B8=D0=B5=D0=BD=D1=82=D1=8B=20"=D0=B7=D0=B0=D0=BA?= =?UTF-8?q?=D0=B0=D1=82",=20"=D0=BE=D0=BA=D0=B5=D0=B0=D0=BD",=20"=D0=B8?= =?UTF-8?q?=D0=B7=D1=83=D0=BC=D1=80=D1=83=D0=B4",=20"=D0=BA=D0=BE=D1=81?= =?UTF-8?q?=D0=BC=D0=B8=D1=87=D0=B5=D1=81=D0=BA=D0=B8=D0=B9",=20"=D0=BE?= =?UTF-8?q?=D0=B3=D0=BD=D0=B5=D0=BD=D0=BD=D1=8B=D0=B9",=20"=D1=81=D0=B5?= =?UTF-8?q?=D0=B2=D0=B5=D1=80=D0=BD=D0=BE=D0=B5=20=D1=81=D0=B8=D1=8F=D0=BD?= =?UTF-8?q?=D0=B8=D0=B5"=20=D0=B8=20=D0=B4=D1=80=D1=83=D0=B3=D0=B8=D0=B5.?= =?UTF-8?q?=20=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20?= =?UTF-8?q?=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D1=84=D0=B5=D0=B9=D1=81=D1=8B=20?= =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D0=B4=D0=B5=D0=BC=D0=BE=D0=BD=D1=81=D1=82?= =?UTF-8?q?=D1=80=D0=B0=D1=86=D0=B8=D0=B8=20=D0=BD=D0=BE=D0=B2=D1=8B=D1=85?= =?UTF-8?q?=20=D0=B3=D1=80=D0=B0=D0=B4=D0=B8=D0=B5=D0=BD=D1=82=D0=BE=D0=B2?= =?UTF-8?q?=20=D0=B2=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD?= =?UTF-8?q?=D1=82=D0=B0=D1=85=20ColorsDemo=20=D0=B8=20NavigationDemo,=20?= =?UTF-8?q?=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD=D0=B0=20=D1=87=D0=B8?= =?UTF-8?q?=D1=82=D0=B0=D0=B5=D0=BC=D0=BE=D1=81=D1=82=D1=8C=20=D0=BA=D0=BE?= =?UTF-8?q?=D0=B4=D0=B0.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/globals.css | 174 +++ src/components/admin/ui-kit/colors-demo.tsx | 144 ++ src/components/admin/ui-kit/layouts-demo.tsx | 1276 ++++++++++++++++- .../admin/ui-kit/navigation-demo.tsx | 629 +++++++- 4 files changed, 2118 insertions(+), 105 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 759c9ba..4a3743d 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -177,6 +177,180 @@ oklch(0.15 0.12 330) 100%); } + .gradient-sunset { + background: linear-gradient(135deg, + oklch(0.75 0.25 45) 0%, + oklch(0.70 0.28 25) 30%, + oklch(0.68 0.30 355) 70%, + oklch(0.65 0.32 320) 100%); + } + + .gradient-ocean { + background: linear-gradient(135deg, + oklch(0.65 0.22 220) 0%, + oklch(0.68 0.25 200) 30%, + oklch(0.70 0.28 180) 70%, + oklch(0.72 0.30 160) 100%); + } + + .gradient-emerald { + background: linear-gradient(135deg, + oklch(0.70 0.28 150) 0%, + oklch(0.72 0.30 140) 30%, + oklch(0.68 0.25 160) 70%, + oklch(0.65 0.22 170) 100%); + } + + .gradient-cosmic { + background: linear-gradient(135deg, + oklch(0.45 0.35 270) 0%, + oklch(0.55 0.40 300) 25%, + oklch(0.65 0.30 330) 50%, + oklch(0.50 0.35 250) 75%, + oklch(0.40 0.30 280) 100%); + } + + .gradient-fire { + background: linear-gradient(135deg, + oklch(0.70 0.35 40) 0%, + oklch(0.75 0.40 20) 30%, + oklch(0.80 0.35 10) 60%, + oklch(0.65 0.30 50) 100%); + } + + .gradient-aurora { + background: linear-gradient(135deg, + oklch(0.60 0.25 180) 0%, + oklch(0.70 0.30 160) 20%, + oklch(0.75 0.35 140) 40%, + oklch(0.65 0.28 200) 60%, + oklch(0.55 0.32 220) 80%, + oklch(0.60 0.25 180) 100%); + } + + /* Кастомные варианты на основе космического градиента */ + .gradient-corporate { + background: linear-gradient(135deg, + oklch(0.25 0.15 240) 0%, + oklch(0.30 0.18 220) 30%, + oklch(0.35 0.20 200) 70%, + oklch(0.28 0.16 260) 100%); + } + + .gradient-nebula { + background: linear-gradient(135deg, + oklch(0.20 0.40 290) 0%, + oklch(0.35 0.45 310) 20%, + oklch(0.50 0.35 330) 40%, + oklch(0.40 0.40 270) 60%, + oklch(0.25 0.38 250) 80%, + oklch(0.15 0.35 280) 100%); + } + + .gradient-galaxy { + background: linear-gradient(135deg, + oklch(0.15 0.25 270) 0%, + oklch(0.25 0.30 300) 15%, + oklch(0.45 0.35 320) 30%, + oklch(0.20 0.28 250) 45%, + oklch(0.35 0.32 280) 60%, + oklch(0.10 0.20 290) 75%, + oklch(0.18 0.25 260) 100%); + } + + .gradient-starfield { + background: linear-gradient(135deg, + oklch(0.08 0.15 270) 0%, + oklch(0.12 0.20 290) 25%, + oklch(0.20 0.25 310) 50%, + oklch(0.15 0.18 250) 75%, + oklch(0.05 0.12 280) 100%); + } + + .gradient-quantum { + background: linear-gradient(135deg, + oklch(0.40 0.38 280) 0%, + oklch(0.55 0.42 260) 20%, + oklch(0.70 0.35 240) 40%, + oklch(0.45 0.40 300) 60%, + oklch(0.30 0.35 320) 80%, + oklch(0.50 0.38 270) 100%); + } + + .gradient-void { + background: linear-gradient(135deg, + oklch(0.05 0.08 270) 0%, + oklch(0.08 0.12 290) 30%, + oklch(0.12 0.15 250) 60%, + oklch(0.06 0.10 310) 100%); + } + + .gradient-supernova { + background: linear-gradient(135deg, + oklch(0.65 0.40 280) 0%, + oklch(0.80 0.35 260) 20%, + oklch(0.75 0.45 300) 40%, + oklch(0.85 0.38 240) 60%, + oklch(0.60 0.42 320) 80%, + oklch(0.70 0.40 270) 100%); + } + + /* Утонченные варианты с акцентами */ + .gradient-corporate-accent { + background: linear-gradient(135deg, + oklch(0.25 0.08 240) 0%, + oklch(0.28 0.10 220) 100%); + } + + .gradient-nebula-accent { + background: linear-gradient(135deg, + oklch(0.30 0.20 290) 0%, + oklch(0.35 0.25 310) 100%); + } + + .gradient-galaxy-accent { + background: linear-gradient(135deg, + oklch(0.25 0.15 270) 0%, + oklch(0.30 0.18 300) 50%, + oklch(0.28 0.16 250) 100%); + } + + .gradient-starfield-accent { + background: linear-gradient(135deg, + oklch(0.15 0.08 270) 0%, + oklch(0.18 0.12 290) 100%); + } + + .gradient-quantum-accent { + background: linear-gradient(135deg, + oklch(0.35 0.20 280) 0%, + oklch(0.40 0.25 260) 100%); + } + + .gradient-void-accent { + background: linear-gradient(135deg, + oklch(0.12 0.05 270) 0%, + oklch(0.15 0.08 290) 100%); + } + + .gradient-supernova-accent { + background: linear-gradient(135deg, + oklch(0.45 0.25 280) 0%, + oklch(0.50 0.30 260) 100%); + } + + /* Восхитительный премиум градиент */ + .gradient-ethereal { + background: linear-gradient(135deg, + oklch(0.15 0.08 270) 0%, + oklch(0.20 0.12 290) 15%, + oklch(0.25 0.15 310) 30%, + oklch(0.18 0.10 250) 45%, + oklch(0.22 0.14 330) 60%, + oklch(0.16 0.09 280) 75%, + oklch(0.12 0.06 260) 100%); + } + .text-gradient-bright { background: linear-gradient(135deg, oklch(0.85 0.35 315) 0%, diff --git a/src/components/admin/ui-kit/colors-demo.tsx b/src/components/admin/ui-kit/colors-demo.tsx index f4ea222..1c7a1fd 100644 --- a/src/components/admin/ui-kit/colors-demo.tsx +++ b/src/components/admin/ui-kit/colors-demo.tsx @@ -206,6 +206,150 @@ export function ColorsDemo() {
bg-gradient-smooth
Темный градиент для фона
+ +
+
+
gradient-sunset
+
Закатный оранжево-розовый градиент
+
+ +
+
+
gradient-ocean
+
Океанический сине-бирюзовый градиент
+
+ +
+
+
gradient-emerald
+
Изумрудно-зеленый градиент
+
+ + + + {/* Новые креативные градиенты */} +
+

Креативные градиенты

+
+
+
+
gradient-cosmic
+
Космический фиолетово-синий градиент
+
+ +
+
+
gradient-fire
+
Огненный красно-оранжевый градиент
+
+ +
+
+
gradient-aurora
+
Северное сияние - многоцветный градиент
+
+
+
+ + {/* Космические кастомные градиенты */} +
+

Космические кастомные градиенты

+
+
+
+
gradient-corporate
+
Корпоративный космос - строгий деловой стиль
+
+ +
+
+
gradient-nebula
+
Туманность - яркие космические цвета
+
+ +
+
+
gradient-galaxy
+
Галактика - сложный многоцветный переход
+
+ +
+
+
gradient-starfield
+
Звездное поле - темный минималистичный
+
+ +
+
+
gradient-quantum
+
Квантовый - энергичный научный стиль
+
+ +
+
+
gradient-void
+
Пустота - ультра-темный космос
+
+ +
+
+
gradient-supernova
+
Сверхновая - яркий взрывной градиент
+
+
+
+ + {/* Утонченные космические акценты */} +
+

Утонченные космические акценты

+
+
+
+
gradient-corporate-accent
+
Сдержанный корпоративный акцент
+
+ +
+
+
gradient-nebula-accent
+
Мягкий туманный акцент
+
+ +
+
+
gradient-galaxy-accent
+
Элегантный галактический акцент
+
+ +
+
+
gradient-starfield-accent
+
Тонкий звездный акцент
+
+ +
+
+
gradient-quantum-accent
+
Умеренный квантовый акцент
+
+ +
+
+
gradient-void-accent
+
Глубокий пустотный акцент
+
+ +
+
+
gradient-supernova-accent
+
Приглушенный взрывной акцент
+
+ +
+
+
gradient-ethereal
+
Восхитительный эфирный градиент
+
diff --git a/src/components/admin/ui-kit/layouts-demo.tsx b/src/components/admin/ui-kit/layouts-demo.tsx index e3337aa..b724faf 100644 --- a/src/components/admin/ui-kit/layouts-demo.tsx +++ b/src/components/admin/ui-kit/layouts-demo.tsx @@ -1,13 +1,13 @@ -"use client" +"use client"; -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' -import { Badge } from '@/components/ui/badge' -import { Button } from '@/components/ui/button' -import { Avatar, AvatarFallback } from '@/components/ui/avatar' -import { - Layout, - Sidebar as SidebarIcon, - Monitor, +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { Avatar, AvatarFallback } from "@/components/ui/avatar"; +import { + Layout, + Sidebar as SidebarIcon, + Monitor, Smartphone, Menu, ChevronRight, @@ -16,8 +16,8 @@ import { Users, MessageCircle, Building, - Plus -} from 'lucide-react' + Plus, +} from "lucide-react"; export function LayoutsDemo() { return ( @@ -30,7 +30,9 @@ export function LayoutsDemo() { {/* Sidebar Layout */}
-

Sidebar Layout

+

+ Sidebar Layout +

{/* Sidebar */} @@ -66,7 +68,9 @@ export function LayoutsDemo() { {/* Full Sidebar Layout */}
-

Full Sidebar Layout

+

+ Full Sidebar Layout +

{/* Full Sidebar */} @@ -113,7 +117,9 @@ export function LayoutsDemo() { {/* Grid Layout */}
-

Grid Layout

+

+ Grid Layout +

@@ -133,7 +139,9 @@ export function LayoutsDemo() { {/* Split Layout */}
-

Split Layout (Мессенджер)

+

+ Split Layout (Мессенджер) +

{/* Left Panel */} @@ -141,7 +149,10 @@ export function LayoutsDemo() {
{[1, 2, 3, 4].map((item) => ( -
+
@@ -188,8 +199,12 @@ export function LayoutsDemo() { {/* Left Side - Branding */}
-
SferaV
-
Управление бизнесом
+
+ SferaV +
+
+ Управление бизнесом +
🚚 Фулфилмент @@ -239,10 +254,14 @@ export function LayoutsDemo() {
-
Sidebar
+
+ Sidebar +
-
Main Content
+
+ Main Content +
@@ -297,25 +316,41 @@ export function LayoutsDemo() { {/* Mini Sidebar */}
-

Mini Sidebar

+

+ Mini Sidebar +

- SF + + SF +
- - -
@@ -328,41 +363,62 @@ export function LayoutsDemo() { {/* Full Sidebar */}
-

Full Sidebar

+

+ Full Sidebar +

{/* Profile */}
- SF + + SF +
-
SferaV Inc
- +
+ SferaV Inc +
+ Фулфилмент
- + {/* Navigation */}
- - - - @@ -376,6 +432,1134 @@ export function LayoutsDemo() { + {/* Новые градиентные сайдбары */} + + + Градиентные сайдбары + + + {/* Cosmic Gradient Sidebar */} +
+

+ Космический градиент +

+
+
+ {/* Profile */} +
+ + + CS + + +
+
+ Cosmic Space +
+ + Космос + +
+
+ + {/* Navigation */} +
+ + + + +
+
+
+ gradient-cosmic с космической темой +
+
+
+ + {/* Fire Gradient Sidebar */} +
+

+ Огненный градиент +

+
+
+ {/* Profile */} +
+ + + FR + + +
+
+ Fire Studio +
+ + Креатив + +
+
+ + {/* Navigation */} +
+ + + + +
+
+
+ gradient-fire с огненной энергией +
+
+
+ + {/* Aurora Gradient Sidebar */} +
+

+ Северное сияние +

+
+
+ {/* Profile */} +
+ + + AR + + +
+
+ Aurora Labs +
+ + Инновации + +
+
+ + {/* Navigation */} +
+ + + + +
+
+
+ gradient-aurora с многоцветным сиянием +
+
+
+ + {/* Ocean Gradient Sidebar */} +
+

+ Океанический градиент +

+
+
+ {/* Profile */} +
+ + + OC + + +
+
+ Ocean Deep +
+ + Морской + +
+
+ + {/* Navigation */} +
+ + + + +
+
+
+ gradient-ocean с морской глубиной +
+
+
+ + {/* Emerald Gradient Sidebar */} +
+

+ Изумрудный градиент +

+
+
+ {/* Profile */} +
+ + + EM + + +
+
+ Emerald Tech +
+ + Эко + +
+
+ + {/* Navigation */} +
+ + + + +
+
+
+ gradient-emerald с природной энергией +
+
+
+ + {/* Sunset Gradient Sidebar */} +
+

+ Закатный градиент +

+
+
+ {/* Profile */} +
+ + + SN + + +
+
+ Sunset Co +
+ + Дизайн + +
+
+ + {/* Navigation */} +
+ + + + +
+
+
+ gradient-sunset с теплым закатом +
+
+
+ + + + {/* Кастомные космические сайдбары */} + + + Кастомные космические сайдбары + + + {/* Corporate Gradient Sidebar */} +
+

+ Корпоративный космос +

+
+
+ {/* Profile */} +
+ + + CP + + +
+
+ Corporate Space Ltd +
+ + Бизнес + +
+
+ + {/* Navigation */} +
+ + + + +
+
+
+ gradient-corporate - строгий деловой стиль +
+
+
+ + {/* Nebula Gradient Sidebar */} +
+

+ Туманность +

+
+
+ {/* Profile */} +
+ + + NB + + +
+
+ Nebula Creative +
+ + Креатив + +
+
+ + {/* Navigation */} +
+ + + + +
+
+
+ gradient-nebula - яркие космические цвета +
+
+
+ + {/* Galaxy Gradient Sidebar */} +
+

+ Галактика +

+
+
+ {/* Profile */} +
+ + + GX + + +
+
+ Galaxy Explorer +
+ + Исследования + +
+
+ + {/* Navigation */} +
+ + + + +
+
+
+ gradient-galaxy - сложный многоцветный переход +
+
+
+ + {/* Starfield Gradient Sidebar */} +
+

+ Звездное поле +

+
+
+ {/* Profile */} +
+ + + SF + + +
+
+ Starfield Observatory +
+ + Наблюдения + +
+
+ + {/* Navigation */} +
+ + + + +
+
+
+ gradient-starfield - темный минималистичный +
+
+
+ + {/* Quantum Gradient Sidebar */} +
+

+ Квантовый +

+
+
+ {/* Profile */} +
+ + + QM + + +
+
+ Quantum Mechanics Lab +
+ + Наука + +
+
+ + {/* Navigation */} +
+ + + + +
+
+
+ gradient-quantum - энергичный научный стиль +
+
+
+ + {/* Void Gradient Sidebar */} +
+

+ Пустота +

+
+
+ {/* Profile */} +
+ + + VD + + +
+
+ Void Walker +
+ + Минимализм + +
+
+ + {/* Navigation */} +
+ + + + +
+
+
+ gradient-void - ультра-темный космос +
+
+
+ + {/* Supernova Gradient Sidebar */} +
+

+ Сверхновая +

+
+
+ {/* Profile */} +
+ + + SN + + +
+
+ Supernova Studios +
+ + Энергия + +
+
+ + {/* Navigation */} +
+ + + + +
+
+
+ gradient-supernova - яркий взрывной градиент +
+
+
+ + + + {/* Утонченные космические сайдбары с акцентами */} + + + Утонченные космические сайдбары + + + {/* Corporate Refined Sidebar */} +
+

+ Корпоративный утонченный +

+
+
+ {/* Profile with accent */} +
+
+ + + CP + + +
+
+
+
+ Corporate Elite +
+ + Премиум + +
+
+ + {/* Navigation with subtle accents */} +
+ + + + +
+
+
+ Утонченный корпоративный с акцентами +
+
+
+ + {/* Nebula Refined Sidebar */} +
+

+ Туманность утонченная +

+
+
+ {/* Profile with nebula accent */} +
+
+ + + NB + + +
+
+
+
+ Nebula Refined +
+ + Креатив + +
+
+ + {/* Navigation with glow effects */} +
+ + + + +
+
+
+ Мягкие акценты с точечными индикаторами +
+
+
+ + {/* Galaxy Refined Sidebar */} +
+

+ Галактика элегантная +

+
+
+ {/* Profile with gradient border */} +
+
+ + + GX + + +
+
+ Galaxy Elegant +
+ + Исследования + +
+
+ + {/* Navigation with underline accents */} +
+ + + + +
+
+
+ Элегантные подчеркивания и границы +
+
+
+ + {/* Ethereal Premium Sidebar */} +
+

+ Восхитительный эфирный ✨ +

+
+
+ {/* Subtle ethereal background */} +
+ + {/* Profile with ethereal glow */} +
+
+ + + ET + + +
+
+
+
+ Ethereal Cosmos +
+ +
+ Премиум + +
+
+ + {/* Navigation with ethereal effects */} +
+ + + + +
+ + {/* Floating particles effect */} +
+
+
+
+
+
+
+
+ Восхитительный эфирный с плавающими частицами +
+
+
+ + {/* Void Refined Sidebar */} +
+

+ Пустота минималистичная +

+
+
+ {/* Minimal profile */} +
+ + + VD + + +
+
+ Void Minimal +
+ + Минимализм + +
+
+ + {/* Ultra minimal navigation */} +
+ + + + +
+
+
+ Ультра-минималистичный с тонкими акцентами +
+
+
+ + + {/* Spacing and Structure */} @@ -384,14 +1568,22 @@ export function LayoutsDemo() { {/* Container */}
-

Container Patterns

+

+ Container Patterns +

-
p-6 (24px padding)
+
+ p-6 (24px padding) +
-
p-4 (16px padding)
+
+ p-4 (16px padding) +
-
p-2 (8px padding)
+
+ p-2 (8px padding) +
@@ -400,7 +1592,9 @@ export function LayoutsDemo() { {/* Spacing */}
-

Space Patterns

+

+ Space Patterns +

space-y-6
@@ -423,5 +1617,5 @@ export function LayoutsDemo() {
- ) -} \ No newline at end of file + ); +} diff --git a/src/components/admin/ui-kit/navigation-demo.tsx b/src/components/admin/ui-kit/navigation-demo.tsx index dd69dec..8fa91d8 100644 --- a/src/components/admin/ui-kit/navigation-demo.tsx +++ b/src/components/admin/ui-kit/navigation-demo.tsx @@ -55,7 +55,7 @@ import { Smartphone, Monitor, Tablet, - Clock + Clock, } from "lucide-react"; export function NavigationDemo() { @@ -651,6 +651,347 @@ export function NavigationDemo() {
+ + {/* Компактные градиентные сайдбары */} +
+

+ Компактные градиентные сайдбары +

+
+ {/* Cosmic Mini */} +
+
+
+ Cosmic +
+
+ + + +
+
+ + {/* Fire Mini */} +
+
+
+ Fire +
+
+ + + +
+
+ + {/* Aurora Mini */} +
+
+
+ Aurora +
+
+ + + +
+
+ + {/* Ocean Mini */} +
+
+
+ Ocean +
+
+ + + +
+
+ + {/* Emerald Mini */} +
+
+
+ Emerald +
+
+ + + +
+
+ + {/* Sunset Mini */} +
+
+
+ Sunset +
+
+ + + +
+
+
+
+ + {/* Кастомные космические мини-сайдбары */} +
+

+ Кастомные космические мини-сайдбары +

+
+ {/* Corporate Mini */} +
+
+
+ Corporate +
+
+ + + +
+
+ + {/* Nebula Mini */} +
+
+
+ Nebula +
+
+ + + +
+
+ + {/* Galaxy Mini */} +
+
+
+ Galaxy +
+
+ + + +
+
+ + {/* Starfield Mini */} +
+
+
+ Starfield +
+
+ + + +
+
+ + {/* Quantum Mini */} +
+
+
+ Quantum +
+
+ + + +
+
+ + {/* Void Mini */} +
+
+
+ Void +
+
+ + + +
+
+ + {/* Supernova Mini */} +
+
+
+ Supernova +
+
+ + + +
+
+
+
@@ -772,32 +1113,38 @@ export function NavigationDemo() { {/* Enhanced Tabs */}
-

Улучшенные табы

- +

+ Улучшенные табы +

+ - Навигация - Формы - Данные - @@ -812,17 +1159,23 @@ export function NavigationDemo() {
Навигация
-

Компоненты для навигации по приложению

+

+ Компоненты для навигации по приложению +

Сайдбары - Готово + + Готово +
Меню - В работе + + В работе +
@@ -835,7 +1188,9 @@ export function NavigationDemo() {
Формы
-

Элементы для ввода и обработки данных

+

+ Элементы для ввода и обработки данных +

@@ -848,7 +1203,9 @@ export function NavigationDemo() {
Данные
-

Компоненты для отображения данных

+

+ Компоненты для отображения данных +

@@ -861,7 +1218,9 @@ export function NavigationDemo() {
Настройки
-

Элементы управления настройками

+

+ Элементы управления настройками +

@@ -871,18 +1230,30 @@ export function NavigationDemo() { {/* Pill Tabs */}
-

Табы-пилюли

+

+ Табы-пилюли +

- - @@ -891,17 +1262,27 @@ export function NavigationDemo() { {/* Segmented Control */}
-

Сегментированный контрол

+

+ Сегментированный контрол +

- - @@ -910,25 +1291,39 @@ export function NavigationDemo() { {/* Vertical Tabs */}
-

Вертикальные табы

+

+ Вертикальные табы +

- - - -
-
Главная панель
-

Обзор системы и быстрый доступ к функциям

+
+ Главная панель +
+

+ Обзор системы и быстрый доступ к функциям +

-
2,847
-
Всего пользователей
+
+ 2,847 +
+
+ Всего пользователей +
-
156
+
+ 156 +
Активных сессий
@@ -1308,23 +1713,34 @@ export function NavigationDemo() { {/* Enhanced Breadcrumbs */}
-

Улучшенные breadcrumbs

+

+ Улучшенные breadcrumbs +

@@ -1340,7 +1758,9 @@ export function NavigationDemo() { {/* Interactive Breadcrumbs */}
-

Интерактивные breadcrumbs

+

+ Интерактивные breadcrumbs +

- + 234 товара - + Обновлено 2ч назад
@@ -1384,13 +1816,17 @@ export function NavigationDemo() { {/* Enhanced Pagination */}
-

Улучшенная пагинация

+

+ Улучшенная пагинация +

- Показано 1-25 из{' '} - 1,247 записей + Показано{" "} + 1-25 из{" "} + 1,247{" "} + записей
Показать: @@ -1405,12 +1841,38 @@ export function NavigationDemo() { Пред
- - - + + + ... - - + +
- - + + +
из 24
@@ -1447,7 +1929,9 @@ export function NavigationDemo() { {/* Load More Pattern */}
-

Паттерн "Загрузить еще"

+

+ Паттерн "Загрузить еще" +

@@ -1472,7 +1956,9 @@ export function NavigationDemo() { {/* Advanced Filter Bar */}
-

Расширенная панель фильтров

+

+ Расширенная панель фильтров +

@@ -1498,7 +1984,7 @@ export function NavigationDemo() {
- @@ -1509,19 +1995,32 @@ export function NavigationDemo() {
- + Электроника - + В наличии - + Сегодня -
@@ -1530,7 +2029,9 @@ export function NavigationDemo() { {/* Quick Filters */}
-

Быстрые фильтры

+

+ Быстрые фильтры +