Обновлены компоненты навигации и интерфейса админ-панели: добавлены новые элементы, улучшены стили и адаптивность. Реализованы современные сайдбары, улучшенные вкладки и пагинация, а также новые функции для фильтрации и поиска. Обновлены названия и описание элементов для повышения удобства использования.
This commit is contained in:
@ -1,16 +1,17 @@
|
||||
"use client"
|
||||
"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 {
|
||||
Home,
|
||||
Users,
|
||||
MessageCircle,
|
||||
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,
|
||||
@ -18,6 +19,8 @@ import {
|
||||
Store,
|
||||
ChevronRight,
|
||||
ChevronLeft,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Menu,
|
||||
X,
|
||||
Search,
|
||||
@ -25,15 +28,632 @@ import {
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
MoreHorizontal,
|
||||
Check
|
||||
} from 'lucide-react'
|
||||
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 [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>
|
||||
@ -42,7 +662,9 @@ export function NavigationDemo() {
|
||||
<CardContent className="space-y-6">
|
||||
{/* Horizontal Navigation */}
|
||||
<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">
|
||||
<nav className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-6">
|
||||
@ -51,10 +673,18 @@ export function NavigationDemo() {
|
||||
<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>
|
||||
<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">
|
||||
@ -65,73 +695,20 @@ export function NavigationDemo() {
|
||||
<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>
|
||||
<AvatarFallback className="bg-primary/30 text-white text-xs">
|
||||
SF
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
</nav>
|
||||
</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 */}
|
||||
<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">
|
||||
{/* Mobile Header */}
|
||||
<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" />
|
||||
Главная
|
||||
</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" />
|
||||
Маркет
|
||||
</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" />
|
||||
Чат
|
||||
</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" />
|
||||
Команда
|
||||
</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" />
|
||||
Еще
|
||||
</Button>
|
||||
@ -175,80 +764,146 @@ export function NavigationDemo() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Табы */}
|
||||
{/* Табы и вкладки */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Табы и вкладки</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Basic Tabs */}
|
||||
{/* Enhanced Tabs */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Базовые табы</h4>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Улучшенные табы</h4>
|
||||
<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
|
||||
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
|
||||
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
|
||||
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
|
||||
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>
|
||||
</TabsList>
|
||||
<TabsContent value="nav" className="mt-4">
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<p className="text-white/80">Содержимое вкладки "Навигация"</p>
|
||||
<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-4">
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<p className="text-white/80">Содержимое вкладки "Формы"</p>
|
||||
<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-4">
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<p className="text-white/80">Содержимое вкладки "Данные"</p>
|
||||
<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-4">
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<p className="text-white/80">Содержимое вкладки "Настройки"</p>
|
||||
<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>
|
||||
|
||||
{/* Icon Tabs */}
|
||||
{/* Pill Tabs */}
|
||||
<div>
|
||||
<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">
|
||||
<Button variant="glass" size="sm" className="space-x-2">
|
||||
<Package className="h-4 w-4" />
|
||||
<span>Товары</span>
|
||||
<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="space-x-2 text-white/70">
|
||||
<Users className="h-4 w-4" />
|
||||
<span>Клиенты</span>
|
||||
<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="space-x-2 text-white/70">
|
||||
<Truck className="h-4 w-4" />
|
||||
<span>Доставка</span>
|
||||
<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>
|
||||
@ -256,24 +911,49 @@ export function NavigationDemo() {
|
||||
{/* Vertical Tabs */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Вертикальные табы</h4>
|
||||
<div className="flex space-x-4">
|
||||
<div className="w-48 space-y-1">
|
||||
<Button variant="glass" className="w-full justify-start h-10">
|
||||
<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-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" />
|
||||
Управление пользователями
|
||||
<ChevronRight className="h-4 w-4 ml-auto" />
|
||||
</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" />
|
||||
Настройки системы
|
||||
<ChevronRight className="h-4 w-4 ml-auto" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 glass-card p-4 rounded-lg border border-white/10">
|
||||
<h5 className="text-white font-medium mb-2">Главная панель</h5>
|
||||
<p className="text-white/70 text-sm">Содержимое выбранной вкладки отображается здесь</p>
|
||||
<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>
|
||||
@ -283,23 +963,36 @@ export function NavigationDemo() {
|
||||
{/* Breadcrumbs */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Breadcrumbs (Хлебные крошки)</CardTitle>
|
||||
<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>
|
||||
<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
|
||||
variant="link"
|
||||
className="text-white/70 hover:text-white p-0 h-auto"
|
||||
>
|
||||
Главная
|
||||
</Button>
|
||||
<ChevronRight className="h-4 w-4 text-white/40" />
|
||||
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto">
|
||||
<Button
|
||||
variant="link"
|
||||
className="text-white/70 hover:text-white p-0 h-auto"
|
||||
>
|
||||
Маркет
|
||||
</Button>
|
||||
<ChevronRight className="h-4 w-4 text-white/40" />
|
||||
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto">
|
||||
<Button
|
||||
variant="link"
|
||||
className="text-white/70 hover:text-white p-0 h-auto"
|
||||
>
|
||||
Товары
|
||||
</Button>
|
||||
<ChevronRight className="h-4 w-4 text-white/40" />
|
||||
@ -310,7 +1003,9 @@ export function NavigationDemo() {
|
||||
|
||||
{/* Breadcrumbs with Back */}
|
||||
<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="flex items-center space-x-4">
|
||||
<Button variant="outline" size="sm">
|
||||
@ -318,11 +1013,17 @@ export function NavigationDemo() {
|
||||
Назад
|
||||
</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
|
||||
variant="link"
|
||||
className="text-white/70 hover:text-white p-0 h-auto"
|
||||
>
|
||||
Склад
|
||||
</Button>
|
||||
<ChevronRight className="h-4 w-4 text-white/40" />
|
||||
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto">
|
||||
<Button
|
||||
variant="link"
|
||||
className="text-white/70 hover:text-white p-0 h-auto"
|
||||
>
|
||||
Категории
|
||||
</Button>
|
||||
<ChevronRight className="h-4 w-4 text-white/40" />
|
||||
@ -342,7 +1043,9 @@ export function NavigationDemo() {
|
||||
<CardContent className="space-y-6">
|
||||
{/* Standard Pagination */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Стандартная пагинация</h4>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||
Стандартная пагинация
|
||||
</h4>
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-white/70 text-sm">
|
||||
@ -352,11 +1055,21 @@ export function NavigationDemo() {
|
||||
<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="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>
|
||||
@ -367,16 +1080,16 @@ export function NavigationDemo() {
|
||||
|
||||
{/* Simple Pagination */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Простая пагинация</h4>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||
Простая пагинация
|
||||
</h4>
|
||||
<div className="glass-card p-4 rounded-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>
|
||||
<div className="text-white/70 text-sm">Страница 1 из 24</div>
|
||||
<Button variant="outline" size="sm">
|
||||
Следующая
|
||||
<ArrowRight className="h-4 w-4 ml-2" />
|
||||
@ -395,20 +1108,28 @@ export function NavigationDemo() {
|
||||
<CardContent className="space-y-6">
|
||||
{/* Step Progress */}
|
||||
<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="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
|
||||
</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>
|
||||
</div>
|
||||
<Progress value={currentStep * 20} className="mb-6" />
|
||||
<div className="flex items-center justify-between">
|
||||
<Button
|
||||
variant="outline"
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentStep(Math.max(1, currentStep - 1))}
|
||||
disabled={currentStep <= 1}
|
||||
@ -419,23 +1140,33 @@ export function NavigationDemo() {
|
||||
<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
|
||||
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
|
||||
className={`w-8 h-0.5 mx-2 ${
|
||||
step < currentStep ? "bg-green-500" : "bg-white/20"
|
||||
}`}
|
||||
></div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
variant="glass"
|
||||
<Button
|
||||
variant="glass"
|
||||
size="sm"
|
||||
onClick={() => setCurrentStep(Math.min(5, currentStep + 1))}
|
||||
disabled={currentStep >= 5}
|
||||
@ -449,33 +1180,49 @@ export function NavigationDemo() {
|
||||
|
||||
{/* Step Labels */}
|
||||
<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="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 }
|
||||
{ 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
|
||||
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'
|
||||
}`}>
|
||||
<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
|
||||
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>
|
||||
))}
|
||||
@ -493,7 +1240,9 @@ export function NavigationDemo() {
|
||||
<CardContent className="space-y-6">
|
||||
{/* Action Bar */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Панель действий</h4>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">
|
||||
Панель действий
|
||||
</h4>
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
Фулфилмент
|
||||
@ -543,6 +1300,265 @@ export function NavigationDemo() {
|
||||
</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>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user