Merge branch 'main' of https://gittea.biveki.ru/Sfera/sfera
This commit is contained in:
Bivekich
@ -177,6 +177,180 @@
|
||||
oklch(0.15 0.12 330) 100%);
|
||||
}
|
||||
|
||||
.gradient-sunset {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.75 0.25 45) 0%,
|
||||
oklch(0.70 0.28 25) 30%,
|
||||
oklch(0.68 0.30 355) 70%,
|
||||
oklch(0.65 0.32 320) 100%);
|
||||
}
|
||||
|
||||
.gradient-ocean {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.65 0.22 220) 0%,
|
||||
oklch(0.68 0.25 200) 30%,
|
||||
oklch(0.70 0.28 180) 70%,
|
||||
oklch(0.72 0.30 160) 100%);
|
||||
}
|
||||
|
||||
.gradient-emerald {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.70 0.28 150) 0%,
|
||||
oklch(0.72 0.30 140) 30%,
|
||||
oklch(0.68 0.25 160) 70%,
|
||||
oklch(0.65 0.22 170) 100%);
|
||||
}
|
||||
|
||||
.gradient-cosmic {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.45 0.35 270) 0%,
|
||||
oklch(0.55 0.40 300) 25%,
|
||||
oklch(0.65 0.30 330) 50%,
|
||||
oklch(0.50 0.35 250) 75%,
|
||||
oklch(0.40 0.30 280) 100%);
|
||||
}
|
||||
|
||||
.gradient-fire {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.70 0.35 40) 0%,
|
||||
oklch(0.75 0.40 20) 30%,
|
||||
oklch(0.80 0.35 10) 60%,
|
||||
oklch(0.65 0.30 50) 100%);
|
||||
}
|
||||
|
||||
.gradient-aurora {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.60 0.25 180) 0%,
|
||||
oklch(0.70 0.30 160) 20%,
|
||||
oklch(0.75 0.35 140) 40%,
|
||||
oklch(0.65 0.28 200) 60%,
|
||||
oklch(0.55 0.32 220) 80%,
|
||||
oklch(0.60 0.25 180) 100%);
|
||||
}
|
||||
|
||||
/* Кастомные варианты на основе космического градиента */
|
||||
.gradient-corporate {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.25 0.15 240) 0%,
|
||||
oklch(0.30 0.18 220) 30%,
|
||||
oklch(0.35 0.20 200) 70%,
|
||||
oklch(0.28 0.16 260) 100%);
|
||||
}
|
||||
|
||||
.gradient-nebula {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.20 0.40 290) 0%,
|
||||
oklch(0.35 0.45 310) 20%,
|
||||
oklch(0.50 0.35 330) 40%,
|
||||
oklch(0.40 0.40 270) 60%,
|
||||
oklch(0.25 0.38 250) 80%,
|
||||
oklch(0.15 0.35 280) 100%);
|
||||
}
|
||||
|
||||
.gradient-galaxy {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.15 0.25 270) 0%,
|
||||
oklch(0.25 0.30 300) 15%,
|
||||
oklch(0.45 0.35 320) 30%,
|
||||
oklch(0.20 0.28 250) 45%,
|
||||
oklch(0.35 0.32 280) 60%,
|
||||
oklch(0.10 0.20 290) 75%,
|
||||
oklch(0.18 0.25 260) 100%);
|
||||
}
|
||||
|
||||
.gradient-starfield {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.08 0.15 270) 0%,
|
||||
oklch(0.12 0.20 290) 25%,
|
||||
oklch(0.20 0.25 310) 50%,
|
||||
oklch(0.15 0.18 250) 75%,
|
||||
oklch(0.05 0.12 280) 100%);
|
||||
}
|
||||
|
||||
.gradient-quantum {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.40 0.38 280) 0%,
|
||||
oklch(0.55 0.42 260) 20%,
|
||||
oklch(0.70 0.35 240) 40%,
|
||||
oklch(0.45 0.40 300) 60%,
|
||||
oklch(0.30 0.35 320) 80%,
|
||||
oklch(0.50 0.38 270) 100%);
|
||||
}
|
||||
|
||||
.gradient-void {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.05 0.08 270) 0%,
|
||||
oklch(0.08 0.12 290) 30%,
|
||||
oklch(0.12 0.15 250) 60%,
|
||||
oklch(0.06 0.10 310) 100%);
|
||||
}
|
||||
|
||||
.gradient-supernova {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.65 0.40 280) 0%,
|
||||
oklch(0.80 0.35 260) 20%,
|
||||
oklch(0.75 0.45 300) 40%,
|
||||
oklch(0.85 0.38 240) 60%,
|
||||
oklch(0.60 0.42 320) 80%,
|
||||
oklch(0.70 0.40 270) 100%);
|
||||
}
|
||||
|
||||
/* Утонченные варианты с акцентами */
|
||||
.gradient-corporate-accent {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.25 0.08 240) 0%,
|
||||
oklch(0.28 0.10 220) 100%);
|
||||
}
|
||||
|
||||
.gradient-nebula-accent {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.30 0.20 290) 0%,
|
||||
oklch(0.35 0.25 310) 100%);
|
||||
}
|
||||
|
||||
.gradient-galaxy-accent {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.25 0.15 270) 0%,
|
||||
oklch(0.30 0.18 300) 50%,
|
||||
oklch(0.28 0.16 250) 100%);
|
||||
}
|
||||
|
||||
.gradient-starfield-accent {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.15 0.08 270) 0%,
|
||||
oklch(0.18 0.12 290) 100%);
|
||||
}
|
||||
|
||||
.gradient-quantum-accent {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.35 0.20 280) 0%,
|
||||
oklch(0.40 0.25 260) 100%);
|
||||
}
|
||||
|
||||
.gradient-void-accent {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.12 0.05 270) 0%,
|
||||
oklch(0.15 0.08 290) 100%);
|
||||
}
|
||||
|
||||
.gradient-supernova-accent {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.45 0.25 280) 0%,
|
||||
oklch(0.50 0.30 260) 100%);
|
||||
}
|
||||
|
||||
/* Восхитительный премиум градиент */
|
||||
.gradient-ethereal {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.15 0.08 270) 0%,
|
||||
oklch(0.20 0.12 290) 15%,
|
||||
oklch(0.25 0.15 310) 30%,
|
||||
oklch(0.18 0.10 250) 45%,
|
||||
oklch(0.22 0.14 330) 60%,
|
||||
oklch(0.16 0.09 280) 75%,
|
||||
oklch(0.12 0.06 260) 100%);
|
||||
}
|
||||
|
||||
.text-gradient-bright {
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.85 0.35 315) 0%,
|
||||
|
||||
@ -206,6 +206,150 @@ export function ColorsDemo() {
|
||||
<div className="text-white text-xs font-mono">bg-gradient-smooth</div>
|
||||
<div className="text-white/60 text-xs">Темный градиент для фона</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>
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
|
||||
import {
|
||||
Layout,
|
||||
Sidebar as SidebarIcon,
|
||||
Monitor,
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import {
|
||||
Layout,
|
||||
Sidebar as SidebarIcon,
|
||||
Monitor,
|
||||
Smartphone,
|
||||
Menu,
|
||||
ChevronRight,
|
||||
@ -16,8 +16,8 @@ import {
|
||||
Users,
|
||||
MessageCircle,
|
||||
Building,
|
||||
Plus
|
||||
} from 'lucide-react'
|
||||
Plus,
|
||||
} from "lucide-react";
|
||||
|
||||
export function LayoutsDemo() {
|
||||
return (
|
||||
@ -30,7 +30,9 @@ export function LayoutsDemo() {
|
||||
<CardContent className="space-y-6">
|
||||
{/* Sidebar Layout */}
|
||||
<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="h-40 bg-white/5 rounded-lg border border-white/10 flex">
|
||||
{/* Sidebar */}
|
||||
@ -66,7 +68,9 @@ export function LayoutsDemo() {
|
||||
|
||||
{/* Full Sidebar Layout */}
|
||||
<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="h-40 bg-white/5 rounded-lg border border-white/10 flex">
|
||||
{/* Full Sidebar */}
|
||||
@ -113,7 +117,9 @@ export function LayoutsDemo() {
|
||||
|
||||
{/* Grid Layout */}
|
||||
<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="h-32 bg-white/5 rounded-lg border border-white/10 p-3">
|
||||
<div className="grid grid-cols-3 gap-2 h-full">
|
||||
@ -133,7 +139,9 @@ export function LayoutsDemo() {
|
||||
|
||||
{/* Split Layout */}
|
||||
<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="h-40 bg-white/5 rounded-lg border border-white/10 flex">
|
||||
{/* Left Panel */}
|
||||
@ -141,7 +149,10 @@ export function LayoutsDemo() {
|
||||
<div className="h-3 bg-white/30 rounded mb-3"></div>
|
||||
<div className="space-y-2">
|
||||
{[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="flex-1">
|
||||
<div className="h-2 bg-white/30 rounded mb-1"></div>
|
||||
@ -188,8 +199,12 @@ export function LayoutsDemo() {
|
||||
{/* Left Side - Branding */}
|
||||
<div className="w-1/2 p-6 flex flex-col justify-center">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-gradient-bright mb-2">SferaV</div>
|
||||
<div className="text-white/70 text-sm mb-4">Управление бизнесом</div>
|
||||
<div className="text-2xl font-bold text-gradient-bright mb-2">
|
||||
SferaV
|
||||
</div>
|
||||
<div className="text-white/70 text-sm mb-4">
|
||||
Управление бизнесом
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<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="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="text-xs text-white/60 text-center">Sidebar</div>
|
||||
<div className="text-xs text-white/60 text-center">
|
||||
Sidebar
|
||||
</div>
|
||||
</div>
|
||||
<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="bg-white/10 rounded"></div>
|
||||
<div className="bg-white/10 rounded"></div>
|
||||
@ -297,25 +316,41 @@ export function LayoutsDemo() {
|
||||
<CardContent className="space-y-6">
|
||||
{/* Mini Sidebar */}
|
||||
<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="w-16 glass-sidebar rounded-lg p-2 space-y-2">
|
||||
<div className="flex items-center justify-center">
|
||||
<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>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Button variant="glass" size="icon" className="w-12 h-10">
|
||||
<Home className="h-4 w-4" />
|
||||
</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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</Button>
|
||||
</div>
|
||||
@ -328,41 +363,62 @@ export function LayoutsDemo() {
|
||||
|
||||
{/* Full Sidebar */}
|
||||
<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="w-56 glass-sidebar rounded-lg p-4 space-y-4">
|
||||
{/* Profile */}
|
||||
<div className="flex items-center space-x-3 pb-4 border-b border-white/10">
|
||||
<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>
|
||||
<div className="flex-1">
|
||||
<div className="text-white font-medium text-sm">SferaV Inc</div>
|
||||
<Badge variant="outline" className="border-primary/50 text-primary text-xs">
|
||||
<div className="text-white font-medium text-sm">
|
||||
SferaV Inc
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-primary/50 text-primary text-xs"
|
||||
>
|
||||
Фулфилмент
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="space-y-1">
|
||||
<Button variant="glass" className="w-full justify-start h-10">
|
||||
<Home className="h-4 w-4 mr-3" />
|
||||
Главная
|
||||
</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" />
|
||||
Сотрудники
|
||||
</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" />
|
||||
Мессенджер
|
||||
</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" />
|
||||
Партнеры
|
||||
</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" />
|
||||
Настройки
|
||||
</Button>
|
||||
@ -376,6 +432,1134 @@ export function LayoutsDemo() {
|
||||
</CardContent>
|
||||
</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 */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
@ -384,14 +1568,22 @@ export function LayoutsDemo() {
|
||||
<CardContent className="space-y-6">
|
||||
{/* Container */}
|
||||
<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="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="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="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>
|
||||
@ -400,7 +1592,9 @@ export function LayoutsDemo() {
|
||||
|
||||
{/* Spacing */}
|
||||
<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="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||
<div className="text-xs text-white/60 mb-3">space-y-6</div>
|
||||
@ -423,5 +1617,5 @@ export function LayoutsDemo() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@ import {
|
||||
Smartphone,
|
||||
Monitor,
|
||||
Tablet,
|
||||
Clock
|
||||
Clock,
|
||||
} from "lucide-react";
|
||||
|
||||
export function NavigationDemo() {
|
||||
@ -651,6 +651,347 @@ export function NavigationDemo() {
|
||||
</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>
|
||||
</Card>
|
||||
|
||||
@ -772,32 +1113,38 @@ export function NavigationDemo() {
|
||||
<CardContent className="space-y-6">
|
||||
{/* Enhanced Tabs */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Улучшенные табы</h4>
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||
Улучшенные табы
|
||||
</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">
|
||||
<TabsTrigger
|
||||
value="nav"
|
||||
<TabsTrigger
|
||||
value="nav"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 rounded-lg font-medium transition-all duration-200"
|
||||
>
|
||||
<Home className="h-4 w-4 mr-2" />
|
||||
Навигация
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="forms"
|
||||
<TabsTrigger
|
||||
value="forms"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 rounded-lg font-medium transition-all duration-200"
|
||||
>
|
||||
<FileText className="h-4 w-4 mr-2" />
|
||||
Формы
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="data"
|
||||
<TabsTrigger
|
||||
value="data"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 rounded-lg font-medium transition-all duration-200"
|
||||
>
|
||||
<Database className="h-4 w-4 mr-2" />
|
||||
Данные
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="settings"
|
||||
<TabsTrigger
|
||||
value="settings"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 rounded-lg font-medium transition-all duration-200"
|
||||
>
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
@ -812,17 +1159,23 @@ export function NavigationDemo() {
|
||||
</div>
|
||||
<div>
|
||||
<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 className="space-y-3">
|
||||
<div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||||
<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 className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||||
<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>
|
||||
@ -835,7 +1188,9 @@ export function NavigationDemo() {
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
@ -848,7 +1203,9 @@ export function NavigationDemo() {
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
@ -861,7 +1218,9 @@ export function NavigationDemo() {
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
@ -871,18 +1230,30 @@ export function NavigationDemo() {
|
||||
|
||||
{/* Pill Tabs */}
|
||||
<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">
|
||||
<Button variant="glass" size="sm" className="rounded-full px-4">
|
||||
<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 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" />
|
||||
Клиенты
|
||||
</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" />
|
||||
Доставка
|
||||
</Button>
|
||||
@ -891,17 +1262,27 @@ export function NavigationDemo() {
|
||||
|
||||
{/* Segmented Control */}
|
||||
<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">
|
||||
<Button variant="glass" size="sm" className="rounded-lg">
|
||||
<Eye className="h-4 w-4 mr-2" />
|
||||
Просмотр
|
||||
</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" />
|
||||
Редактирование
|
||||
</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" />
|
||||
Настройки
|
||||
</Button>
|
||||
@ -910,25 +1291,39 @@ export function NavigationDemo() {
|
||||
|
||||
{/* Vertical Tabs */}
|
||||
<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="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" />
|
||||
Главная панель
|
||||
<ChevronRight className="h-4 w-4 ml-auto" />
|
||||
</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" />
|
||||
Управление пользователями
|
||||
<ChevronRight className="h-4 w-4 ml-auto" />
|
||||
</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" />
|
||||
Аналитика и отчеты
|
||||
<ChevronRight className="h-4 w-4 ml-auto" />
|
||||
</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" />
|
||||
Настройки системы
|
||||
<ChevronRight className="h-4 w-4 ml-auto" />
|
||||
@ -940,17 +1335,27 @@ export function NavigationDemo() {
|
||||
<Home className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-white font-semibold text-lg">Главная панель</h5>
|
||||
<p className="text-white/60">Обзор системы и быстрый доступ к функциям</p>
|
||||
<h5 className="text-white font-semibold text-lg">
|
||||
Главная панель
|
||||
</h5>
|
||||
<p className="text-white/60">
|
||||
Обзор системы и быстрый доступ к функциям
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<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-white/60 text-sm">Всего пользователей</div>
|
||||
<div className="text-2xl font-bold text-white mb-1">
|
||||
2,847
|
||||
</div>
|
||||
<div className="text-white/60 text-sm">
|
||||
Всего пользователей
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
@ -1308,23 +1713,34 @@ export function NavigationDemo() {
|
||||
<CardContent className="space-y-6">
|
||||
{/* Enhanced Breadcrumbs */}
|
||||
<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">
|
||||
<nav className="flex items-center space-x-2 text-sm">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-6 h-6 bg-primary/20 rounded-lg flex items-center justify-center">
|
||||
<Home className="h-3 w-3 text-primary" />
|
||||
</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>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
<Package className="h-3 w-3 text-orange-400" />
|
||||
</div>
|
||||
<span className="text-white font-semibold">iPhone 15 Pro Max</span>
|
||||
<span className="text-white font-semibold">
|
||||
iPhone 15 Pro Max
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
@ -1340,7 +1758,9 @@ export function NavigationDemo() {
|
||||
|
||||
{/* Interactive Breadcrumbs */}
|
||||
<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="flex items-center justify-between mb-3">
|
||||
<nav className="flex items-center space-x-2 text-sm">
|
||||
@ -1349,11 +1769,17 @@ export function NavigationDemo() {
|
||||
Назад
|
||||
</Button>
|
||||
<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>
|
||||
<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>
|
||||
<ChevronRight className="h-4 w-4 text-white/40" />
|
||||
@ -1364,10 +1790,16 @@ export function NavigationDemo() {
|
||||
</Button>
|
||||
</div>
|
||||
<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 товара
|
||||
</Badge>
|
||||
<Badge variant="outline" className="border-white/20 text-white/60">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-white/20 text-white/60"
|
||||
>
|
||||
Обновлено 2ч назад
|
||||
</Badge>
|
||||
</div>
|
||||
@ -1384,13 +1816,17 @@ export function NavigationDemo() {
|
||||
<CardContent className="space-y-6">
|
||||
{/* Enhanced Pagination */}
|
||||
<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="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<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 className="flex items-center space-x-2">
|
||||
<span className="text-white/60 text-sm">Показать:</span>
|
||||
@ -1405,12 +1841,38 @@ export function NavigationDemo() {
|
||||
Пред
|
||||
</Button>
|
||||
<div className="flex items-center space-x-1">
|
||||
<Button variant="glass" size="sm" className="h-8 w-8">1</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>
|
||||
<Button variant="glass" size="sm" className="h-8 w-8">
|
||||
1
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<Button variant="outline" size="sm" className="h-8">
|
||||
След
|
||||
@ -1423,7 +1885,9 @@ export function NavigationDemo() {
|
||||
|
||||
{/* Compact Pagination */}
|
||||
<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="flex items-center justify-center space-x-4">
|
||||
<Button variant="outline" size="sm" disabled className="h-8">
|
||||
@ -1432,9 +1896,27 @@ export function NavigationDemo() {
|
||||
<div className="flex items-center space-x-2">
|
||||
<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">
|
||||
<Button variant="ghost" 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>
|
||||
<Button
|
||||
variant="ghost"
|
||||
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>
|
||||
<span className="text-white/70 text-sm">из 24</span>
|
||||
</div>
|
||||
@ -1447,7 +1929,9 @@ export function NavigationDemo() {
|
||||
|
||||
{/* Load More Pattern */}
|
||||
<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="space-y-3">
|
||||
<div className="text-white/70 text-sm">
|
||||
@ -1472,7 +1956,9 @@ export function NavigationDemo() {
|
||||
<CardContent className="space-y-6">
|
||||
{/* Advanced Filter Bar */}
|
||||
<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="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
@ -1498,7 +1984,7 @@ export function NavigationDemo() {
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="relative">
|
||||
<Search className="h-4 w-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40" />
|
||||
<input
|
||||
<input
|
||||
className="bg-white/5 border border-white/10 rounded-lg pl-10 pr-4 py-2 text-white text-sm placeholder-white/40 focus:outline-none focus:border-primary/50 w-64"
|
||||
placeholder="Поиск товаров..."
|
||||
/>
|
||||
@ -1509,19 +1995,32 @@ export function NavigationDemo() {
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</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>
|
||||
</div>
|
||||
@ -1530,7 +2029,9 @@ export function NavigationDemo() {
|
||||
|
||||
{/* Quick Filters */}
|
||||
<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="flex items-center space-x-2 flex-wrap">
|
||||
<Button variant="glass" size="sm" className="h-8">
|
||||
|
||||
Reference in New Issue
Block a user