Compare commits

..

2 Commits

View File

@ -1,16 +1,17 @@
"use client" "use client";
import { useState } from 'react' import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from '@/components/ui/badge' import { Badge } from "@/components/ui/badge";
import { Button } from '@/components/ui/button' import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from '@/components/ui/avatar' import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Progress } from '@/components/ui/progress' import { Progress } from "@/components/ui/progress";
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { import { Switch } from "@/components/ui/switch";
Home, import {
Users, Home,
MessageCircle, Users,
MessageCircle,
Settings, Settings,
Building, Building,
Package, Package,
@ -18,6 +19,8 @@ import {
Store, Store,
ChevronRight, ChevronRight,
ChevronLeft, ChevronLeft,
ChevronDown,
ChevronUp,
Menu, Menu,
X, X,
Search, Search,
@ -25,15 +28,632 @@ import {
ArrowLeft, ArrowLeft,
ArrowRight, ArrowRight,
MoreHorizontal, MoreHorizontal,
Check Check,
} from 'lucide-react' Shield,
BarChart3,
Wallet,
FileText,
Calendar,
HelpCircle,
LogOut,
Sun,
Moon,
Zap,
Globe,
Heart,
Star,
Filter,
Download,
Upload,
Eye,
EyeOff,
PanelLeftClose,
PanelLeftOpen,
Layers,
Database,
Cloud,
Smartphone,
Monitor,
Tablet,
Clock
} from "lucide-react";
export function NavigationDemo() { export function NavigationDemo() {
const [activeTab, setActiveTab] = useState('nav') const [activeTab, setActiveTab] = useState("nav");
const [currentStep, setCurrentStep] = useState(2) const [currentStep, setCurrentStep] = useState(2);
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
const [expandedMenus, setExpandedMenus] = useState<string[]>(["analytics"]);
const [darkMode, setDarkMode] = useState(true);
const [notifications, setNotifications] = useState(true);
const toggleMenu = (menuId: string) => {
setExpandedMenus((prev) =>
prev.includes(menuId)
? prev.filter((id) => id !== menuId)
: [...prev, menuId]
);
};
return ( return (
<div className="space-y-6"> <div className="space-y-6">
{/* Современные сайдбары */}
<Card className="glass-card border-white/10">
<CardHeader>
<CardTitle className="text-white">Современные сайдбары</CardTitle>
</CardHeader>
<CardContent className="space-y-8">
{/* Premium Sidebar with Profile */}
<div>
<h4 className="text-white/90 text-sm font-medium mb-3">
Премиум сайдбар с профилем
</h4>
<div className="w-72 glass-sidebar rounded-xl p-4 space-y-6">
{/* Profile Section */}
<div className="glass-card border-white/10 p-4 rounded-lg">
<div className="flex items-center space-x-3 mb-3">
<Avatar className="h-12 w-12 bg-gradient-to-br from-primary/50 to-purple-500/50 border-2 border-white/20">
<AvatarFallback className="bg-transparent text-white font-semibold">
SF
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<p className="text-white font-semibold truncate">
Александр Смирнов
</p>
<p className="text-white/60 text-sm truncate">
alex@sferav.com
</p>
</div>
<Button variant="ghost" size="icon" className="h-8 w-8">
<Settings className="h-4 w-4 text-white/70" />
</Button>
</div>
<div className="flex items-center justify-between text-xs">
<div className="flex items-center space-x-2">
<div className="w-2 h-2 bg-green-400 rounded-full"></div>
<span className="text-white/70">Онлайн</span>
</div>
<Badge
variant="secondary"
className="bg-primary/20 text-primary-foreground text-xs"
>
Pro
</Badge>
</div>
</div>
{/* Navigation */}
<nav className="space-y-1">
<Button
variant="glass"
className="w-full justify-start h-11 font-medium"
>
<Home className="h-5 w-5 mr-3" />
Главная
<Badge className="ml-auto bg-primary/30 text-primary-foreground text-xs">
3
</Badge>
</Button>
<Button
variant="ghost"
className="w-full justify-start h-11 text-white/70 hover:text-white font-medium"
>
<BarChart3 className="h-5 w-5 mr-3" />
Аналитика
</Button>
<Button
variant="ghost"
className="w-full justify-start h-11 text-white/70 hover:text-white font-medium"
>
<Store className="h-5 w-5 mr-3" />
Маркетплейс
<Badge className="ml-auto bg-orange-500/20 text-orange-300 text-xs">
Новое
</Badge>
</Button>
<Button
variant="ghost"
className="w-full justify-start h-11 text-white/70 hover:text-white font-medium"
>
<MessageCircle className="h-5 w-5 mr-3" />
Сообщения
<Badge className="ml-auto bg-red-500/20 text-red-300 text-xs">
12
</Badge>
</Button>
<Button
variant="ghost"
className="w-full justify-start h-11 text-white/70 hover:text-white font-medium"
>
<Users className="h-5 w-5 mr-3" />
Команда
</Button>
</nav>
{/* Quick Actions */}
<div className="space-y-3">
<div className="flex items-center justify-between">
<span className="text-white/60 text-xs font-medium uppercase tracking-wider">
Быстрые действия
</span>
</div>
<div className="grid grid-cols-2 gap-2">
<Button
variant="outline"
size="sm"
className="h-10 glass-secondary border-white/10"
>
<Upload className="h-4 w-4 mr-2" />
Загрузить
</Button>
<Button
variant="outline"
size="sm"
className="h-10 glass-secondary border-white/10"
>
<Download className="h-4 w-4 mr-2" />
Скачать
</Button>
</div>
</div>
{/* Footer */}
<div className="pt-4 border-t border-white/10 space-y-2">
<Button
variant="ghost"
className="w-full justify-start h-9 text-white/70 text-sm"
>
<HelpCircle className="h-4 w-4 mr-3" />
Помощь
</Button>
<Button
variant="ghost"
className="w-full justify-start h-9 text-white/70 text-sm"
>
<LogOut className="h-4 w-4 mr-3" />
Выйти
</Button>
</div>
</div>
</div>
{/* Collapsible Multi-level Sidebar */}
<div>
<h4 className="text-white/90 text-sm font-medium mb-3">
Многоуровневый сайдбар с коллапсом
</h4>
<div
className={`${
sidebarCollapsed ? "w-16" : "w-72"
} transition-all duration-300 glass-sidebar rounded-xl p-4 space-y-4`}
>
{/* Header with Toggle */}
<div className="flex items-center justify-between">
{!sidebarCollapsed && (
<div className="flex items-center space-x-2">
<div className="w-8 h-8 bg-primary/30 rounded-lg flex items-center justify-center">
<Zap className="h-5 w-5 text-primary" />
</div>
<span className="text-white font-bold">SferaV</span>
</div>
)}
<Button
variant="ghost"
size="icon"
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
className="h-8 w-8"
>
{sidebarCollapsed ? (
<PanelLeftOpen className="h-4 w-4 text-white/70" />
) : (
<PanelLeftClose className="h-4 w-4 text-white/70" />
)}
</Button>
</div>
{/* Navigation */}
<nav className="space-y-1">
{/* Dashboard */}
<Button
variant="glass"
className={`w-full ${
sidebarCollapsed ? "justify-center" : "justify-start"
} h-10`}
>
<Home className="h-4 w-4" />
{!sidebarCollapsed && (
<span className="ml-3">Панель управления</span>
)}
</Button>
{/* Analytics with Submenu */}
<div>
<Button
variant="ghost"
className={`w-full ${
sidebarCollapsed ? "justify-center" : "justify-start"
} h-10 text-white/70 hover:text-white`}
onClick={() => !sidebarCollapsed && toggleMenu("analytics")}
>
<BarChart3 className="h-4 w-4" />
{!sidebarCollapsed && (
<>
<span className="ml-3 flex-1 text-left">Аналитика</span>
{expandedMenus.includes("analytics") ? (
<ChevronUp className="h-4 w-4" />
) : (
<ChevronDown className="h-4 w-4" />
)}
</>
)}
</Button>
{!sidebarCollapsed && expandedMenus.includes("analytics") && (
<div className="ml-4 mt-1 space-y-1 border-l border-white/10 pl-4">
<Button
variant="ghost"
size="sm"
className="w-full justify-start h-8 text-white/60 hover:text-white text-sm"
>
<BarChart3 className="h-3 w-3 mr-2" />
Отчеты
</Button>
<Button
variant="ghost"
size="sm"
className="w-full justify-start h-8 text-white/60 hover:text-white text-sm"
>
<Wallet className="h-3 w-3 mr-2" />
Финансы
</Button>
<Button
variant="ghost"
size="sm"
className="w-full justify-start h-8 text-white/60 hover:text-white text-sm"
>
<Users className="h-3 w-3 mr-2" />
Пользователи
</Button>
</div>
)}
</div>
{/* Projects with Submenu */}
<div>
<Button
variant="ghost"
className={`w-full ${
sidebarCollapsed ? "justify-center" : "justify-start"
} h-10 text-white/70 hover:text-white`}
onClick={() => !sidebarCollapsed && toggleMenu("projects")}
>
<Layers className="h-4 w-4" />
{!sidebarCollapsed && (
<>
<span className="ml-3 flex-1 text-left">Проекты</span>
{expandedMenus.includes("projects") ? (
<ChevronUp className="h-4 w-4" />
) : (
<ChevronDown className="h-4 w-4" />
)}
</>
)}
</Button>
{!sidebarCollapsed && expandedMenus.includes("projects") && (
<div className="ml-4 mt-1 space-y-1 border-l border-white/10 pl-4">
<Button
variant="ghost"
size="sm"
className="w-full justify-start h-8 text-white/60 hover:text-white text-sm"
>
<Package className="h-3 w-3 mr-2" />
Активные
<Badge className="ml-auto bg-green-500/20 text-green-300 text-xs">
5
</Badge>
</Button>
<Button
variant="ghost"
size="sm"
className="w-full justify-start h-8 text-white/60 hover:text-white text-sm"
>
<Calendar className="h-3 w-3 mr-2" />
Архив
</Button>
</div>
)}
</div>
{/* Other menu items */}
<Button
variant="ghost"
className={`w-full ${
sidebarCollapsed ? "justify-center" : "justify-start"
} h-10 text-white/70 hover:text-white`}
>
<MessageCircle className="h-4 w-4" />
{!sidebarCollapsed && <span className="ml-3">Сообщения</span>}
{!sidebarCollapsed && (
<Badge className="ml-auto bg-red-500/20 text-red-300 text-xs">
3
</Badge>
)}
</Button>
<Button
variant="ghost"
className={`w-full ${
sidebarCollapsed ? "justify-center" : "justify-start"
} h-10 text-white/70 hover:text-white`}
>
<Settings className="h-4 w-4" />
{!sidebarCollapsed && <span className="ml-3">Настройки</span>}
</Button>
</nav>
{/* Settings Section */}
{!sidebarCollapsed && (
<div className="pt-4 border-t border-white/10 space-y-3">
<div className="flex items-center justify-between">
<span className="text-white/60 text-xs font-medium uppercase tracking-wider">
Настройки
</span>
</div>
<div className="space-y-2">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<Moon className="h-4 w-4 text-white/60" />
<span className="text-white/70 text-sm">
Темная тема
</span>
</div>
<Switch
checked={darkMode}
onCheckedChange={setDarkMode}
/>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<Bell className="h-4 w-4 text-white/60" />
<span className="text-white/70 text-sm">
Уведомления
</span>
</div>
<Switch
checked={notifications}
onCheckedChange={setNotifications}
/>
</div>
</div>
</div>
)}
</div>
</div>
{/* Dashboard-style Sidebar */}
<div>
<h4 className="text-white/90 text-sm font-medium mb-3">
Дашборд сайдбар
</h4>
<div className="w-80 glass-sidebar rounded-xl p-6 space-y-6">
{/* Stats Overview */}
<div className="space-y-4">
<h3 className="text-white font-semibold text-lg">Обзор</h3>
<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">
1,234
</div>
<div className="text-white/60 text-xs">Заказы</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">
89K
</div>
<div className="text-white/60 text-xs">Доход</div>
</div>
</div>
</div>
{/* Quick Navigation */}
<div className="space-y-3">
<h4 className="text-white/70 text-sm font-medium">
Быстрая навигация
</h4>
<div className="space-y-1">
<Button
variant="glass"
className="w-full justify-start h-12 text-left"
>
<div className="flex items-center">
<div className="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center mr-3">
<Store className="h-5 w-5 text-primary" />
</div>
<div>
<div className="text-white font-medium">
Маркетплейс
</div>
<div className="text-white/60 text-xs">
Управление товарами
</div>
</div>
</div>
</Button>
<Button
variant="ghost"
className="w-full justify-start h-12 text-left text-white/70 hover:text-white"
>
<div className="flex items-center">
<div className="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center mr-3">
<Users className="h-5 w-5 text-blue-400" />
</div>
<div>
<div className="font-medium">Команда</div>
<div className="text-white/60 text-xs">
15 активных участников
</div>
</div>
</div>
</Button>
<Button
variant="ghost"
className="w-full justify-start h-12 text-left text-white/70 hover:text-white"
>
<div className="flex items-center">
<div className="w-10 h-10 bg-purple-500/20 rounded-lg flex items-center justify-center mr-3">
<BarChart3 className="h-5 w-5 text-purple-400" />
</div>
<div>
<div className="font-medium">Аналитика</div>
<div className="text-white/60 text-xs">
Отчеты и метрики
</div>
</div>
</div>
</Button>
</div>
</div>
{/* Recent Activity */}
<div className="space-y-3">
<h4 className="text-white/70 text-sm font-medium">
Последняя активность
</h4>
<div className="space-y-2">
<div className="flex items-center space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors">
<div className="w-2 h-2 bg-green-400 rounded-full"></div>
<div className="flex-1 min-w-0">
<p className="text-white/80 text-sm">Новый заказ #1234</p>
<p className="text-white/50 text-xs">2 минуты назад</p>
</div>
</div>
<div className="flex items-center space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors">
<div className="w-2 h-2 bg-blue-400 rounded-full"></div>
<div className="flex-1 min-w-0">
<p className="text-white/80 text-sm">
Сообщение от клиента
</p>
<p className="text-white/50 text-xs">5 минут назад</p>
</div>
</div>
<div className="flex items-center space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors">
<div className="w-2 h-2 bg-orange-400 rounded-full"></div>
<div className="flex-1 min-w-0">
<p className="text-white/80 text-sm">Обновление товара</p>
<p className="text-white/50 text-xs">10 минут назад</p>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Adaptive Sidebar Showcase */}
<div>
<h4 className="text-white/90 text-sm font-medium mb-3">
Адаптивные варианты
</h4>
<div className="flex space-x-4">
{/* Desktop */}
<div className="space-y-2">
<div className="flex items-center space-x-2 mb-2">
<Monitor className="h-4 w-4 text-white/60" />
<span className="text-white/60 text-xs">Desktop</span>
</div>
<div className="w-56 glass-sidebar rounded-lg p-3 space-y-2">
<Button
variant="glass"
className="w-full justify-start h-9 text-sm"
>
<Home className="h-4 w-4 mr-2" />
Главная
</Button>
<Button
variant="ghost"
className="w-full justify-start h-9 text-sm text-white/70"
>
<Store className="h-4 w-4 mr-2" />
Маркет
</Button>
<Button
variant="ghost"
className="w-full justify-start h-9 text-sm text-white/70"
>
<Users className="h-4 w-4 mr-2" />
Команда
</Button>
</div>
</div>
{/* Tablet */}
<div className="space-y-2">
<div className="flex items-center space-x-2 mb-2">
<Tablet className="h-4 w-4 text-white/60" />
<span className="text-white/60 text-xs">Tablet</span>
</div>
<div className="w-14 glass-sidebar rounded-lg p-2 space-y-2">
<Button variant="glass" size="icon" className="w-10 h-10">
<Home className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
className="w-10 h-10 text-white/70"
>
<Store className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
className="w-10 h-10 text-white/70"
>
<Users className="h-4 w-4" />
</Button>
</div>
</div>
{/* Mobile */}
<div className="space-y-2">
<div className="flex items-center space-x-2 mb-2">
<Smartphone className="h-4 w-4 text-white/60" />
<span className="text-white/60 text-xs">Mobile</span>
</div>
<div className="w-48 glass-card rounded-lg p-2">
<div className="flex justify-between">
<Button
variant="glass"
className="flex-col h-12 text-xs flex-1 mx-1"
>
<Home className="h-4 w-4 mb-1" />
Главная
</Button>
<Button
variant="ghost"
className="flex-col h-12 text-xs text-white/70 flex-1 mx-1"
>
<Store className="h-4 w-4 mb-1" />
Маркет
</Button>
<Button
variant="ghost"
className="flex-col h-12 text-xs text-white/70 flex-1 mx-1"
>
<Users className="h-4 w-4 mb-1" />
Команда
</Button>
</div>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
{/* Навигационное меню */} {/* Навигационное меню */}
<Card className="glass-card border-white/10"> <Card className="glass-card border-white/10">
<CardHeader> <CardHeader>
@ -42,7 +662,9 @@ export function NavigationDemo() {
<CardContent className="space-y-6"> <CardContent className="space-y-6">
{/* Horizontal Navigation */} {/* Horizontal Navigation */}
<div> <div>
<h4 className="text-white/90 text-sm font-medium mb-3">Горизонтальная навигация</h4> <h4 className="text-white/90 text-sm font-medium mb-3">
Горизонтальная навигация
</h4>
<div className="glass-card p-4 rounded-lg border border-white/10"> <div className="glass-card p-4 rounded-lg border border-white/10">
<nav className="flex items-center justify-between"> <nav className="flex items-center justify-between">
<div className="flex items-center space-x-6"> <div className="flex items-center space-x-6">
@ -51,10 +673,18 @@ export function NavigationDemo() {
<span className="text-white font-semibold">SferaV</span> <span className="text-white font-semibold">SferaV</span>
</div> </div>
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<Button variant="glass" size="sm">Главная</Button> <Button variant="glass" size="sm">
<Button variant="ghost" size="sm" className="text-white/70">Маркет</Button> Главная
<Button variant="ghost" size="sm" className="text-white/70">Услуги</Button> </Button>
<Button variant="ghost" size="sm" className="text-white/70">Партнеры</Button> <Button variant="ghost" size="sm" className="text-white/70">
Маркет
</Button>
<Button variant="ghost" size="sm" className="text-white/70">
Услуги
</Button>
<Button variant="ghost" size="sm" className="text-white/70">
Партнеры
</Button>
</div> </div>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
@ -65,73 +695,20 @@ export function NavigationDemo() {
<Bell className="h-4 w-4 text-white/70" /> <Bell className="h-4 w-4 text-white/70" />
</Button> </Button>
<Avatar className="h-8 w-8 bg-primary/30"> <Avatar className="h-8 w-8 bg-primary/30">
<AvatarFallback className="bg-primary/30 text-white text-xs">SF</AvatarFallback> <AvatarFallback className="bg-primary/30 text-white text-xs">
SF
</AvatarFallback>
</Avatar> </Avatar>
</div> </div>
</nav> </nav>
</div> </div>
</div> </div>
{/* Vertical Sidebar Navigation */}
<div>
<h4 className="text-white/90 text-sm font-medium mb-3">Вертикальная навигация (Sidebar)</h4>
<div className="flex space-x-4">
{/* Compact Sidebar */}
<div className="w-16 glass-sidebar rounded-lg p-2 space-y-2">
<div className="text-xs text-white/60 text-center mb-2">Mini</div>
<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">
<Store className="h-4 w-4" />
</Button>
<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">
<Users className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="w-12 h-10 text-white/60">
<Settings className="h-4 w-4" />
</Button>
</div>
{/* Full Sidebar */}
<div className="w-56 glass-sidebar rounded-lg p-4 space-y-4">
<div className="text-xs text-white/60 mb-2">Full Sidebar</div>
<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">
<Store className="h-4 w-4 mr-3" />
Маркет
</Button>
<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">
<Users className="h-4 w-4 mr-3" />
Сотрудники
</Button>
<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">
<Settings className="h-4 w-4 mr-3" />
Настройки
</Button>
</div>
</div>
</div>
</div>
{/* Mobile Navigation */} {/* Mobile Navigation */}
<div> <div>
<h4 className="text-white/90 text-sm font-medium mb-3">Мобильная навигация</h4> <h4 className="text-white/90 text-sm font-medium mb-3">
Мобильная навигация
</h4>
<div className="w-64 mx-auto"> <div className="w-64 mx-auto">
{/* Mobile Header */} {/* Mobile Header */}
<div className="glass-card p-3 rounded-t-lg border border-white/10"> <div className="glass-card p-3 rounded-t-lg border border-white/10">
@ -152,19 +729,31 @@ export function NavigationDemo() {
<Home className="h-4 w-4 mb-1" /> <Home className="h-4 w-4 mb-1" />
Главная Главная
</Button> </Button>
<Button variant="ghost" className="flex-col h-12 text-xs text-white/70"> <Button
variant="ghost"
className="flex-col h-12 text-xs text-white/70"
>
<Store className="h-4 w-4 mb-1" /> <Store className="h-4 w-4 mb-1" />
Маркет Маркет
</Button> </Button>
<Button variant="ghost" className="flex-col h-12 text-xs text-white/70"> <Button
variant="ghost"
className="flex-col h-12 text-xs text-white/70"
>
<MessageCircle className="h-4 w-4 mb-1" /> <MessageCircle className="h-4 w-4 mb-1" />
Чат Чат
</Button> </Button>
<Button variant="ghost" className="flex-col h-12 text-xs text-white/70"> <Button
variant="ghost"
className="flex-col h-12 text-xs text-white/70"
>
<Users className="h-4 w-4 mb-1" /> <Users className="h-4 w-4 mb-1" />
Команда Команда
</Button> </Button>
<Button variant="ghost" className="flex-col h-12 text-xs text-white/70"> <Button
variant="ghost"
className="flex-col h-12 text-xs text-white/70"
>
<Settings className="h-4 w-4 mb-1" /> <Settings className="h-4 w-4 mb-1" />
Еще Еще
</Button> </Button>
@ -175,80 +764,146 @@ export function NavigationDemo() {
</CardContent> </CardContent>
</Card> </Card>
{/* Табы */} {/* Табы и вкладки */}
<Card className="glass-card border-white/10"> <Card className="glass-card border-white/10">
<CardHeader> <CardHeader>
<CardTitle className="text-white">Табы и вкладки</CardTitle> <CardTitle className="text-white">Табы и вкладки</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <CardContent className="space-y-6">
{/* Basic Tabs */} {/* Enhanced Tabs */}
<div> <div>
<h4 className="text-white/90 text-sm font-medium mb-3">Базовые табы</h4> <h4 className="text-white/90 text-sm font-medium mb-3">Улучшенные табы</h4>
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsList className="grid w-full grid-cols-4 bg-white/5 backdrop-blur border-white/10"> <TabsList className="grid w-full grid-cols-4 bg-white/5 backdrop-blur border-white/10 p-1 rounded-xl h-12">
<TabsTrigger <TabsTrigger
value="nav" value="nav"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70" 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>
<TabsTrigger <TabsTrigger
value="forms" value="forms"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70" 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>
<TabsTrigger <TabsTrigger
value="data" value="data"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70" 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>
<TabsTrigger <TabsTrigger
value="settings" value="settings"
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70" 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" />
Настройки Настройки
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
<TabsContent value="nav" className="mt-4"> <TabsContent value="nav" className="mt-6">
<div className="glass-card p-4 rounded-lg border border-white/10"> <div className="glass-card p-6 rounded-xl border border-white/10">
<p className="text-white/80">Содержимое вкладки &quot;Навигация&quot;</p> <div className="flex items-center space-x-3 mb-4">
<div className="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
<Home className="h-5 w-5 text-primary" />
</div>
<div>
<h5 className="text-white font-semibold">Навигация</h5>
<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>
</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>
</div>
</div>
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="forms" className="mt-4"> <TabsContent value="forms" className="mt-6">
<div className="glass-card p-4 rounded-lg border border-white/10"> <div className="glass-card p-6 rounded-xl border border-white/10">
<p className="text-white/80">Содержимое вкладки &quot;Формы&quot;</p> <div className="flex items-center space-x-3 mb-4">
<div className="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center">
<FileText className="h-5 w-5 text-blue-400" />
</div>
<div>
<h5 className="text-white font-semibold">Формы</h5>
<p className="text-white/60 text-sm">Элементы для ввода и обработки данных</p>
</div>
</div>
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="data" className="mt-4"> <TabsContent value="data" className="mt-6">
<div className="glass-card p-4 rounded-lg border border-white/10"> <div className="glass-card p-6 rounded-xl border border-white/10">
<p className="text-white/80">Содержимое вкладки &quot;Данные&quot;</p> <div className="flex items-center space-x-3 mb-4">
<div className="w-10 h-10 bg-purple-500/20 rounded-lg flex items-center justify-center">
<Database className="h-5 w-5 text-purple-400" />
</div>
<div>
<h5 className="text-white font-semibold">Данные</h5>
<p className="text-white/60 text-sm">Компоненты для отображения данных</p>
</div>
</div>
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="settings" className="mt-4"> <TabsContent value="settings" className="mt-6">
<div className="glass-card p-4 rounded-lg border border-white/10"> <div className="glass-card p-6 rounded-xl border border-white/10">
<p className="text-white/80">Содержимое вкладки &quot;Настройки&quot;</p> <div className="flex items-center space-x-3 mb-4">
<div className="w-10 h-10 bg-orange-500/20 rounded-lg flex items-center justify-center">
<Settings className="h-5 w-5 text-orange-400" />
</div>
<div>
<h5 className="text-white font-semibold">Настройки</h5>
<p className="text-white/60 text-sm">Элементы управления настройками</p>
</div>
</div>
</div> </div>
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</div> </div>
{/* Icon Tabs */} {/* Pill Tabs */}
<div> <div>
<h4 className="text-white/90 text-sm font-medium mb-3">Табы с иконками</h4> <h4 className="text-white/90 text-sm font-medium mb-3">Табы-пилюли</h4>
<div className="flex space-x-1 glass-card p-1 rounded-lg border border-white/10 w-fit"> <div className="flex space-x-1 glass-card p-2 rounded-xl border border-white/10 w-fit">
<Button variant="glass" size="sm" className="space-x-2"> <Button variant="glass" size="sm" className="rounded-full px-4">
<Package className="h-4 w-4" /> <Package className="h-4 w-4 mr-2" />
<span>Товары</span> Товары
<Badge className="ml-2 bg-primary/30 text-primary-foreground text-xs">234</Badge>
</Button> </Button>
<Button variant="ghost" size="sm" className="space-x-2 text-white/70"> <Button variant="ghost" size="sm" className="rounded-full px-4 text-white/70 hover:text-white">
<Users className="h-4 w-4" /> <Users className="h-4 w-4 mr-2" />
<span>Клиенты</span> Клиенты
</Button> </Button>
<Button variant="ghost" size="sm" className="space-x-2 text-white/70"> <Button variant="ghost" size="sm" className="rounded-full px-4 text-white/70 hover:text-white">
<Truck className="h-4 w-4" /> <Truck className="h-4 w-4 mr-2" />
<span>Доставка</span> Доставка
</Button>
</div>
</div>
{/* Segmented Control */}
<div>
<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">
<FileText className="h-4 w-4 mr-2" />
Редактирование
</Button>
<Button variant="ghost" size="sm" className="rounded-lg text-white/70">
<Settings className="h-4 w-4 mr-2" />
Настройки
</Button> </Button>
</div> </div>
</div> </div>
@ -256,24 +911,49 @@ export function NavigationDemo() {
{/* Vertical Tabs */} {/* Vertical Tabs */}
<div> <div>
<h4 className="text-white/90 text-sm font-medium mb-3">Вертикальные табы</h4> <h4 className="text-white/90 text-sm font-medium mb-3">Вертикальные табы</h4>
<div className="flex space-x-4"> <div className="flex space-x-6">
<div className="w-48 space-y-1"> <div className="w-56 space-y-2">
<Button variant="glass" className="w-full justify-start h-10"> <Button variant="glass" className="w-full justify-start h-11 font-medium">
<Home className="h-4 w-4 mr-3" /> <Home className="h-4 w-4 mr-3" />
Главная панель Главная панель
<ChevronRight className="h-4 w-4 ml-auto" />
</Button> </Button>
<Button variant="ghost" className="w-full justify-start h-10 text-white/70"> <Button variant="ghost" className="w-full justify-start h-11 text-white/70 hover:text-white font-medium">
<Users className="h-4 w-4 mr-3" /> <Users className="h-4 w-4 mr-3" />
Управление пользователями Управление пользователями
<ChevronRight className="h-4 w-4 ml-auto" />
</Button> </Button>
<Button variant="ghost" className="w-full justify-start h-10 text-white/70"> <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">
<Settings className="h-4 w-4 mr-3" /> <Settings className="h-4 w-4 mr-3" />
Настройки системы Настройки системы
<ChevronRight className="h-4 w-4 ml-auto" />
</Button> </Button>
</div> </div>
<div className="flex-1 glass-card p-4 rounded-lg border border-white/10"> <div className="flex-1 glass-card p-6 rounded-xl border border-white/10">
<h5 className="text-white font-medium mb-2">Главная панель</h5> <div className="flex items-center space-x-3 mb-4">
<p className="text-white/70 text-sm">Содержимое выбранной вкладки отображается здесь</p> <div className="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
<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>
</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>
<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-white/60 text-sm">Активных сессий</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -283,23 +963,36 @@ export function NavigationDemo() {
{/* Breadcrumbs */} {/* Breadcrumbs */}
<Card className="glass-card border-white/10"> <Card className="glass-card border-white/10">
<CardHeader> <CardHeader>
<CardTitle className="text-white">Breadcrumbs (Хлебные крошки)</CardTitle> <CardTitle className="text-white">
Breadcrumbs (Хлебные крошки)
</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <CardContent className="space-y-6">
{/* Standard Breadcrumbs */} {/* Standard Breadcrumbs */}
<div> <div>
<h4 className="text-white/90 text-sm font-medium mb-3">Стандартные breadcrumbs</h4> <h4 className="text-white/90 text-sm font-medium mb-3">
Стандартные breadcrumbs
</h4>
<div className="glass-card p-4 rounded-lg border border-white/10"> <div className="glass-card p-4 rounded-lg border border-white/10">
<nav className="flex items-center space-x-2 text-sm"> <nav className="flex items-center space-x-2 text-sm">
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto"> <Button
variant="link"
className="text-white/70 hover:text-white p-0 h-auto"
>
Главная Главная
</Button> </Button>
<ChevronRight className="h-4 w-4 text-white/40" /> <ChevronRight className="h-4 w-4 text-white/40" />
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto"> <Button
variant="link"
className="text-white/70 hover:text-white p-0 h-auto"
>
Маркет Маркет
</Button> </Button>
<ChevronRight className="h-4 w-4 text-white/40" /> <ChevronRight className="h-4 w-4 text-white/40" />
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto"> <Button
variant="link"
className="text-white/70 hover:text-white p-0 h-auto"
>
Товары Товары
</Button> </Button>
<ChevronRight className="h-4 w-4 text-white/40" /> <ChevronRight className="h-4 w-4 text-white/40" />
@ -310,7 +1003,9 @@ export function NavigationDemo() {
{/* Breadcrumbs with Back */} {/* Breadcrumbs with Back */}
<div> <div>
<h4 className="text-white/90 text-sm font-medium mb-3">Breadcrumbs с кнопкой назад</h4> <h4 className="text-white/90 text-sm font-medium mb-3">
Breadcrumbs с кнопкой назад
</h4>
<div className="glass-card p-4 rounded-lg border border-white/10"> <div className="glass-card p-4 rounded-lg border border-white/10">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<Button variant="outline" size="sm"> <Button variant="outline" size="sm">
@ -318,11 +1013,17 @@ export function NavigationDemo() {
Назад Назад
</Button> </Button>
<nav className="flex items-center space-x-2 text-sm"> <nav className="flex items-center space-x-2 text-sm">
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto"> <Button
variant="link"
className="text-white/70 hover:text-white p-0 h-auto"
>
Склад Склад
</Button> </Button>
<ChevronRight className="h-4 w-4 text-white/40" /> <ChevronRight className="h-4 w-4 text-white/40" />
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto"> <Button
variant="link"
className="text-white/70 hover:text-white p-0 h-auto"
>
Категории Категории
</Button> </Button>
<ChevronRight className="h-4 w-4 text-white/40" /> <ChevronRight className="h-4 w-4 text-white/40" />
@ -342,7 +1043,9 @@ export function NavigationDemo() {
<CardContent className="space-y-6"> <CardContent className="space-y-6">
{/* Standard Pagination */} {/* Standard Pagination */}
<div> <div>
<h4 className="text-white/90 text-sm font-medium mb-3">Стандартная пагинация</h4> <h4 className="text-white/90 text-sm font-medium mb-3">
Стандартная пагинация
</h4>
<div className="glass-card p-4 rounded-lg border border-white/10"> <div className="glass-card p-4 rounded-lg border border-white/10">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="text-white/70 text-sm"> <div className="text-white/70 text-sm">
@ -352,11 +1055,21 @@ export function NavigationDemo() {
<Button variant="outline" size="sm" disabled> <Button variant="outline" size="sm" disabled>
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
<Button variant="glass" size="sm">1</Button> <Button variant="glass" size="sm">
<Button variant="ghost" size="sm" className="text-white/70">2</Button> 1
<Button variant="ghost" size="sm" className="text-white/70">3</Button> </Button>
<Button variant="ghost" size="sm" className="text-white/70">...</Button> <Button variant="ghost" size="sm" className="text-white/70">
<Button variant="ghost" size="sm" className="text-white/70">24</Button> 2
</Button>
<Button variant="ghost" size="sm" className="text-white/70">
3
</Button>
<Button variant="ghost" size="sm" className="text-white/70">
...
</Button>
<Button variant="ghost" size="sm" className="text-white/70">
24
</Button>
<Button variant="outline" size="sm"> <Button variant="outline" size="sm">
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
</Button> </Button>
@ -367,16 +1080,16 @@ export function NavigationDemo() {
{/* Simple Pagination */} {/* Simple Pagination */}
<div> <div>
<h4 className="text-white/90 text-sm font-medium mb-3">Простая пагинация</h4> <h4 className="text-white/90 text-sm font-medium mb-3">
Простая пагинация
</h4>
<div className="glass-card p-4 rounded-lg border border-white/10"> <div className="glass-card p-4 rounded-lg border border-white/10">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Button variant="outline" size="sm" disabled> <Button variant="outline" size="sm" disabled>
<ArrowLeft className="h-4 w-4 mr-2" /> <ArrowLeft className="h-4 w-4 mr-2" />
Предыдущая Предыдущая
</Button> </Button>
<div className="text-white/70 text-sm"> <div className="text-white/70 text-sm">Страница 1 из 24</div>
Страница 1 из 24
</div>
<Button variant="outline" size="sm"> <Button variant="outline" size="sm">
Следующая Следующая
<ArrowRight className="h-4 w-4 ml-2" /> <ArrowRight className="h-4 w-4 ml-2" />
@ -395,20 +1108,28 @@ export function NavigationDemo() {
<CardContent className="space-y-6"> <CardContent className="space-y-6">
{/* Step Progress */} {/* Step Progress */}
<div> <div>
<h4 className="text-white/90 text-sm font-medium mb-3">Прогресс выполнения шагов</h4> <h4 className="text-white/90 text-sm font-medium mb-3">
Прогресс выполнения шагов
</h4>
<div className="glass-card p-6 rounded-lg border border-white/10"> <div className="glass-card p-6 rounded-lg border border-white/10">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<Badge variant="secondary" className="glass-secondary text-white/80"> <Badge
variant="secondary"
className="glass-secondary text-white/80"
>
Шаг {currentStep} из 5 Шаг {currentStep} из 5
</Badge> </Badge>
<Badge variant="outline" className="glass-secondary text-white/60 border-white/20"> <Badge
variant="outline"
className="glass-secondary text-white/60 border-white/20"
>
Регистрация Регистрация
</Badge> </Badge>
</div> </div>
<Progress value={currentStep * 20} className="mb-6" /> <Progress value={currentStep * 20} className="mb-6" />
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
onClick={() => setCurrentStep(Math.max(1, currentStep - 1))} onClick={() => setCurrentStep(Math.max(1, currentStep - 1))}
disabled={currentStep <= 1} disabled={currentStep <= 1}
@ -419,23 +1140,33 @@ export function NavigationDemo() {
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
{[1, 2, 3, 4, 5].map((step) => ( {[1, 2, 3, 4, 5].map((step) => (
<div key={step} className="flex items-center"> <div key={step} className="flex items-center">
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-all ${ <div
step < currentStep ? 'bg-green-500 text-white' : className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-all ${
step === currentStep ? 'bg-primary text-white' : step < currentStep
'bg-white/10 text-white/60' ? "bg-green-500 text-white"
}`}> : step === currentStep
{step < currentStep ? <Check className="h-4 w-4" /> : step} ? "bg-primary text-white"
: "bg-white/10 text-white/60"
}`}
>
{step < currentStep ? (
<Check className="h-4 w-4" />
) : (
step
)}
</div> </div>
{step < 5 && ( {step < 5 && (
<div className={`w-8 h-0.5 mx-2 ${ <div
step < currentStep ? 'bg-green-500' : 'bg-white/20' className={`w-8 h-0.5 mx-2 ${
}`}></div> step < currentStep ? "bg-green-500" : "bg-white/20"
}`}
></div>
)} )}
</div> </div>
))} ))}
</div> </div>
<Button <Button
variant="glass" variant="glass"
size="sm" size="sm"
onClick={() => setCurrentStep(Math.min(5, currentStep + 1))} onClick={() => setCurrentStep(Math.min(5, currentStep + 1))}
disabled={currentStep >= 5} disabled={currentStep >= 5}
@ -449,33 +1180,49 @@ export function NavigationDemo() {
{/* Step Labels */} {/* Step Labels */}
<div> <div>
<h4 className="text-white/90 text-sm font-medium mb-3">Шаги с подписями</h4> <h4 className="text-white/90 text-sm font-medium mb-3">
Шаги с подписями
</h4>
<div className="glass-card p-4 rounded-lg border border-white/10"> <div className="glass-card p-4 rounded-lg border border-white/10">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{[ {[
{ number: 1, label: 'Телефон', completed: true }, { number: 1, label: "Телефон", completed: true },
{ number: 2, label: 'SMS', completed: true }, { number: 2, label: "SMS", completed: true },
{ number: 3, label: 'Тип кабинета', completed: false }, { number: 3, label: "Тип кабинета", completed: false },
{ number: 4, label: 'Данные', completed: false }, { number: 4, label: "Данные", completed: false },
{ number: 5, label: 'Подтверждение', completed: false } { number: 5, label: "Подтверждение", completed: false },
].map((step, index) => ( ].map((step, index) => (
<div key={step.number} className="flex flex-col items-center"> <div key={step.number} className="flex flex-col items-center">
<div className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium mb-2 transition-all ${ <div
step.completed ? 'bg-green-500 text-white' : className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium mb-2 transition-all ${
step.number === 3 ? 'bg-primary text-white' : step.completed
'bg-white/10 text-white/60' ? "bg-green-500 text-white"
}`}> : step.number === 3
{step.completed ? <Check className="h-4 w-4" /> : step.number} ? "bg-primary text-white"
: "bg-white/10 text-white/60"
}`}
>
{step.completed ? (
<Check className="h-4 w-4" />
) : (
step.number
)}
</div> </div>
<span className={`text-xs text-center ${ <span
step.completed || step.number === 3 ? 'text-white' : 'text-white/60' className={`text-xs text-center ${
}`}> step.completed || step.number === 3
? "text-white"
: "text-white/60"
}`}
>
{step.label} {step.label}
</span> </span>
{index < 4 && ( {index < 4 && (
<div className={`absolute w-24 h-0.5 top-5 left-1/2 transform translate-x-8 ${ <div
step.completed ? 'bg-green-500' : 'bg-white/20' className={`absolute w-24 h-0.5 top-5 left-1/2 transform translate-x-8 ${
}`}></div> step.completed ? "bg-green-500" : "bg-white/20"
}`}
></div>
)} )}
</div> </div>
))} ))}
@ -493,7 +1240,9 @@ export function NavigationDemo() {
<CardContent className="space-y-6"> <CardContent className="space-y-6">
{/* Action Bar */} {/* Action Bar */}
<div> <div>
<h4 className="text-white/90 text-sm font-medium mb-3">Панель действий</h4> <h4 className="text-white/90 text-sm font-medium mb-3">
Панель действий
</h4>
<div className="glass-card p-4 rounded-lg border border-white/10"> <div className="glass-card p-4 rounded-lg border border-white/10">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
@ -525,10 +1274,18 @@ export function NavigationDemo() {
<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-lg border border-white/10"> <div className="glass-card p-4 rounded-lg border border-white/10">
<div className="flex items-center space-x-2 flex-wrap"> <div className="flex items-center space-x-2 flex-wrap">
<Button variant="glass" size="sm">Все</Button> <Button variant="glass" size="sm">
<Button variant="ghost" size="sm" className="text-white/70">Активные</Button> Все
<Button variant="ghost" size="sm" className="text-white/70">В наличии</Button> </Button>
<Button variant="ghost" size="sm" className="text-white/70">Закончились</Button> <Button variant="ghost" size="sm" className="text-white/70">
Активные
</Button>
<Button variant="ghost" size="sm" className="text-white/70">
В наличии
</Button>
<Button variant="ghost" size="sm" className="text-white/70">
Закончились
</Button>
<div className="border-l border-white/20 h-6 mx-2"></div> <div className="border-l border-white/20 h-6 mx-2"></div>
<Button variant="outline" size="sm"> <Button variant="outline" size="sm">
Фулфилмент Фулфилмент
@ -543,6 +1300,265 @@ export function NavigationDemo() {
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
{/* Современные Breadcrumbs */}
<Card className="glass-card border-white/10">
<CardHeader>
<CardTitle className="text-white">Современные Breadcrumbs</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
{/* Enhanced Breadcrumbs */}
<div>
<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>
</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>
<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>
<ChevronRight className="h-4 w-4 text-white/40" />
<div className="flex items-center space-x-2">
<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>
</div>
</nav>
</div>
</div>
{/* Interactive Breadcrumbs */}
<div>
<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">
<Button variant="outline" size="sm" className="h-8">
<ArrowLeft className="h-3 w-3 mr-2" />
Назад
</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>
<ChevronRight className="h-4 w-4 text-white/40" />
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto">
Категории
</Button>
<ChevronRight className="h-4 w-4 text-white/40" />
<span className="text-white font-medium">Электроника</span>
</nav>
<Button variant="ghost" size="icon" className="h-8 w-8">
<MoreHorizontal className="h-4 w-4 text-white/60" />
</Button>
</div>
<div className="flex items-center space-x-2">
<Badge variant="secondary" className="bg-blue-500/20 text-blue-300">
234 товара
</Badge>
<Badge variant="outline" className="border-white/20 text-white/60">
Обновлено 2ч назад
</Badge>
</div>
</div>
</div>
</CardContent>
</Card>
{/* Современная пагинация */}
<Card className="glass-card border-white/10">
<CardHeader>
<CardTitle className="text-white">Современная пагинация</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
{/* Enhanced Pagination */}
<div>
<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> записей
</div>
<div className="flex items-center space-x-2">
<span className="text-white/60 text-sm">Показать:</span>
<Button variant="outline" size="sm" className="h-8 px-3">
25 <ChevronDown className="h-3 w-3 ml-1" />
</Button>
</div>
</div>
<div className="flex items-center space-x-2">
<Button variant="outline" size="sm" disabled className="h-8">
<ArrowLeft className="h-4 w-4 mr-1" />
Пред
</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>
<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>
</div>
<Button variant="outline" size="sm" className="h-8">
След
<ArrowRight className="h-4 w-4 ml-1" />
</Button>
</div>
</div>
</div>
</div>
{/* Compact Pagination */}
<div>
<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">
<ArrowLeft className="h-4 w-4" />
</Button>
<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>
</div>
<span className="text-white/70 text-sm">из 24</span>
</div>
<Button variant="outline" size="sm" className="h-8">
<ArrowRight className="h-4 w-4" />
</Button>
</div>
</div>
</div>
{/* Load More Pattern */}
<div>
<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">
Показано 50 из 1,247 записей
</div>
<Progress value={4} className="w-full" />
<Button variant="outline" className="w-full">
<Download className="h-4 w-4 mr-2" />
Загрузить еще 50 записей
</Button>
</div>
</div>
</div>
</CardContent>
</Card>
{/* Фильтры и поиск */}
<Card className="glass-card border-white/10">
<CardHeader>
<CardTitle className="text-white">Фильтры и поиск</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
{/* Advanced Filter Bar */}
<div>
<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">
<Button variant="glass" size="sm">
<Filter className="h-4 w-4 mr-2" />
Фильтры
</Button>
<div className="flex items-center space-x-2">
<Button variant="outline" size="sm" className="h-8">
Категория
<ChevronDown className="h-3 w-3 ml-2" />
</Button>
<Button variant="outline" size="sm" className="h-8">
Статус
<ChevronDown className="h-3 w-3 ml-2" />
</Button>
<Button variant="outline" size="sm" className="h-8">
Дата
<ChevronDown className="h-3 w-3 ml-2" />
</Button>
</div>
</div>
<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
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="Поиск товаров..."
/>
</div>
<Button variant="ghost" size="icon" className="h-8 w-8">
<MoreHorizontal className="h-4 w-4 text-white/60" />
</Button>
</div>
</div>
<div className="flex items-center space-x-2 flex-wrap">
<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">
В наличии
<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">
Сегодня
<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>
</div>
</div>
</div>
{/* Quick Filters */}
<div>
<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">
<Star className="h-3 w-3 mr-2" />
Избранное
</Button>
<Button variant="ghost" size="sm" className="h-8 text-white/70">
<Calendar className="h-3 w-3 mr-2" />
Недавние
</Button>
<Button variant="ghost" size="sm" className="h-8 text-white/70">
<Heart className="h-3 w-3 mr-2" />
Популярные
</Button>
<Button variant="ghost" size="sm" className="h-8 text-white/70">
<Zap className="h-3 w-3 mr-2" />
Быстрая доставка
</Button>
<div className="border-l border-white/20 h-6 mx-2"></div>
<Button variant="outline" size="sm" className="h-8">
<Eye className="h-3 w-3 mr-2" />
Показать все
</Button>
</div>
</div>
</div>
</CardContent>
</Card>
</div> </div>
) );
} }