1565 lines
67 KiB
TypeScript
1565 lines
67 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
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 { Progress } from "@/components/ui/progress";
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||
import { Switch } from "@/components/ui/switch";
|
||
import {
|
||
Home,
|
||
Users,
|
||
MessageCircle,
|
||
Settings,
|
||
Building,
|
||
Package,
|
||
Truck,
|
||
Store,
|
||
ChevronRight,
|
||
ChevronLeft,
|
||
ChevronDown,
|
||
ChevronUp,
|
||
Menu,
|
||
X,
|
||
Search,
|
||
Bell,
|
||
ArrowLeft,
|
||
ArrowRight,
|
||
MoreHorizontal,
|
||
Check,
|
||
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() {
|
||
const [activeTab, setActiveTab] = useState("nav");
|
||
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 (
|
||
<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">
|
||
<CardHeader>
|
||
<CardTitle className="text-white">Навигационное меню</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
{/* Horizontal Navigation */}
|
||
<div>
|
||
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||
Горизонтальная навигация
|
||
</h4>
|
||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||
<nav className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-6">
|
||
<div className="flex items-center space-x-2">
|
||
<div className="w-8 h-8 bg-primary/30 rounded-lg"></div>
|
||
<span className="text-white font-semibold">SferaV</span>
|
||
</div>
|
||
<div className="flex items-center space-x-4">
|
||
<Button variant="glass" size="sm">
|
||
Главная
|
||
</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 className="flex items-center space-x-2">
|
||
<Button variant="ghost" size="icon">
|
||
<Search className="h-4 w-4 text-white/70" />
|
||
</Button>
|
||
<Button variant="ghost" size="icon">
|
||
<Bell className="h-4 w-4 text-white/70" />
|
||
</Button>
|
||
<Avatar className="h-8 w-8 bg-primary/30">
|
||
<AvatarFallback className="bg-primary/30 text-white text-xs">
|
||
SF
|
||
</AvatarFallback>
|
||
</Avatar>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Mobile Navigation */}
|
||
<div>
|
||
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||
Мобильная навигация
|
||
</h4>
|
||
<div className="w-64 mx-auto">
|
||
{/* Mobile Header */}
|
||
<div className="glass-card p-3 rounded-t-lg border border-white/10">
|
||
<div className="flex items-center justify-between">
|
||
<Button variant="ghost" size="icon">
|
||
<Menu className="h-4 w-4 text-white/70" />
|
||
</Button>
|
||
<span className="text-white font-semibold">SferaV</span>
|
||
<Button variant="ghost" size="icon">
|
||
<Bell className="h-4 w-4 text-white/70" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
{/* Mobile Bottom Navigation */}
|
||
<div className="glass-card p-2 rounded-b-lg border border-white/10 border-t-0">
|
||
<div className="grid grid-cols-5 gap-1">
|
||
<Button variant="glass" className="flex-col h-12 text-xs">
|
||
<Home className="h-4 w-4 mb-1" />
|
||
Главная
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
className="flex-col h-12 text-xs text-white/70"
|
||
>
|
||
<Store className="h-4 w-4 mb-1" />
|
||
Маркет
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
className="flex-col h-12 text-xs text-white/70"
|
||
>
|
||
<MessageCircle className="h-4 w-4 mb-1" />
|
||
Чат
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
className="flex-col h-12 text-xs text-white/70"
|
||
>
|
||
<Users className="h-4 w-4 mb-1" />
|
||
Команда
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
className="flex-col h-12 text-xs text-white/70"
|
||
>
|
||
<Settings className="h-4 w-4 mb-1" />
|
||
Еще
|
||
</Button>
|
||
</div>
|
||
</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 Tabs */}
|
||
<div>
|
||
<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"
|
||
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"
|
||
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"
|
||
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"
|
||
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>
|
||
</TabsList>
|
||
<TabsContent value="nav" className="mt-6">
|
||
<div className="glass-card p-6 rounded-xl border border-white/10">
|
||
<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>
|
||
</TabsContent>
|
||
<TabsContent value="forms" className="mt-6">
|
||
<div className="glass-card p-6 rounded-xl border border-white/10">
|
||
<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>
|
||
</TabsContent>
|
||
<TabsContent value="data" className="mt-6">
|
||
<div className="glass-card p-6 rounded-xl border border-white/10">
|
||
<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>
|
||
</TabsContent>
|
||
<TabsContent value="settings" className="mt-6">
|
||
<div className="glass-card p-6 rounded-xl border border-white/10">
|
||
<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>
|
||
</TabsContent>
|
||
</Tabs>
|
||
</div>
|
||
|
||
{/* Pill Tabs */}
|
||
<div>
|
||
<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>
|
||
</Button>
|
||
<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">
|
||
<Truck className="h-4 w-4 mr-2" />
|
||
Доставка
|
||
</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>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Vertical Tabs */}
|
||
<div>
|
||
<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">
|
||
<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">
|
||
<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">
|
||
<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" />
|
||
Настройки системы
|
||
<ChevronRight className="h-4 w-4 ml-auto" />
|
||
</Button>
|
||
</div>
|
||
<div className="flex-1 glass-card p-6 rounded-xl border border-white/10">
|
||
<div className="flex items-center space-x-3 mb-4">
|
||
<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>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Breadcrumbs */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white">
|
||
Breadcrumbs (Хлебные крошки)
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
{/* Standard Breadcrumbs */}
|
||
<div>
|
||
<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">
|
||
<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>
|
||
<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" />
|
||
<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">iPhone 15 Pro</span>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Breadcrumbs with Back */}
|
||
<div>
|
||
<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="flex items-center space-x-4">
|
||
<Button variant="outline" size="sm">
|
||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||
Назад
|
||
</Button>
|
||
<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>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Pagination */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white">Пагинация</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
{/* Standard Pagination */}
|
||
<div>
|
||
<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="flex items-center justify-between">
|
||
<div className="text-white/70 text-sm">
|
||
Показано 1-10 из 234 записей
|
||
</div>
|
||
<div className="flex items-center space-x-1">
|
||
<Button variant="outline" size="sm" disabled>
|
||
<ArrowLeft className="h-4 w-4" />
|
||
</Button>
|
||
<Button variant="glass" size="sm">
|
||
1
|
||
</Button>
|
||
<Button variant="ghost" size="sm" className="text-white/70">
|
||
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">
|
||
<ArrowRight className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Simple Pagination */}
|
||
<div>
|
||
<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="flex items-center justify-between">
|
||
<Button variant="outline" size="sm" disabled>
|
||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||
Предыдущая
|
||
</Button>
|
||
<div className="text-white/70 text-sm">Страница 1 из 24</div>
|
||
<Button variant="outline" size="sm">
|
||
Следующая
|
||
<ArrowRight className="h-4 w-4 ml-2" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Progress Navigation */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white">Навигация по шагам</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
{/* Step Progress */}
|
||
<div>
|
||
<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="flex items-center justify-between mb-4">
|
||
<Badge
|
||
variant="secondary"
|
||
className="glass-secondary text-white/80"
|
||
>
|
||
Шаг {currentStep} из 5
|
||
</Badge>
|
||
<Badge
|
||
variant="outline"
|
||
className="glass-secondary text-white/60 border-white/20"
|
||
>
|
||
Регистрация
|
||
</Badge>
|
||
</div>
|
||
<Progress value={currentStep * 20} className="mb-6" />
|
||
<div className="flex items-center justify-between">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setCurrentStep(Math.max(1, currentStep - 1))}
|
||
disabled={currentStep <= 1}
|
||
>
|
||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||
Назад
|
||
</Button>
|
||
<div className="flex items-center space-x-4">
|
||
{[1, 2, 3, 4, 5].map((step) => (
|
||
<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 ${
|
||
step < currentStep
|
||
? "bg-green-500 text-white"
|
||
: step === currentStep
|
||
? "bg-primary text-white"
|
||
: "bg-white/10 text-white/60"
|
||
}`}
|
||
>
|
||
{step < currentStep ? (
|
||
<Check className="h-4 w-4" />
|
||
) : (
|
||
step
|
||
)}
|
||
</div>
|
||
{step < 5 && (
|
||
<div
|
||
className={`w-8 h-0.5 mx-2 ${
|
||
step < currentStep ? "bg-green-500" : "bg-white/20"
|
||
}`}
|
||
></div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<Button
|
||
variant="glass"
|
||
size="sm"
|
||
onClick={() => setCurrentStep(Math.min(5, currentStep + 1))}
|
||
disabled={currentStep >= 5}
|
||
>
|
||
Далее
|
||
<ArrowRight className="h-4 w-4 ml-2" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Step Labels */}
|
||
<div>
|
||
<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="flex items-center justify-between">
|
||
{[
|
||
{ number: 1, label: "Телефон", completed: true },
|
||
{ number: 2, label: "SMS", completed: true },
|
||
{ number: 3, label: "Тип кабинета", completed: false },
|
||
{ number: 4, label: "Данные", completed: false },
|
||
{ number: 5, label: "Подтверждение", completed: false },
|
||
].map((step, index) => (
|
||
<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 ${
|
||
step.completed
|
||
? "bg-green-500 text-white"
|
||
: step.number === 3
|
||
? "bg-primary text-white"
|
||
: "bg-white/10 text-white/60"
|
||
}`}
|
||
>
|
||
{step.completed ? (
|
||
<Check className="h-4 w-4" />
|
||
) : (
|
||
step.number
|
||
)}
|
||
</div>
|
||
<span
|
||
className={`text-xs text-center ${
|
||
step.completed || step.number === 3
|
||
? "text-white"
|
||
: "text-white/60"
|
||
}`}
|
||
>
|
||
{step.label}
|
||
</span>
|
||
{index < 4 && (
|
||
<div
|
||
className={`absolute w-24 h-0.5 top-5 left-1/2 transform translate-x-8 ${
|
||
step.completed ? "bg-green-500" : "bg-white/20"
|
||
}`}
|
||
></div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Contextual Navigation */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white">Контекстная навигация</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
{/* Action Bar */}
|
||
<div>
|
||
<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="flex items-center justify-between">
|
||
<div className="flex items-center space-x-3">
|
||
<Button variant="glass" size="sm">
|
||
<Package className="h-4 w-4 mr-2" />
|
||
Добавить товар
|
||
</Button>
|
||
<Button variant="outline" size="sm">
|
||
Импорт
|
||
</Button>
|
||
<Button variant="outline" size="sm">
|
||
Экспорт
|
||
</Button>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<Button variant="ghost" size="icon">
|
||
<Search className="h-4 w-4 text-white/70" />
|
||
</Button>
|
||
<Button variant="ghost" size="icon">
|
||
<MoreHorizontal className="h-4 w-4 text-white/70" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Filter Navigation */}
|
||
<div>
|
||
<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="flex items-center space-x-2 flex-wrap">
|
||
<Button variant="glass" size="sm">
|
||
Все
|
||
</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>
|
||
<Button variant="outline" size="sm">
|
||
Фулфилмент
|
||
<X className="h-3 w-3 ml-2" />
|
||
</Button>
|
||
<Button variant="outline" size="sm">
|
||
Электроника
|
||
<X className="h-3 w-3 ml-2" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</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>
|
||
);
|
||
}
|