Добавлены новые градиенты в глобальные стили и обновлены демонстрационные компоненты для их отображения. Включены градиенты "закат", "океан", "изумруд", "космический", "огненный", "северное сияние" и другие. Обновлены интерфейсы для демонстрации новых градиентов в компонентах ColorsDemo и NavigationDemo, улучшена читаемость кода.
This commit is contained in:
Veronika Smirnova
@ -177,6 +177,180 @@
|
|||||||
oklch(0.15 0.12 330) 100%);
|
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 {
|
.text-gradient-bright {
|
||||||
background: linear-gradient(135deg,
|
background: linear-gradient(135deg,
|
||||||
oklch(0.85 0.35 315) 0%,
|
oklch(0.85 0.35 315) 0%,
|
||||||
|
|||||||
@ -206,6 +206,150 @@ export function ColorsDemo() {
|
|||||||
<div className="text-white text-xs font-mono">bg-gradient-smooth</div>
|
<div className="text-white text-xs font-mono">bg-gradient-smooth</div>
|
||||||
<div className="text-white/60 text-xs">Темный градиент для фона</div>
|
<div className="text-white/60 text-xs">Темный градиент для фона</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-sunset rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-sunset</div>
|
||||||
|
<div className="text-white/60 text-xs">Закатный оранжево-розовый градиент</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-ocean rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-ocean</div>
|
||||||
|
<div className="text-white/60 text-xs">Океанический сине-бирюзовый градиент</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-emerald rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-emerald</div>
|
||||||
|
<div className="text-white/60 text-xs">Изумрудно-зеленый градиент</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Новые креативные градиенты */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-4">Креативные градиенты</h4>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-cosmic rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-cosmic</div>
|
||||||
|
<div className="text-white/60 text-xs">Космический фиолетово-синий градиент</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-fire rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-fire</div>
|
||||||
|
<div className="text-white/60 text-xs">Огненный красно-оранжевый градиент</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-aurora rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-aurora</div>
|
||||||
|
<div className="text-white/60 text-xs">Северное сияние - многоцветный градиент</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Космические кастомные градиенты */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-4">Космические кастомные градиенты</h4>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-corporate rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-corporate</div>
|
||||||
|
<div className="text-white/60 text-xs">Корпоративный космос - строгий деловой стиль</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-nebula rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-nebula</div>
|
||||||
|
<div className="text-white/60 text-xs">Туманность - яркие космические цвета</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-galaxy rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-galaxy</div>
|
||||||
|
<div className="text-white/60 text-xs">Галактика - сложный многоцветный переход</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-starfield rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-starfield</div>
|
||||||
|
<div className="text-white/60 text-xs">Звездное поле - темный минималистичный</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-quantum rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-quantum</div>
|
||||||
|
<div className="text-white/60 text-xs">Квантовый - энергичный научный стиль</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-void rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-void</div>
|
||||||
|
<div className="text-white/60 text-xs">Пустота - ультра-темный космос</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-supernova rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-supernova</div>
|
||||||
|
<div className="text-white/60 text-xs">Сверхновая - яркий взрывной градиент</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Утонченные космические акценты */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-4">Утонченные космические акценты</h4>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-corporate-accent rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-corporate-accent</div>
|
||||||
|
<div className="text-white/60 text-xs">Сдержанный корпоративный акцент</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-nebula-accent rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-nebula-accent</div>
|
||||||
|
<div className="text-white/60 text-xs">Мягкий туманный акцент</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-galaxy-accent rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-galaxy-accent</div>
|
||||||
|
<div className="text-white/60 text-xs">Элегантный галактический акцент</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-starfield-accent rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-starfield-accent</div>
|
||||||
|
<div className="text-white/60 text-xs">Тонкий звездный акцент</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-quantum-accent rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-quantum-accent</div>
|
||||||
|
<div className="text-white/60 text-xs">Умеренный квантовый акцент</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-void-accent rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-void-accent</div>
|
||||||
|
<div className="text-white/60 text-xs">Глубокий пустотный акцент</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-supernova-accent rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-supernova-accent</div>
|
||||||
|
<div className="text-white/60 text-xs">Приглушенный взрывной акцент</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="h-16 w-full gradient-ethereal rounded-lg mb-2"></div>
|
||||||
|
<div className="text-white text-xs font-mono">gradient-ethereal</div>
|
||||||
|
<div className="text-white/60 text-xs">Восхитительный эфирный градиент</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
"use client"
|
"use client";
|
||||||
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
import { Badge } from '@/components/ui/badge'
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from "@/components/ui/button";
|
||||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||||
import {
|
import {
|
||||||
Layout,
|
Layout,
|
||||||
Sidebar as SidebarIcon,
|
Sidebar as SidebarIcon,
|
||||||
@ -16,8 +16,8 @@ import {
|
|||||||
Users,
|
Users,
|
||||||
MessageCircle,
|
MessageCircle,
|
||||||
Building,
|
Building,
|
||||||
Plus
|
Plus,
|
||||||
} from 'lucide-react'
|
} from "lucide-react";
|
||||||
|
|
||||||
export function LayoutsDemo() {
|
export function LayoutsDemo() {
|
||||||
return (
|
return (
|
||||||
@ -30,7 +30,9 @@ export function LayoutsDemo() {
|
|||||||
<CardContent className="space-y-6">
|
<CardContent className="space-y-6">
|
||||||
{/* Sidebar Layout */}
|
{/* Sidebar Layout */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Sidebar Layout</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Sidebar Layout
|
||||||
|
</h4>
|
||||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
<div className="h-40 bg-white/5 rounded-lg border border-white/10 flex">
|
<div className="h-40 bg-white/5 rounded-lg border border-white/10 flex">
|
||||||
{/* Sidebar */}
|
{/* Sidebar */}
|
||||||
@ -66,7 +68,9 @@ export function LayoutsDemo() {
|
|||||||
|
|
||||||
{/* Full Sidebar Layout */}
|
{/* Full Sidebar Layout */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Full Sidebar Layout</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Full Sidebar Layout
|
||||||
|
</h4>
|
||||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
<div className="h-40 bg-white/5 rounded-lg border border-white/10 flex">
|
<div className="h-40 bg-white/5 rounded-lg border border-white/10 flex">
|
||||||
{/* Full Sidebar */}
|
{/* Full Sidebar */}
|
||||||
@ -113,7 +117,9 @@ export function LayoutsDemo() {
|
|||||||
|
|
||||||
{/* Grid Layout */}
|
{/* Grid Layout */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Grid Layout</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Grid Layout
|
||||||
|
</h4>
|
||||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
<div className="h-32 bg-white/5 rounded-lg border border-white/10 p-3">
|
<div className="h-32 bg-white/5 rounded-lg border border-white/10 p-3">
|
||||||
<div className="grid grid-cols-3 gap-2 h-full">
|
<div className="grid grid-cols-3 gap-2 h-full">
|
||||||
@ -133,7 +139,9 @@ export function LayoutsDemo() {
|
|||||||
|
|
||||||
{/* Split Layout */}
|
{/* Split Layout */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Split Layout (Мессенджер)</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Split Layout (Мессенджер)
|
||||||
|
</h4>
|
||||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
<div className="h-40 bg-white/5 rounded-lg border border-white/10 flex">
|
<div className="h-40 bg-white/5 rounded-lg border border-white/10 flex">
|
||||||
{/* Left Panel */}
|
{/* Left Panel */}
|
||||||
@ -141,7 +149,10 @@ export function LayoutsDemo() {
|
|||||||
<div className="h-3 bg-white/30 rounded mb-3"></div>
|
<div className="h-3 bg-white/30 rounded mb-3"></div>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{[1, 2, 3, 4].map((item) => (
|
{[1, 2, 3, 4].map((item) => (
|
||||||
<div key={item} className="flex items-center space-x-2 p-2 bg-white/5 rounded">
|
<div
|
||||||
|
key={item}
|
||||||
|
className="flex items-center space-x-2 p-2 bg-white/5 rounded"
|
||||||
|
>
|
||||||
<div className="w-8 h-8 bg-primary/30 rounded-full"></div>
|
<div className="w-8 h-8 bg-primary/30 rounded-full"></div>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<div className="h-2 bg-white/30 rounded mb-1"></div>
|
<div className="h-2 bg-white/30 rounded mb-1"></div>
|
||||||
@ -188,8 +199,12 @@ export function LayoutsDemo() {
|
|||||||
{/* Left Side - Branding */}
|
{/* Left Side - Branding */}
|
||||||
<div className="w-1/2 p-6 flex flex-col justify-center">
|
<div className="w-1/2 p-6 flex flex-col justify-center">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="text-2xl font-bold text-gradient-bright mb-2">SferaV</div>
|
<div className="text-2xl font-bold text-gradient-bright mb-2">
|
||||||
<div className="text-white/70 text-sm mb-4">Управление бизнесом</div>
|
SferaV
|
||||||
|
</div>
|
||||||
|
<div className="text-white/70 text-sm mb-4">
|
||||||
|
Управление бизнесом
|
||||||
|
</div>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="bg-white/10 rounded p-2 text-xs text-white/70">
|
<div className="bg-white/10 rounded p-2 text-xs text-white/70">
|
||||||
🚚 Фулфилмент
|
🚚 Фулфилмент
|
||||||
@ -239,10 +254,14 @@ export function LayoutsDemo() {
|
|||||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
<div className="h-32 bg-white/5 rounded-lg border border-white/10 flex">
|
<div className="h-32 bg-white/5 rounded-lg border border-white/10 flex">
|
||||||
<div className="w-56 bg-white/10 border-r border-white/10 p-2">
|
<div className="w-56 bg-white/10 border-r border-white/10 p-2">
|
||||||
<div className="text-xs text-white/60 text-center">Sidebar</div>
|
<div className="text-xs text-white/60 text-center">
|
||||||
|
Sidebar
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 p-2">
|
<div className="flex-1 p-2">
|
||||||
<div className="text-xs text-white/60 text-center">Main Content</div>
|
<div className="text-xs text-white/60 text-center">
|
||||||
|
Main Content
|
||||||
|
</div>
|
||||||
<div className="grid grid-cols-3 gap-1 mt-2 h-20">
|
<div className="grid grid-cols-3 gap-1 mt-2 h-20">
|
||||||
<div className="bg-white/10 rounded"></div>
|
<div className="bg-white/10 rounded"></div>
|
||||||
<div className="bg-white/10 rounded"></div>
|
<div className="bg-white/10 rounded"></div>
|
||||||
@ -297,25 +316,41 @@ export function LayoutsDemo() {
|
|||||||
<CardContent className="space-y-6">
|
<CardContent className="space-y-6">
|
||||||
{/* Mini Sidebar */}
|
{/* Mini Sidebar */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Mini Sidebar</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Mini Sidebar
|
||||||
|
</h4>
|
||||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
<div className="w-16 glass-sidebar rounded-lg p-2 space-y-2">
|
<div className="w-16 glass-sidebar rounded-lg p-2 space-y-2">
|
||||||
<div className="flex items-center justify-center">
|
<div className="flex items-center justify-center">
|
||||||
<Avatar className="h-8 w-8 bg-primary/30">
|
<Avatar className="h-8 w-8 bg-primary/30">
|
||||||
<AvatarFallback className="bg-primary/30 text-white text-xs">SF</AvatarFallback>
|
<AvatarFallback className="bg-primary/30 text-white text-xs">
|
||||||
|
SF
|
||||||
|
</AvatarFallback>
|
||||||
</Avatar>
|
</Avatar>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<Button variant="glass" size="icon" className="w-12 h-10">
|
<Button variant="glass" size="icon" className="w-12 h-10">
|
||||||
<Home className="h-4 w-4" />
|
<Home className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" size="icon" className="w-12 h-10 text-white/60">
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="w-12 h-10 text-white/60"
|
||||||
|
>
|
||||||
<Users className="h-4 w-4" />
|
<Users className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" size="icon" className="w-12 h-10 text-white/60">
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="w-12 h-10 text-white/60"
|
||||||
|
>
|
||||||
<MessageCircle className="h-4 w-4" />
|
<MessageCircle className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" size="icon" className="w-12 h-10 text-white/60">
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="w-12 h-10 text-white/60"
|
||||||
|
>
|
||||||
<Settings className="h-4 w-4" />
|
<Settings className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
@ -328,17 +363,26 @@ export function LayoutsDemo() {
|
|||||||
|
|
||||||
{/* Full Sidebar */}
|
{/* Full Sidebar */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Full Sidebar</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Full Sidebar
|
||||||
|
</h4>
|
||||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
<div className="w-56 glass-sidebar rounded-lg p-4 space-y-4">
|
<div className="w-56 glass-sidebar rounded-lg p-4 space-y-4">
|
||||||
{/* Profile */}
|
{/* Profile */}
|
||||||
<div className="flex items-center space-x-3 pb-4 border-b border-white/10">
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/10">
|
||||||
<Avatar className="h-10 w-10 bg-primary/30">
|
<Avatar className="h-10 w-10 bg-primary/30">
|
||||||
<AvatarFallback className="bg-primary/30 text-white">SF</AvatarFallback>
|
<AvatarFallback className="bg-primary/30 text-white">
|
||||||
|
SF
|
||||||
|
</AvatarFallback>
|
||||||
</Avatar>
|
</Avatar>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<div className="text-white font-medium text-sm">SferaV Inc</div>
|
<div className="text-white font-medium text-sm">
|
||||||
<Badge variant="outline" className="border-primary/50 text-primary text-xs">
|
SferaV Inc
|
||||||
|
</div>
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="border-primary/50 text-primary text-xs"
|
||||||
|
>
|
||||||
Фулфилмент
|
Фулфилмент
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
@ -350,19 +394,31 @@ export function LayoutsDemo() {
|
|||||||
<Home className="h-4 w-4 mr-3" />
|
<Home className="h-4 w-4 mr-3" />
|
||||||
Главная
|
Главная
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" className="w-full justify-start h-10 text-white/70">
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/70"
|
||||||
|
>
|
||||||
<Users className="h-4 w-4 mr-3" />
|
<Users className="h-4 w-4 mr-3" />
|
||||||
Сотрудники
|
Сотрудники
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" className="w-full justify-start h-10 text-white/70">
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/70"
|
||||||
|
>
|
||||||
<MessageCircle className="h-4 w-4 mr-3" />
|
<MessageCircle className="h-4 w-4 mr-3" />
|
||||||
Мессенджер
|
Мессенджер
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" className="w-full justify-start h-10 text-white/70">
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/70"
|
||||||
|
>
|
||||||
<Building className="h-4 w-4 mr-3" />
|
<Building className="h-4 w-4 mr-3" />
|
||||||
Партнеры
|
Партнеры
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" className="w-full justify-start h-10 text-white/70">
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/70"
|
||||||
|
>
|
||||||
<Settings className="h-4 w-4 mr-3" />
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
Настройки
|
Настройки
|
||||||
</Button>
|
</Button>
|
||||||
@ -376,6 +432,1134 @@ export function LayoutsDemo() {
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
{/* Новые градиентные сайдбары */}
|
||||||
|
<Card className="glass-card border-white/10">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-white">Градиентные сайдбары</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
{/* Cosmic Gradient Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Космический градиент
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 gradient-cosmic rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
|
||||||
|
{/* Profile */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/20">
|
||||||
|
<Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
|
||||||
|
<AvatarFallback className="bg-white/20 text-white font-semibold">
|
||||||
|
CS
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white font-medium text-sm">
|
||||||
|
Cosmic Space
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/20 text-white border-white/30 text-xs">
|
||||||
|
Космос
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
|
||||||
|
<Home className="h-4 w-4 mr-3" />
|
||||||
|
Галактика
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4 mr-3" />
|
||||||
|
Экипаж
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<MessageCircle className="h-4 w-4 mr-3" />
|
||||||
|
Связь
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
|
Настройки
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
gradient-cosmic с космической темой
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Fire Gradient Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Огненный градиент
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 gradient-fire rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
|
||||||
|
{/* Profile */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/20">
|
||||||
|
<Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
|
||||||
|
<AvatarFallback className="bg-white/20 text-white font-semibold">
|
||||||
|
FR
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white font-medium text-sm">
|
||||||
|
Fire Studio
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/20 text-white border-white/30 text-xs">
|
||||||
|
Креатив
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
|
||||||
|
<Home className="h-4 w-4 mr-3" />
|
||||||
|
Студия
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4 mr-3" />
|
||||||
|
Команда
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4 mr-3" />
|
||||||
|
Проекты
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
|
Настройки
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
gradient-fire с огненной энергией
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Aurora Gradient Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Северное сияние
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 gradient-aurora rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
|
||||||
|
{/* Profile */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/20">
|
||||||
|
<Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
|
||||||
|
<AvatarFallback className="bg-white/20 text-white font-semibold">
|
||||||
|
AR
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white font-medium text-sm">
|
||||||
|
Aurora Labs
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/20 text-white border-white/30 text-xs">
|
||||||
|
Инновации
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
|
||||||
|
<Home className="h-4 w-4 mr-3" />
|
||||||
|
Лаборатория
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4 mr-3" />
|
||||||
|
Ученые
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<MessageCircle className="h-4 w-4 mr-3" />
|
||||||
|
Исследования
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
|
Настройки
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
gradient-aurora с многоцветным сиянием
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Ocean Gradient Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Океанический градиент
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 gradient-ocean rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
|
||||||
|
{/* Profile */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/20">
|
||||||
|
<Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
|
||||||
|
<AvatarFallback className="bg-white/20 text-white font-semibold">
|
||||||
|
OC
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white font-medium text-sm">
|
||||||
|
Ocean Deep
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/20 text-white border-white/30 text-xs">
|
||||||
|
Морской
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
|
||||||
|
<Home className="h-4 w-4 mr-3" />
|
||||||
|
Океан
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4 mr-3" />
|
||||||
|
Экипаж
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<MessageCircle className="h-4 w-4 mr-3" />
|
||||||
|
Навигация
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
|
Настройки
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
gradient-ocean с морской глубиной
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Emerald Gradient Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Изумрудный градиент
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 gradient-emerald rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
|
||||||
|
{/* Profile */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/20">
|
||||||
|
<Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
|
||||||
|
<AvatarFallback className="bg-white/20 text-white font-semibold">
|
||||||
|
EM
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white font-medium text-sm">
|
||||||
|
Emerald Tech
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/20 text-white border-white/30 text-xs">
|
||||||
|
Эко
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
|
||||||
|
<Home className="h-4 w-4 mr-3" />
|
||||||
|
Главная
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4 mr-3" />
|
||||||
|
Команда
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<MessageCircle className="h-4 w-4 mr-3" />
|
||||||
|
Проекты
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
|
Настройки
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
gradient-emerald с природной энергией
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sunset Gradient Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Закатный градиент
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 gradient-sunset rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
|
||||||
|
{/* Profile */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/20">
|
||||||
|
<Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
|
||||||
|
<AvatarFallback className="bg-white/20 text-white font-semibold">
|
||||||
|
SN
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white font-medium text-sm">
|
||||||
|
Sunset Co
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/20 text-white border-white/30 text-xs">
|
||||||
|
Дизайн
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
|
||||||
|
<Home className="h-4 w-4 mr-3" />
|
||||||
|
Студия
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4 mr-3" />
|
||||||
|
Дизайнеры
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<MessageCircle className="h-4 w-4 mr-3" />
|
||||||
|
Портфолио
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
|
Настройки
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
gradient-sunset с теплым закатом
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Кастомные космические сайдбары */}
|
||||||
|
<Card className="glass-card border-white/10">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-white">Кастомные космические сайдбары</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
{/* Corporate Gradient Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Корпоративный космос
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 gradient-corporate rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
|
||||||
|
{/* Profile */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/20">
|
||||||
|
<Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
|
||||||
|
<AvatarFallback className="bg-white/20 text-white font-semibold">
|
||||||
|
CP
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white font-medium text-sm">
|
||||||
|
Corporate Space Ltd
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/20 text-white border-white/30 text-xs">
|
||||||
|
Бизнес
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
|
||||||
|
<Home className="h-4 w-4 mr-3" />
|
||||||
|
Дашборд
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4 mr-3" />
|
||||||
|
Сотрудники
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Building className="h-4 w-4 mr-3" />
|
||||||
|
Отчеты
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
|
Настройки
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
gradient-corporate - строгий деловой стиль
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Nebula Gradient Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Туманность
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 gradient-nebula rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
|
||||||
|
{/* Profile */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/20">
|
||||||
|
<Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
|
||||||
|
<AvatarFallback className="bg-white/20 text-white font-semibold">
|
||||||
|
NB
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white font-medium text-sm">
|
||||||
|
Nebula Creative
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/20 text-white border-white/30 text-xs">
|
||||||
|
Креатив
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
|
||||||
|
<Home className="h-4 w-4 mr-3" />
|
||||||
|
Вдохновение
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4 mr-3" />
|
||||||
|
Художники
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<MessageCircle className="h-4 w-4 mr-3" />
|
||||||
|
Галерея
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
|
Настройки
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
gradient-nebula - яркие космические цвета
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Galaxy Gradient Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Галактика
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 gradient-galaxy rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
|
||||||
|
{/* Profile */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/20">
|
||||||
|
<Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
|
||||||
|
<AvatarFallback className="bg-white/20 text-white font-semibold">
|
||||||
|
GX
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white font-medium text-sm">
|
||||||
|
Galaxy Explorer
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/20 text-white border-white/30 text-xs">
|
||||||
|
Исследования
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
|
||||||
|
<Home className="h-4 w-4 mr-3" />
|
||||||
|
Экспедиции
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4 mr-3" />
|
||||||
|
Исследователи
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<MessageCircle className="h-4 w-4 mr-3" />
|
||||||
|
Открытия
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
|
Настройки
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
gradient-galaxy - сложный многоцветный переход
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Starfield Gradient Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Звездное поле
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 gradient-starfield rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
|
||||||
|
{/* Profile */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/20">
|
||||||
|
<Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
|
||||||
|
<AvatarFallback className="bg-white/20 text-white font-semibold">
|
||||||
|
SF
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white font-medium text-sm">
|
||||||
|
Starfield Observatory
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/20 text-white border-white/30 text-xs">
|
||||||
|
Наблюдения
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
|
||||||
|
<Home className="h-4 w-4 mr-3" />
|
||||||
|
Телескоп
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4 mr-3" />
|
||||||
|
Астрономы
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<MessageCircle className="h-4 w-4 mr-3" />
|
||||||
|
Каталог
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
|
Настройки
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
gradient-starfield - темный минималистичный
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quantum Gradient Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Квантовый
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 gradient-quantum rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
|
||||||
|
{/* Profile */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/20">
|
||||||
|
<Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
|
||||||
|
<AvatarFallback className="bg-white/20 text-white font-semibold">
|
||||||
|
QM
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white font-medium text-sm">
|
||||||
|
Quantum Mechanics Lab
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/20 text-white border-white/30 text-xs">
|
||||||
|
Наука
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
|
||||||
|
<Home className="h-4 w-4 mr-3" />
|
||||||
|
Эксперименты
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4 mr-3" />
|
||||||
|
Физики
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<MessageCircle className="h-4 w-4 mr-3" />
|
||||||
|
Теории
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
|
Настройки
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
gradient-quantum - энергичный научный стиль
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Void Gradient Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Пустота
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 gradient-void rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
|
||||||
|
{/* Profile */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/20">
|
||||||
|
<Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
|
||||||
|
<AvatarFallback className="bg-white/20 text-white font-semibold">
|
||||||
|
VD
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white font-medium text-sm">
|
||||||
|
Void Walker
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/20 text-white border-white/30 text-xs">
|
||||||
|
Минимализм
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
|
||||||
|
<Home className="h-4 w-4 mr-3" />
|
||||||
|
Медитация
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4 mr-3" />
|
||||||
|
Философы
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<MessageCircle className="h-4 w-4 mr-3" />
|
||||||
|
Пустота
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
|
Настройки
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
gradient-void - ультра-темный космос
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Supernova Gradient Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Сверхновая
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 gradient-supernova rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
|
||||||
|
{/* Profile */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/20">
|
||||||
|
<Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
|
||||||
|
<AvatarFallback className="bg-white/20 text-white font-semibold">
|
||||||
|
SN
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white font-medium text-sm">
|
||||||
|
Supernova Studios
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/20 text-white border-white/30 text-xs">
|
||||||
|
Энергия
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
|
||||||
|
<Home className="h-4 w-4 mr-3" />
|
||||||
|
Взрыв
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4 mr-3" />
|
||||||
|
Команда
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4 mr-3" />
|
||||||
|
Проекты
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
|
Настройки
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
gradient-supernova - яркий взрывной градиент
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Утонченные космические сайдбары с акцентами */}
|
||||||
|
<Card className="glass-card border-white/10">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-white">Утонченные космические сайдбары</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
{/* Corporate Refined Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Корпоративный утонченный
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 glass-sidebar rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
|
||||||
|
{/* Profile with accent */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/20">
|
||||||
|
<div className="relative">
|
||||||
|
<Avatar className="h-10 w-10 bg-white/10 border-2 border-white/20">
|
||||||
|
<AvatarFallback className="bg-white/10 text-white font-semibold">
|
||||||
|
CP
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="absolute -top-1 -right-1 w-4 h-4 gradient-corporate-accent rounded-full border border-white/30"></div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white font-medium text-sm">
|
||||||
|
Corporate Elite
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/10 text-white/80 border-white/20 text-xs">
|
||||||
|
Премиум
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation with subtle accents */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/10 hover:bg-white/15 border-white/20 text-white relative overflow-hidden">
|
||||||
|
<div className="absolute left-0 top-0 bottom-0 w-1 gradient-corporate-accent"></div>
|
||||||
|
<Home className="h-4 w-4 mr-3 ml-2" />
|
||||||
|
Дашборд
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
|
||||||
|
>
|
||||||
|
<div className="absolute left-0 top-0 bottom-0 w-1 gradient-corporate-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||||
|
<Users className="h-4 w-4 mr-3 ml-2" />
|
||||||
|
Сотрудники
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
|
||||||
|
>
|
||||||
|
<div className="absolute left-0 top-0 bottom-0 w-1 gradient-corporate-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||||
|
<Building className="h-4 w-4 mr-3 ml-2" />
|
||||||
|
Отчеты
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
|
||||||
|
>
|
||||||
|
<div className="absolute left-0 top-0 bottom-0 w-1 gradient-corporate-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||||
|
<Settings className="h-4 w-4 mr-3 ml-2" />
|
||||||
|
Настройки
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
Утонченный корпоративный с акцентами
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Nebula Refined Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Туманность утонченная
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 glass-sidebar rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
|
||||||
|
{/* Profile with nebula accent */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/20">
|
||||||
|
<div className="relative">
|
||||||
|
<Avatar className="h-10 w-10 bg-white/10 border-2 border-white/20">
|
||||||
|
<AvatarFallback className="bg-white/10 text-white font-semibold">
|
||||||
|
NB
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="absolute inset-0 gradient-nebula-accent opacity-20 rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white font-medium text-sm">
|
||||||
|
Nebula Refined
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/10 text-white/80 border-white/20 text-xs">
|
||||||
|
Креатив
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation with glow effects */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/10 hover:bg-white/15 border-white/20 text-white relative">
|
||||||
|
<div className="absolute right-2 top-1/2 -translate-y-1/2 w-2 h-2 gradient-nebula-accent rounded-full"></div>
|
||||||
|
<Home className="h-4 w-4 mr-3" />
|
||||||
|
Вдохновение
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
|
||||||
|
>
|
||||||
|
<div className="absolute right-2 top-1/2 -translate-y-1/2 w-2 h-2 gradient-nebula-accent rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||||
|
<Users className="h-4 w-4 mr-3" />
|
||||||
|
Художники
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
|
||||||
|
>
|
||||||
|
<div className="absolute right-2 top-1/2 -translate-y-1/2 w-2 h-2 gradient-nebula-accent rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||||
|
<MessageCircle className="h-4 w-4 mr-3" />
|
||||||
|
Галерея
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
|
||||||
|
>
|
||||||
|
<div className="absolute right-2 top-1/2 -translate-y-1/2 w-2 h-2 gradient-nebula-accent rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||||
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
|
Настройки
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
Мягкие акценты с точечными индикаторами
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Galaxy Refined Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Галактика элегантная
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 glass-sidebar rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
|
||||||
|
{/* Profile with gradient border */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 relative">
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 h-px gradient-galaxy-accent"></div>
|
||||||
|
<Avatar className="h-10 w-10 bg-white/10 border border-white/20">
|
||||||
|
<AvatarFallback className="bg-white/10 text-white font-semibold">
|
||||||
|
GX
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white font-medium text-sm">
|
||||||
|
Galaxy Elegant
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/10 text-white/80 border-white/20 text-xs">
|
||||||
|
Исследования
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation with underline accents */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/10 hover:bg-white/15 border-white/20 text-white relative">
|
||||||
|
<div className="absolute bottom-0 left-4 right-4 h-px gradient-galaxy-accent"></div>
|
||||||
|
<Home className="h-4 w-4 mr-3" />
|
||||||
|
Экспедиции
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
|
||||||
|
>
|
||||||
|
<div className="absolute bottom-0 left-4 right-4 h-px gradient-galaxy-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||||
|
<Users className="h-4 w-4 mr-3" />
|
||||||
|
Исследователи
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
|
||||||
|
>
|
||||||
|
<div className="absolute bottom-0 left-4 right-4 h-px gradient-galaxy-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||||
|
<MessageCircle className="h-4 w-4 mr-3" />
|
||||||
|
Открытия
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
|
||||||
|
>
|
||||||
|
<div className="absolute bottom-0 left-4 right-4 h-px gradient-galaxy-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||||
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
|
Настройки
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
Элегантные подчеркивания и границы
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Ethereal Premium Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Восхитительный эфирный ✨
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 glass-sidebar rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20 relative overflow-hidden">
|
||||||
|
{/* Subtle ethereal background */}
|
||||||
|
<div className="absolute inset-0 gradient-ethereal opacity-10"></div>
|
||||||
|
|
||||||
|
{/* Profile with ethereal glow */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/20 relative z-10">
|
||||||
|
<div className="relative">
|
||||||
|
<Avatar className="h-10 w-10 bg-white/10 border border-white/20">
|
||||||
|
<AvatarFallback className="bg-white/10 text-white font-semibold">
|
||||||
|
ET
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="absolute inset-0 gradient-ethereal opacity-30 rounded-full blur-sm"></div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white font-medium text-sm">
|
||||||
|
Ethereal Cosmos
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/10 text-white/80 border-white/20 text-xs relative">
|
||||||
|
<div className="absolute inset-0 gradient-ethereal opacity-20 rounded"></div>
|
||||||
|
<span className="relative">Премиум</span>
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation with ethereal effects */}
|
||||||
|
<div className="space-y-1 relative z-10">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/10 hover:bg-white/15 border-white/20 text-white relative overflow-hidden group">
|
||||||
|
<div className="absolute inset-0 gradient-ethereal opacity-20 group-hover:opacity-30 transition-opacity"></div>
|
||||||
|
<Home className="h-4 w-4 mr-3 relative z-10" />
|
||||||
|
<span className="relative z-10">Пространство</span>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group overflow-hidden"
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 gradient-ethereal opacity-0 group-hover:opacity-15 transition-opacity"></div>
|
||||||
|
<Users className="h-4 w-4 mr-3 relative z-10" />
|
||||||
|
<span className="relative z-10">Путешественники</span>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group overflow-hidden"
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 gradient-ethereal opacity-0 group-hover:opacity-15 transition-opacity"></div>
|
||||||
|
<MessageCircle className="h-4 w-4 mr-3 relative z-10" />
|
||||||
|
<span className="relative z-10">Измерения</span>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group overflow-hidden"
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 gradient-ethereal opacity-0 group-hover:opacity-15 transition-opacity"></div>
|
||||||
|
<Settings className="h-4 w-4 mr-3 relative z-10" />
|
||||||
|
<span className="relative z-10">Настройки</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Floating particles effect */}
|
||||||
|
<div className="absolute inset-0 pointer-events-none">
|
||||||
|
<div className="absolute top-4 left-8 w-1 h-1 gradient-ethereal rounded-full animate-pulse"></div>
|
||||||
|
<div className="absolute top-12 right-6 w-0.5 h-0.5 gradient-ethereal rounded-full animate-pulse" style={{animationDelay: '0.5s'}}></div>
|
||||||
|
<div className="absolute bottom-8 left-12 w-1 h-1 gradient-ethereal rounded-full animate-pulse" style={{animationDelay: '1s'}}></div>
|
||||||
|
<div className="absolute bottom-16 right-10 w-0.5 h-0.5 gradient-ethereal rounded-full animate-pulse" style={{animationDelay: '1.5s'}}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
Восхитительный эфирный с плавающими частицами
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Void Refined Sidebar */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Пустота минималистичная
|
||||||
|
</h4>
|
||||||
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
|
<div className="w-56 glass-sidebar rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
|
||||||
|
{/* Minimal profile */}
|
||||||
|
<div className="flex items-center space-x-3 pb-4 border-b border-white/10">
|
||||||
|
<Avatar className="h-10 w-10 bg-white/5 border border-white/10">
|
||||||
|
<AvatarFallback className="bg-white/5 text-white/80 font-semibold">
|
||||||
|
VD
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-white/90 font-medium text-sm">
|
||||||
|
Void Minimal
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-white/5 text-white/60 border-white/10 text-xs">
|
||||||
|
Минимализм
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Ultra minimal navigation */}
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Button className="w-full justify-start h-10 bg-white/5 hover:bg-white/8 border-white/10 text-white/90 relative">
|
||||||
|
<div className="absolute left-0 top-0 bottom-0 w-px gradient-void-accent"></div>
|
||||||
|
<Home className="h-4 w-4 mr-3" />
|
||||||
|
Медитация
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/60 hover:text-white/90 hover:bg-white/3 relative group"
|
||||||
|
>
|
||||||
|
<div className="absolute left-0 top-0 bottom-0 w-px gradient-void-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||||
|
<Users className="h-4 w-4 mr-3" />
|
||||||
|
Философы
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/60 hover:text-white/90 hover:bg-white/3 relative group"
|
||||||
|
>
|
||||||
|
<div className="absolute left-0 top-0 bottom-0 w-px gradient-void-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||||
|
<MessageCircle className="h-4 w-4 mr-3" />
|
||||||
|
Пустота
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-10 text-white/60 hover:text-white/90 hover:bg-white/3 relative group"
|
||||||
|
>
|
||||||
|
<div className="absolute left-0 top-0 bottom-0 w-px gradient-void-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||||
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
|
Настройки
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||||
|
Ультра-минималистичный с тонкими акцентами
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
{/* Spacing and Structure */}
|
{/* Spacing and Structure */}
|
||||||
<Card className="glass-card border-white/10">
|
<Card className="glass-card border-white/10">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
@ -384,14 +1568,22 @@ export function LayoutsDemo() {
|
|||||||
<CardContent className="space-y-6">
|
<CardContent className="space-y-6">
|
||||||
{/* Container */}
|
{/* Container */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Container Patterns</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Container Patterns
|
||||||
|
</h4>
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="bg-white/5 rounded-lg p-6 border border-white/10">
|
<div className="bg-white/5 rounded-lg p-6 border border-white/10">
|
||||||
<div className="text-xs text-white/60 mb-2">p-6 (24px padding)</div>
|
<div className="text-xs text-white/60 mb-2">
|
||||||
|
p-6 (24px padding)
|
||||||
|
</div>
|
||||||
<div className="bg-white/10 rounded p-4">
|
<div className="bg-white/10 rounded p-4">
|
||||||
<div className="text-xs text-white/60 mb-2">p-4 (16px padding)</div>
|
<div className="text-xs text-white/60 mb-2">
|
||||||
|
p-4 (16px padding)
|
||||||
|
</div>
|
||||||
<div className="bg-white/20 rounded p-2">
|
<div className="bg-white/20 rounded p-2">
|
||||||
<div className="text-xs text-white/60">p-2 (8px padding)</div>
|
<div className="text-xs text-white/60">
|
||||||
|
p-2 (8px padding)
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -400,7 +1592,9 @@ export function LayoutsDemo() {
|
|||||||
|
|
||||||
{/* Spacing */}
|
{/* Spacing */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Space Patterns</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Space Patterns
|
||||||
|
</h4>
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||||
<div className="text-xs text-white/60 mb-3">space-y-6</div>
|
<div className="text-xs text-white/60 mb-3">space-y-6</div>
|
||||||
@ -423,5 +1617,5 @@ export function LayoutsDemo() {
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
@ -55,7 +55,7 @@ import {
|
|||||||
Smartphone,
|
Smartphone,
|
||||||
Monitor,
|
Monitor,
|
||||||
Tablet,
|
Tablet,
|
||||||
Clock
|
Clock,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
|
|
||||||
export function NavigationDemo() {
|
export function NavigationDemo() {
|
||||||
@ -651,6 +651,347 @@ export function NavigationDemo() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Компактные градиентные сайдбары */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Компактные градиентные сайдбары
|
||||||
|
</h4>
|
||||||
|
<div className="flex space-x-4 flex-wrap gap-4">
|
||||||
|
{/* Cosmic Mini */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<div className="w-3 h-3 gradient-cosmic rounded-full"></div>
|
||||||
|
<span className="text-white/60 text-xs">Cosmic</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-14 gradient-cosmic rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
|
||||||
|
<Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
|
||||||
|
<Home className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Fire Mini */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<div className="w-3 h-3 gradient-fire rounded-full"></div>
|
||||||
|
<span className="text-white/60 text-xs">Fire</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-14 gradient-fire rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
|
||||||
|
<Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
|
||||||
|
<Home className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Aurora Mini */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<div className="w-3 h-3 gradient-aurora rounded-full"></div>
|
||||||
|
<span className="text-white/60 text-xs">Aurora</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-14 gradient-aurora rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
|
||||||
|
<Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
|
||||||
|
<Home className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Ocean Mini */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<div className="w-3 h-3 gradient-ocean rounded-full"></div>
|
||||||
|
<span className="text-white/60 text-xs">Ocean</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-14 gradient-ocean rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
|
||||||
|
<Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
|
||||||
|
<Home className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Emerald Mini */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<div className="w-3 h-3 gradient-emerald rounded-full"></div>
|
||||||
|
<span className="text-white/60 text-xs">Emerald</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-14 gradient-emerald rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
|
||||||
|
<Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
|
||||||
|
<Home className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sunset Mini */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<div className="w-3 h-3 gradient-sunset rounded-full"></div>
|
||||||
|
<span className="text-white/60 text-xs">Sunset</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-14 gradient-sunset rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
|
||||||
|
<Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
|
||||||
|
<Home className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Кастомные космические мини-сайдбары */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Кастомные космические мини-сайдбары
|
||||||
|
</h4>
|
||||||
|
<div className="grid grid-cols-4 gap-4">
|
||||||
|
{/* Corporate Mini */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<div className="w-3 h-3 gradient-corporate rounded-full"></div>
|
||||||
|
<span className="text-white/60 text-xs">Corporate</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-14 gradient-corporate rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
|
||||||
|
<Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
|
||||||
|
<Building className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Nebula Mini */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<div className="w-3 h-3 gradient-nebula rounded-full"></div>
|
||||||
|
<span className="text-white/60 text-xs">Nebula</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-14 gradient-nebula rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
|
||||||
|
<Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
|
||||||
|
<Home className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Galaxy Mini */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<div className="w-3 h-3 gradient-galaxy rounded-full"></div>
|
||||||
|
<span className="text-white/60 text-xs">Galaxy</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-14 gradient-galaxy rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
|
||||||
|
<Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
|
||||||
|
<Home className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Starfield Mini */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<div className="w-3 h-3 gradient-starfield rounded-full"></div>
|
||||||
|
<span className="text-white/60 text-xs">Starfield</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-14 gradient-starfield rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
|
||||||
|
<Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
|
||||||
|
<Home className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quantum Mini */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<div className="w-3 h-3 gradient-quantum rounded-full"></div>
|
||||||
|
<span className="text-white/60 text-xs">Quantum</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-14 gradient-quantum rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
|
||||||
|
<Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
|
||||||
|
<Home className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Void Mini */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<div className="w-3 h-3 gradient-void rounded-full"></div>
|
||||||
|
<span className="text-white/60 text-xs">Void</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-14 gradient-void rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
|
||||||
|
<Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
|
||||||
|
<Home className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Supernova Mini */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<div className="w-3 h-3 gradient-supernova rounded-full"></div>
|
||||||
|
<span className="text-white/60 text-xs">Supernova</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-14 gradient-supernova rounded-lg p-2 space-y-2 backdrop-blur-sm border border-white/20">
|
||||||
|
<Button className="w-10 h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white p-0">
|
||||||
|
<Home className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Users className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-10 h-10 text-white/80 hover:text-white hover:bg-white/10 p-0"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
@ -772,8 +1113,14 @@ export function NavigationDemo() {
|
|||||||
<CardContent className="space-y-6">
|
<CardContent className="space-y-6">
|
||||||
{/* Enhanced Tabs */}
|
{/* Enhanced Tabs */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Улучшенные табы</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
Улучшенные табы
|
||||||
|
</h4>
|
||||||
|
<Tabs
|
||||||
|
value={activeTab}
|
||||||
|
onValueChange={setActiveTab}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
<TabsList className="grid w-full grid-cols-4 bg-white/5 backdrop-blur border-white/10 p-1 rounded-xl h-12">
|
<TabsList className="grid w-full grid-cols-4 bg-white/5 backdrop-blur border-white/10 p-1 rounded-xl h-12">
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="nav"
|
value="nav"
|
||||||
@ -812,17 +1159,23 @@ export function NavigationDemo() {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h5 className="text-white font-semibold">Навигация</h5>
|
<h5 className="text-white font-semibold">Навигация</h5>
|
||||||
<p className="text-white/60 text-sm">Компоненты для навигации по приложению</p>
|
<p className="text-white/60 text-sm">
|
||||||
|
Компоненты для навигации по приложению
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
<div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||||||
<span className="text-white/80 text-sm">Сайдбары</span>
|
<span className="text-white/80 text-sm">Сайдбары</span>
|
||||||
<Badge className="bg-green-500/20 text-green-300">Готово</Badge>
|
<Badge className="bg-green-500/20 text-green-300">
|
||||||
|
Готово
|
||||||
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
<div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||||||
<span className="text-white/80 text-sm">Меню</span>
|
<span className="text-white/80 text-sm">Меню</span>
|
||||||
<Badge className="bg-blue-500/20 text-blue-300">В работе</Badge>
|
<Badge className="bg-blue-500/20 text-blue-300">
|
||||||
|
В работе
|
||||||
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -835,7 +1188,9 @@ export function NavigationDemo() {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h5 className="text-white font-semibold">Формы</h5>
|
<h5 className="text-white font-semibold">Формы</h5>
|
||||||
<p className="text-white/60 text-sm">Элементы для ввода и обработки данных</p>
|
<p className="text-white/60 text-sm">
|
||||||
|
Элементы для ввода и обработки данных
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -848,7 +1203,9 @@ export function NavigationDemo() {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h5 className="text-white font-semibold">Данные</h5>
|
<h5 className="text-white font-semibold">Данные</h5>
|
||||||
<p className="text-white/60 text-sm">Компоненты для отображения данных</p>
|
<p className="text-white/60 text-sm">
|
||||||
|
Компоненты для отображения данных
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -861,7 +1218,9 @@ export function NavigationDemo() {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h5 className="text-white font-semibold">Настройки</h5>
|
<h5 className="text-white font-semibold">Настройки</h5>
|
||||||
<p className="text-white/60 text-sm">Элементы управления настройками</p>
|
<p className="text-white/60 text-sm">
|
||||||
|
Элементы управления настройками
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -871,18 +1230,30 @@ export function NavigationDemo() {
|
|||||||
|
|
||||||
{/* Pill Tabs */}
|
{/* Pill Tabs */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Табы-пилюли</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Табы-пилюли
|
||||||
|
</h4>
|
||||||
<div className="flex space-x-1 glass-card p-2 rounded-xl border border-white/10 w-fit">
|
<div className="flex space-x-1 glass-card p-2 rounded-xl border border-white/10 w-fit">
|
||||||
<Button variant="glass" size="sm" className="rounded-full px-4">
|
<Button variant="glass" size="sm" className="rounded-full px-4">
|
||||||
<Package className="h-4 w-4 mr-2" />
|
<Package className="h-4 w-4 mr-2" />
|
||||||
Товары
|
Товары
|
||||||
<Badge className="ml-2 bg-primary/30 text-primary-foreground text-xs">234</Badge>
|
<Badge className="ml-2 bg-primary/30 text-primary-foreground text-xs">
|
||||||
|
234
|
||||||
|
</Badge>
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" size="sm" className="rounded-full px-4 text-white/70 hover:text-white">
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="rounded-full px-4 text-white/70 hover:text-white"
|
||||||
|
>
|
||||||
<Users className="h-4 w-4 mr-2" />
|
<Users className="h-4 w-4 mr-2" />
|
||||||
Клиенты
|
Клиенты
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" size="sm" className="rounded-full px-4 text-white/70 hover:text-white">
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="rounded-full px-4 text-white/70 hover:text-white"
|
||||||
|
>
|
||||||
<Truck className="h-4 w-4 mr-2" />
|
<Truck className="h-4 w-4 mr-2" />
|
||||||
Доставка
|
Доставка
|
||||||
</Button>
|
</Button>
|
||||||
@ -891,17 +1262,27 @@ export function NavigationDemo() {
|
|||||||
|
|
||||||
{/* Segmented Control */}
|
{/* Segmented Control */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Сегментированный контрол</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Сегментированный контрол
|
||||||
|
</h4>
|
||||||
<div className="inline-flex glass-card rounded-xl p-1 border border-white/10">
|
<div className="inline-flex glass-card rounded-xl p-1 border border-white/10">
|
||||||
<Button variant="glass" size="sm" className="rounded-lg">
|
<Button variant="glass" size="sm" className="rounded-lg">
|
||||||
<Eye className="h-4 w-4 mr-2" />
|
<Eye className="h-4 w-4 mr-2" />
|
||||||
Просмотр
|
Просмотр
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" size="sm" className="rounded-lg text-white/70">
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="rounded-lg text-white/70"
|
||||||
|
>
|
||||||
<FileText className="h-4 w-4 mr-2" />
|
<FileText className="h-4 w-4 mr-2" />
|
||||||
Редактирование
|
Редактирование
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" size="sm" className="rounded-lg text-white/70">
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="rounded-lg text-white/70"
|
||||||
|
>
|
||||||
<Settings className="h-4 w-4 mr-2" />
|
<Settings className="h-4 w-4 mr-2" />
|
||||||
Настройки
|
Настройки
|
||||||
</Button>
|
</Button>
|
||||||
@ -910,25 +1291,39 @@ export function NavigationDemo() {
|
|||||||
|
|
||||||
{/* Vertical Tabs */}
|
{/* Vertical Tabs */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Вертикальные табы</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Вертикальные табы
|
||||||
|
</h4>
|
||||||
<div className="flex space-x-6">
|
<div className="flex space-x-6">
|
||||||
<div className="w-56 space-y-2">
|
<div className="w-56 space-y-2">
|
||||||
<Button variant="glass" className="w-full justify-start h-11 font-medium">
|
<Button
|
||||||
|
variant="glass"
|
||||||
|
className="w-full justify-start h-11 font-medium"
|
||||||
|
>
|
||||||
<Home className="h-4 w-4 mr-3" />
|
<Home className="h-4 w-4 mr-3" />
|
||||||
Главная панель
|
Главная панель
|
||||||
<ChevronRight className="h-4 w-4 ml-auto" />
|
<ChevronRight className="h-4 w-4 ml-auto" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" className="w-full justify-start h-11 text-white/70 hover:text-white font-medium">
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-11 text-white/70 hover:text-white font-medium"
|
||||||
|
>
|
||||||
<Users className="h-4 w-4 mr-3" />
|
<Users className="h-4 w-4 mr-3" />
|
||||||
Управление пользователями
|
Управление пользователями
|
||||||
<ChevronRight className="h-4 w-4 ml-auto" />
|
<ChevronRight className="h-4 w-4 ml-auto" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" className="w-full justify-start h-11 text-white/70 hover:text-white font-medium">
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-11 text-white/70 hover:text-white font-medium"
|
||||||
|
>
|
||||||
<BarChart3 className="h-4 w-4 mr-3" />
|
<BarChart3 className="h-4 w-4 mr-3" />
|
||||||
Аналитика и отчеты
|
Аналитика и отчеты
|
||||||
<ChevronRight className="h-4 w-4 ml-auto" />
|
<ChevronRight className="h-4 w-4 ml-auto" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" className="w-full justify-start h-11 text-white/70 hover:text-white font-medium">
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start h-11 text-white/70 hover:text-white font-medium"
|
||||||
|
>
|
||||||
<Settings className="h-4 w-4 mr-3" />
|
<Settings className="h-4 w-4 mr-3" />
|
||||||
Настройки системы
|
Настройки системы
|
||||||
<ChevronRight className="h-4 w-4 ml-auto" />
|
<ChevronRight className="h-4 w-4 ml-auto" />
|
||||||
@ -940,17 +1335,27 @@ export function NavigationDemo() {
|
|||||||
<Home className="h-6 w-6 text-primary" />
|
<Home className="h-6 w-6 text-primary" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h5 className="text-white font-semibold text-lg">Главная панель</h5>
|
<h5 className="text-white font-semibold text-lg">
|
||||||
<p className="text-white/60">Обзор системы и быстрый доступ к функциям</p>
|
Главная панель
|
||||||
|
</h5>
|
||||||
|
<p className="text-white/60">
|
||||||
|
Обзор системы и быстрый доступ к функциям
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-2 gap-4">
|
<div className="grid grid-cols-2 gap-4">
|
||||||
<div className="glass-card border-white/10 p-4 rounded-lg text-center">
|
<div className="glass-card border-white/10 p-4 rounded-lg text-center">
|
||||||
<div className="text-2xl font-bold text-white mb-1">2,847</div>
|
<div className="text-2xl font-bold text-white mb-1">
|
||||||
<div className="text-white/60 text-sm">Всего пользователей</div>
|
2,847
|
||||||
|
</div>
|
||||||
|
<div className="text-white/60 text-sm">
|
||||||
|
Всего пользователей
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="glass-card border-white/10 p-4 rounded-lg text-center">
|
<div className="glass-card border-white/10 p-4 rounded-lg text-center">
|
||||||
<div className="text-2xl font-bold text-green-400 mb-1">156</div>
|
<div className="text-2xl font-bold text-green-400 mb-1">
|
||||||
|
156
|
||||||
|
</div>
|
||||||
<div className="text-white/60 text-sm">Активных сессий</div>
|
<div className="text-white/60 text-sm">Активных сессий</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1308,23 +1713,34 @@ export function NavigationDemo() {
|
|||||||
<CardContent className="space-y-6">
|
<CardContent className="space-y-6">
|
||||||
{/* Enhanced Breadcrumbs */}
|
{/* Enhanced Breadcrumbs */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Улучшенные breadcrumbs</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Улучшенные breadcrumbs
|
||||||
|
</h4>
|
||||||
<div className="glass-card p-4 rounded-xl border border-white/10">
|
<div className="glass-card p-4 rounded-xl border border-white/10">
|
||||||
<nav className="flex items-center space-x-2 text-sm">
|
<nav className="flex items-center space-x-2 text-sm">
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<div className="w-6 h-6 bg-primary/20 rounded-lg flex items-center justify-center">
|
<div className="w-6 h-6 bg-primary/20 rounded-lg flex items-center justify-center">
|
||||||
<Home className="h-3 w-3 text-primary" />
|
<Home className="h-3 w-3 text-primary" />
|
||||||
</div>
|
</div>
|
||||||
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto font-medium">
|
<Button
|
||||||
|
variant="link"
|
||||||
|
className="text-white/70 hover:text-white p-0 h-auto font-medium"
|
||||||
|
>
|
||||||
Главная
|
Главная
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<ChevronRight className="h-4 w-4 text-white/40" />
|
<ChevronRight className="h-4 w-4 text-white/40" />
|
||||||
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto font-medium">
|
<Button
|
||||||
|
variant="link"
|
||||||
|
className="text-white/70 hover:text-white p-0 h-auto font-medium"
|
||||||
|
>
|
||||||
Маркетплейс
|
Маркетплейс
|
||||||
</Button>
|
</Button>
|
||||||
<ChevronRight className="h-4 w-4 text-white/40" />
|
<ChevronRight className="h-4 w-4 text-white/40" />
|
||||||
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto font-medium">
|
<Button
|
||||||
|
variant="link"
|
||||||
|
className="text-white/70 hover:text-white p-0 h-auto font-medium"
|
||||||
|
>
|
||||||
Товары
|
Товары
|
||||||
</Button>
|
</Button>
|
||||||
<ChevronRight className="h-4 w-4 text-white/40" />
|
<ChevronRight className="h-4 w-4 text-white/40" />
|
||||||
@ -1332,7 +1748,9 @@ export function NavigationDemo() {
|
|||||||
<div className="w-6 h-6 bg-orange-500/20 rounded-lg flex items-center justify-center">
|
<div className="w-6 h-6 bg-orange-500/20 rounded-lg flex items-center justify-center">
|
||||||
<Package className="h-3 w-3 text-orange-400" />
|
<Package className="h-3 w-3 text-orange-400" />
|
||||||
</div>
|
</div>
|
||||||
<span className="text-white font-semibold">iPhone 15 Pro Max</span>
|
<span className="text-white font-semibold">
|
||||||
|
iPhone 15 Pro Max
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
@ -1340,7 +1758,9 @@ export function NavigationDemo() {
|
|||||||
|
|
||||||
{/* Interactive Breadcrumbs */}
|
{/* Interactive Breadcrumbs */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Интерактивные breadcrumbs</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Интерактивные breadcrumbs
|
||||||
|
</h4>
|
||||||
<div className="glass-card p-4 rounded-xl border border-white/10">
|
<div className="glass-card p-4 rounded-xl border border-white/10">
|
||||||
<div className="flex items-center justify-between mb-3">
|
<div className="flex items-center justify-between mb-3">
|
||||||
<nav className="flex items-center space-x-2 text-sm">
|
<nav className="flex items-center space-x-2 text-sm">
|
||||||
@ -1349,11 +1769,17 @@ export function NavigationDemo() {
|
|||||||
Назад
|
Назад
|
||||||
</Button>
|
</Button>
|
||||||
<div className="border-l border-white/20 h-6 mx-3"></div>
|
<div className="border-l border-white/20 h-6 mx-3"></div>
|
||||||
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto">
|
<Button
|
||||||
|
variant="link"
|
||||||
|
className="text-white/70 hover:text-white p-0 h-auto"
|
||||||
|
>
|
||||||
Склад
|
Склад
|
||||||
</Button>
|
</Button>
|
||||||
<ChevronRight className="h-4 w-4 text-white/40" />
|
<ChevronRight className="h-4 w-4 text-white/40" />
|
||||||
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto">
|
<Button
|
||||||
|
variant="link"
|
||||||
|
className="text-white/70 hover:text-white p-0 h-auto"
|
||||||
|
>
|
||||||
Категории
|
Категории
|
||||||
</Button>
|
</Button>
|
||||||
<ChevronRight className="h-4 w-4 text-white/40" />
|
<ChevronRight className="h-4 w-4 text-white/40" />
|
||||||
@ -1364,10 +1790,16 @@ export function NavigationDemo() {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<Badge variant="secondary" className="bg-blue-500/20 text-blue-300">
|
<Badge
|
||||||
|
variant="secondary"
|
||||||
|
className="bg-blue-500/20 text-blue-300"
|
||||||
|
>
|
||||||
234 товара
|
234 товара
|
||||||
</Badge>
|
</Badge>
|
||||||
<Badge variant="outline" className="border-white/20 text-white/60">
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="border-white/20 text-white/60"
|
||||||
|
>
|
||||||
Обновлено 2ч назад
|
Обновлено 2ч назад
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
@ -1384,13 +1816,17 @@ export function NavigationDemo() {
|
|||||||
<CardContent className="space-y-6">
|
<CardContent className="space-y-6">
|
||||||
{/* Enhanced Pagination */}
|
{/* Enhanced Pagination */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Улучшенная пагинация</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Улучшенная пагинация
|
||||||
|
</h4>
|
||||||
<div className="glass-card p-4 rounded-xl border border-white/10">
|
<div className="glass-card p-4 rounded-xl border border-white/10">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center space-x-4">
|
<div className="flex items-center space-x-4">
|
||||||
<div className="text-white/70 text-sm">
|
<div className="text-white/70 text-sm">
|
||||||
Показано <span className="text-white font-medium">1-25</span> из{' '}
|
Показано{" "}
|
||||||
<span className="text-white font-medium">1,247</span> записей
|
<span className="text-white font-medium">1-25</span> из{" "}
|
||||||
|
<span className="text-white font-medium">1,247</span>{" "}
|
||||||
|
записей
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<span className="text-white/60 text-sm">Показать:</span>
|
<span className="text-white/60 text-sm">Показать:</span>
|
||||||
@ -1405,12 +1841,38 @@ export function NavigationDemo() {
|
|||||||
Пред
|
Пред
|
||||||
</Button>
|
</Button>
|
||||||
<div className="flex items-center space-x-1">
|
<div className="flex items-center space-x-1">
|
||||||
<Button variant="glass" size="sm" className="h-8 w-8">1</Button>
|
<Button variant="glass" size="sm" className="h-8 w-8">
|
||||||
<Button variant="ghost" size="sm" className="h-8 w-8 text-white/70">2</Button>
|
1
|
||||||
<Button variant="ghost" size="sm" className="h-8 w-8 text-white/70">3</Button>
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-8 w-8 text-white/70"
|
||||||
|
>
|
||||||
|
2
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-8 w-8 text-white/70"
|
||||||
|
>
|
||||||
|
3
|
||||||
|
</Button>
|
||||||
<span className="text-white/40 px-2">...</span>
|
<span className="text-white/40 px-2">...</span>
|
||||||
<Button variant="ghost" size="sm" className="h-8 w-8 text-white/70">49</Button>
|
<Button
|
||||||
<Button variant="ghost" size="sm" className="h-8 w-8 text-white/70">50</Button>
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-8 w-8 text-white/70"
|
||||||
|
>
|
||||||
|
49
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-8 w-8 text-white/70"
|
||||||
|
>
|
||||||
|
50
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<Button variant="outline" size="sm" className="h-8">
|
<Button variant="outline" size="sm" className="h-8">
|
||||||
След
|
След
|
||||||
@ -1423,7 +1885,9 @@ export function NavigationDemo() {
|
|||||||
|
|
||||||
{/* Compact Pagination */}
|
{/* Compact Pagination */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Компактная пагинация</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Компактная пагинация
|
||||||
|
</h4>
|
||||||
<div className="glass-card p-3 rounded-xl border border-white/10">
|
<div className="glass-card p-3 rounded-xl border border-white/10">
|
||||||
<div className="flex items-center justify-center space-x-4">
|
<div className="flex items-center justify-center space-x-4">
|
||||||
<Button variant="outline" size="sm" disabled className="h-8">
|
<Button variant="outline" size="sm" disabled className="h-8">
|
||||||
@ -1432,9 +1896,27 @@ export function NavigationDemo() {
|
|||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<span className="text-white/70 text-sm">Страница</span>
|
<span className="text-white/70 text-sm">Страница</span>
|
||||||
<div className="flex items-center space-x-1 glass-card p-1 rounded-lg border border-white/10">
|
<div className="flex items-center space-x-1 glass-card p-1 rounded-lg border border-white/10">
|
||||||
<Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-xs">1</Button>
|
<Button
|
||||||
<Button variant="glass" size="sm" className="h-6 w-6 p-0 text-xs">2</Button>
|
variant="ghost"
|
||||||
<Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-xs">3</Button>
|
size="sm"
|
||||||
|
className="h-6 w-6 p-0 text-xs"
|
||||||
|
>
|
||||||
|
1
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="glass"
|
||||||
|
size="sm"
|
||||||
|
className="h-6 w-6 p-0 text-xs"
|
||||||
|
>
|
||||||
|
2
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-6 w-6 p-0 text-xs"
|
||||||
|
>
|
||||||
|
3
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-white/70 text-sm">из 24</span>
|
<span className="text-white/70 text-sm">из 24</span>
|
||||||
</div>
|
</div>
|
||||||
@ -1447,7 +1929,9 @@ export function NavigationDemo() {
|
|||||||
|
|
||||||
{/* Load More Pattern */}
|
{/* Load More Pattern */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Паттерн "Загрузить еще"</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Паттерн "Загрузить еще"
|
||||||
|
</h4>
|
||||||
<div className="glass-card p-4 rounded-xl border border-white/10 text-center">
|
<div className="glass-card p-4 rounded-xl border border-white/10 text-center">
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="text-white/70 text-sm">
|
<div className="text-white/70 text-sm">
|
||||||
@ -1472,7 +1956,9 @@ export function NavigationDemo() {
|
|||||||
<CardContent className="space-y-6">
|
<CardContent className="space-y-6">
|
||||||
{/* Advanced Filter Bar */}
|
{/* Advanced Filter Bar */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Расширенная панель фильтров</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Расширенная панель фильтров
|
||||||
|
</h4>
|
||||||
<div className="glass-card p-4 rounded-xl border border-white/10">
|
<div className="glass-card p-4 rounded-xl border border-white/10">
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="flex items-center justify-between mb-4">
|
||||||
<div className="flex items-center space-x-3">
|
<div className="flex items-center space-x-3">
|
||||||
@ -1509,19 +1995,32 @@ export function NavigationDemo() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center space-x-2 flex-wrap">
|
<div className="flex items-center space-x-2 flex-wrap">
|
||||||
<Badge variant="outline" className="border-primary/30 text-primary bg-primary/10">
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="border-primary/30 text-primary bg-primary/10"
|
||||||
|
>
|
||||||
Электроника
|
Электроника
|
||||||
<X className="h-3 w-3 ml-2 cursor-pointer hover:text-primary" />
|
<X className="h-3 w-3 ml-2 cursor-pointer hover:text-primary" />
|
||||||
</Badge>
|
</Badge>
|
||||||
<Badge variant="outline" className="border-green-500/30 text-green-300 bg-green-500/10">
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="border-green-500/30 text-green-300 bg-green-500/10"
|
||||||
|
>
|
||||||
В наличии
|
В наличии
|
||||||
<X className="h-3 w-3 ml-2 cursor-pointer hover:text-green-300" />
|
<X className="h-3 w-3 ml-2 cursor-pointer hover:text-green-300" />
|
||||||
</Badge>
|
</Badge>
|
||||||
<Badge variant="outline" className="border-blue-500/30 text-blue-300 bg-blue-500/10">
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="border-blue-500/30 text-blue-300 bg-blue-500/10"
|
||||||
|
>
|
||||||
Сегодня
|
Сегодня
|
||||||
<X className="h-3 w-3 ml-2 cursor-pointer hover:text-blue-300" />
|
<X className="h-3 w-3 ml-2 cursor-pointer hover:text-blue-300" />
|
||||||
</Badge>
|
</Badge>
|
||||||
<Button variant="ghost" size="sm" className="h-6 text-xs text-white/60 hover:text-white">
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-6 text-xs text-white/60 hover:text-white"
|
||||||
|
>
|
||||||
Очистить все
|
Очистить все
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
@ -1530,7 +2029,9 @@ export function NavigationDemo() {
|
|||||||
|
|
||||||
{/* Quick Filters */}
|
{/* Quick Filters */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-white/90 text-sm font-medium mb-3">Быстрые фильтры</h4>
|
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||||
|
Быстрые фильтры
|
||||||
|
</h4>
|
||||||
<div className="glass-card p-3 rounded-xl border border-white/10">
|
<div className="glass-card p-3 rounded-xl border border-white/10">
|
||||||
<div className="flex items-center space-x-2 flex-wrap">
|
<div className="flex items-center space-x-2 flex-wrap">
|
||||||
<Button variant="glass" size="sm" className="h-8">
|
<Button variant="glass" size="sm" className="h-8">
|
||||||
|
|||||||
Reference in New Issue
Block a user