Удалены классы фона с градиентом из компонентов для улучшения производительности и упрощения стилей. Обновлены компоненты для более чистого и понятного кода, улучшена адаптивность интерфейса.
This commit is contained in:
Bivekich
548
src/components/admin/ui-kit/navigation-demo.tsx
Normal file
548
src/components/admin/ui-kit/navigation-demo.tsx
Normal file
@ -0,0 +1,548 @@
|
||||
"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,
|
||||
Settings,
|
||||
Building,
|
||||
Package,
|
||||
Truck,
|
||||
Store,
|
||||
ChevronRight,
|
||||
ChevronLeft,
|
||||
Menu,
|
||||
X,
|
||||
Search,
|
||||
Bell,
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
MoreHorizontal,
|
||||
Check
|
||||
} from 'lucide-react'
|
||||
|
||||
export function NavigationDemo() {
|
||||
const [activeTab, setActiveTab] = useState('nav')
|
||||
const [currentStep, setCurrentStep] = useState(2)
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Навигационное меню */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Навигационное меню</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Horizontal Navigation */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Горизонтальная навигация</h4>
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<nav className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-6">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-primary/30 rounded-lg"></div>
|
||||
<span className="text-white font-semibold">SferaV</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="glass" size="sm">Главная</Button>
|
||||
<Button variant="ghost" size="sm" className="text-white/70">Маркет</Button>
|
||||
<Button variant="ghost" size="sm" className="text-white/70">Услуги</Button>
|
||||
<Button variant="ghost" size="sm" className="text-white/70">Партнеры</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Search className="h-4 w-4 text-white/70" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Bell className="h-4 w-4 text-white/70" />
|
||||
</Button>
|
||||
<Avatar className="h-8 w-8 bg-primary/30">
|
||||
<AvatarFallback className="bg-primary/30 text-white text-xs">SF</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
<div className="w-64 mx-auto">
|
||||
{/* Mobile Header */}
|
||||
<div className="glass-card p-3 rounded-t-lg border border-white/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Menu className="h-4 w-4 text-white/70" />
|
||||
</Button>
|
||||
<span className="text-white font-semibold">SferaV</span>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Bell className="h-4 w-4 text-white/70" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Mobile Bottom Navigation */}
|
||||
<div className="glass-card p-2 rounded-b-lg border border-white/10 border-t-0">
|
||||
<div className="grid grid-cols-5 gap-1">
|
||||
<Button variant="glass" className="flex-col h-12 text-xs">
|
||||
<Home className="h-4 w-4 mb-1" />
|
||||
Главная
|
||||
</Button>
|
||||
<Button variant="ghost" className="flex-col h-12 text-xs text-white/70">
|
||||
<Store className="h-4 w-4 mb-1" />
|
||||
Маркет
|
||||
</Button>
|
||||
<Button variant="ghost" className="flex-col h-12 text-xs text-white/70">
|
||||
<MessageCircle className="h-4 w-4 mb-1" />
|
||||
Чат
|
||||
</Button>
|
||||
<Button variant="ghost" className="flex-col h-12 text-xs text-white/70">
|
||||
<Users className="h-4 w-4 mb-1" />
|
||||
Команда
|
||||
</Button>
|
||||
<Button variant="ghost" className="flex-col h-12 text-xs text-white/70">
|
||||
<Settings className="h-4 w-4 mb-1" />
|
||||
Еще
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Табы */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Табы и вкладки</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Basic Tabs */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Базовые табы</h4>
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-4 bg-white/5 backdrop-blur border-white/10">
|
||||
<TabsTrigger
|
||||
value="nav"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
|
||||
>
|
||||
Навигация
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="forms"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
|
||||
>
|
||||
Формы
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="data"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
|
||||
>
|
||||
Данные
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="settings"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
|
||||
>
|
||||
Настройки
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
{/* Icon 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>
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="space-x-2 text-white/70">
|
||||
<Users className="h-4 w-4" />
|
||||
<span>Клиенты</span>
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="space-x-2 text-white/70">
|
||||
<Truck className="h-4 w-4" />
|
||||
<span>Доставка</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<Home 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">
|
||||
<Settings className="h-4 w-4 mr-3" />
|
||||
Настройки системы
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Breadcrumbs */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Breadcrumbs (Хлебные крошки)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Standard Breadcrumbs */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Стандартные breadcrumbs</h4>
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<nav className="flex items-center space-x-2 text-sm">
|
||||
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto">
|
||||
Главная
|
||||
</Button>
|
||||
<ChevronRight className="h-4 w-4 text-white/40" />
|
||||
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto">
|
||||
Маркет
|
||||
</Button>
|
||||
<ChevronRight className="h-4 w-4 text-white/40" />
|
||||
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto">
|
||||
Товары
|
||||
</Button>
|
||||
<ChevronRight className="h-4 w-4 text-white/40" />
|
||||
<span className="text-white font-medium">iPhone 15 Pro</span>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Breadcrumbs with Back */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Breadcrumbs с кнопкой назад</h4>
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="outline" size="sm">
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Назад
|
||||
</Button>
|
||||
<nav className="flex items-center space-x-2 text-sm">
|
||||
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto">
|
||||
Склад
|
||||
</Button>
|
||||
<ChevronRight className="h-4 w-4 text-white/40" />
|
||||
<Button variant="link" className="text-white/70 hover:text-white p-0 h-auto">
|
||||
Категории
|
||||
</Button>
|
||||
<ChevronRight className="h-4 w-4 text-white/40" />
|
||||
<span className="text-white font-medium">Электроника</span>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Pagination */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Пагинация</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Standard Pagination */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Стандартная пагинация</h4>
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-white/70 text-sm">
|
||||
Показано 1-10 из 234 записей
|
||||
</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<Button variant="outline" size="sm" disabled>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="glass" size="sm">1</Button>
|
||||
<Button variant="ghost" size="sm" className="text-white/70">2</Button>
|
||||
<Button variant="ghost" size="sm" className="text-white/70">3</Button>
|
||||
<Button variant="ghost" size="sm" className="text-white/70">...</Button>
|
||||
<Button variant="ghost" size="sm" className="text-white/70">24</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Simple Pagination */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Простая пагинация</h4>
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<Button variant="outline" size="sm" disabled>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Предыдущая
|
||||
</Button>
|
||||
<div className="text-white/70 text-sm">
|
||||
Страница 1 из 24
|
||||
</div>
|
||||
<Button variant="outline" size="sm">
|
||||
Следующая
|
||||
<ArrowRight className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Progress Navigation */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Навигация по шагам</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Step Progress */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Прогресс выполнения шагов</h4>
|
||||
<div className="glass-card p-6 rounded-lg border border-white/10">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Badge variant="secondary" className="glass-secondary text-white/80">
|
||||
Шаг {currentStep} из 5
|
||||
</Badge>
|
||||
<Badge variant="outline" className="glass-secondary text-white/60 border-white/20">
|
||||
Регистрация
|
||||
</Badge>
|
||||
</div>
|
||||
<Progress value={currentStep * 20} className="mb-6" />
|
||||
<div className="flex items-center justify-between">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentStep(Math.max(1, currentStep - 1))}
|
||||
disabled={currentStep <= 1}
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Назад
|
||||
</Button>
|
||||
<div className="flex items-center space-x-4">
|
||||
{[1, 2, 3, 4, 5].map((step) => (
|
||||
<div key={step} className="flex items-center">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-all ${
|
||||
step < currentStep ? 'bg-green-500 text-white' :
|
||||
step === currentStep ? 'bg-primary text-white' :
|
||||
'bg-white/10 text-white/60'
|
||||
}`}>
|
||||
{step < currentStep ? <Check className="h-4 w-4" /> : step}
|
||||
</div>
|
||||
{step < 5 && (
|
||||
<div className={`w-8 h-0.5 mx-2 ${
|
||||
step < currentStep ? 'bg-green-500' : 'bg-white/20'
|
||||
}`}></div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
variant="glass"
|
||||
size="sm"
|
||||
onClick={() => setCurrentStep(Math.min(5, currentStep + 1))}
|
||||
disabled={currentStep >= 5}
|
||||
>
|
||||
Далее
|
||||
<ArrowRight className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step Labels */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Шаги с подписями</h4>
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<div className="flex items-center justify-between">
|
||||
{[
|
||||
{ number: 1, label: 'Телефон', completed: true },
|
||||
{ number: 2, label: 'SMS', completed: true },
|
||||
{ number: 3, label: 'Тип кабинета', completed: false },
|
||||
{ number: 4, label: 'Данные', completed: false },
|
||||
{ number: 5, label: 'Подтверждение', completed: false }
|
||||
].map((step, index) => (
|
||||
<div key={step.number} className="flex flex-col items-center">
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium mb-2 transition-all ${
|
||||
step.completed ? 'bg-green-500 text-white' :
|
||||
step.number === 3 ? 'bg-primary text-white' :
|
||||
'bg-white/10 text-white/60'
|
||||
}`}>
|
||||
{step.completed ? <Check className="h-4 w-4" /> : step.number}
|
||||
</div>
|
||||
<span className={`text-xs text-center ${
|
||||
step.completed || step.number === 3 ? 'text-white' : 'text-white/60'
|
||||
}`}>
|
||||
{step.label}
|
||||
</span>
|
||||
{index < 4 && (
|
||||
<div className={`absolute w-24 h-0.5 top-5 left-1/2 transform translate-x-8 ${
|
||||
step.completed ? 'bg-green-500' : 'bg-white/20'
|
||||
}`}></div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Contextual Navigation */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Контекстная навигация</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Action Bar */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Панель действий</h4>
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button variant="glass" size="sm">
|
||||
<Package className="h-4 w-4 mr-2" />
|
||||
Добавить товар
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
Импорт
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
Экспорт
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Search className="h-4 w-4 text-white/70" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal className="h-4 w-4 text-white/70" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter Navigation */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Фильтры</h4>
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<div className="flex items-center space-x-2 flex-wrap">
|
||||
<Button variant="glass" size="sm">Все</Button>
|
||||
<Button variant="ghost" size="sm" className="text-white/70">Активные</Button>
|
||||
<Button variant="ghost" size="sm" className="text-white/70">В наличии</Button>
|
||||
<Button variant="ghost" size="sm" className="text-white/70">Закончились</Button>
|
||||
<div className="border-l border-white/20 h-6 mx-2"></div>
|
||||
<Button variant="outline" size="sm">
|
||||
Фулфилмент
|
||||
<X className="h-3 w-3 ml-2" />
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
Электроника
|
||||
<X className="h-3 w-3 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user