Compare commits
2 Commits
08baf78c05
...
39c1499f72
Author | SHA1 | Date | |
---|---|---|---|
39c1499f72 | |||
bfe9fb1df3 |
@ -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">Содержимое вкладки "Навигация"</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">Содержимое вкладки "Формы"</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">Содержимое вкладки "Данные"</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">Содержимое вкладки "Настройки"</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>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user