Удалены классы фона с градиентом из компонентов для улучшения производительности и упрощения стилей. Обновлены компоненты для более чистого и понятного кода, улучшена адаптивность интерфейса.
This commit is contained in:
Bivekich
@ -8,6 +8,13 @@ import { CardsDemo } from './ui-kit/cards-demo'
|
||||
import { TypographyDemo } from './ui-kit/typography-demo'
|
||||
import { ColorsDemo } from './ui-kit/colors-demo'
|
||||
import { IconsDemo } from './ui-kit/icons-demo'
|
||||
import { LayoutsDemo } from './ui-kit/layouts-demo'
|
||||
import { NavigationDemo } from './ui-kit/navigation-demo'
|
||||
import { SpecializedDemo } from './ui-kit/specialized-demo'
|
||||
import { AnimationsDemo } from './ui-kit/animations-demo'
|
||||
import { StatesDemo } from './ui-kit/states-demo'
|
||||
import { MediaDemo } from './ui-kit/media-demo'
|
||||
import { InteractiveDemo } from './ui-kit/interactive-demo'
|
||||
|
||||
export function UIKitSection() {
|
||||
return (
|
||||
@ -18,44 +25,47 @@ export function UIKitSection() {
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="buttons" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-6 bg-white/5 backdrop-blur border-white/10 mb-8">
|
||||
<TabsTrigger
|
||||
value="buttons"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
|
||||
>
|
||||
<div className="flex flex-wrap gap-1 bg-white/5 backdrop-blur border-white/10 p-2 rounded-lg mb-8">
|
||||
<TabsTrigger value="buttons" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
|
||||
Кнопки
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="forms"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
|
||||
>
|
||||
<TabsTrigger value="forms" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
|
||||
Формы
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="cards"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
|
||||
>
|
||||
<TabsTrigger value="cards" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
|
||||
Карточки
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="typography"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
|
||||
>
|
||||
<TabsTrigger value="typography" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
|
||||
Типографика
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="colors"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
|
||||
>
|
||||
<TabsTrigger value="colors" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
|
||||
Цвета
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="icons"
|
||||
className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70"
|
||||
>
|
||||
<TabsTrigger value="icons" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
|
||||
Иконки
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsTrigger value="layouts" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
|
||||
Макеты
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="navigation" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
|
||||
Навигация
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="specialized" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
|
||||
Специальные
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="animations" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
|
||||
Анимации
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="states" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
|
||||
Состояния
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="media" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
|
||||
Медиа
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="interactive" className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/70 text-xs px-3 py-2">
|
||||
Интерактив
|
||||
</TabsTrigger>
|
||||
</div>
|
||||
|
||||
<TabsContent value="buttons" className="space-y-6">
|
||||
<ButtonsDemo />
|
||||
@ -80,6 +90,34 @@ export function UIKitSection() {
|
||||
<TabsContent value="icons" className="space-y-6">
|
||||
<IconsDemo />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="layouts" className="space-y-6">
|
||||
<LayoutsDemo />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="navigation" className="space-y-6">
|
||||
<NavigationDemo />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="specialized" className="space-y-6">
|
||||
<SpecializedDemo />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="animations" className="space-y-6">
|
||||
<AnimationsDemo />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="states" className="space-y-6">
|
||||
<StatesDemo />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="media" className="space-y-6">
|
||||
<MediaDemo />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="interactive" className="space-y-6">
|
||||
<InteractiveDemo />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
|
||||
555
src/components/admin/ui-kit/animations-demo.tsx
Normal file
555
src/components/admin/ui-kit/animations-demo.tsx
Normal file
@ -0,0 +1,555 @@
|
||||
"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 {
|
||||
Play,
|
||||
Pause,
|
||||
RotateCcw,
|
||||
Zap,
|
||||
Sparkles,
|
||||
Loader,
|
||||
RefreshCw,
|
||||
Heart,
|
||||
Star,
|
||||
ArrowRight,
|
||||
ChevronDown,
|
||||
Bell,
|
||||
Settings,
|
||||
CheckCircle,
|
||||
AlertTriangle,
|
||||
Package,
|
||||
Truck,
|
||||
ShoppingCart
|
||||
} from 'lucide-react'
|
||||
|
||||
export function AnimationsDemo() {
|
||||
const [isAnimating, setIsAnimating] = useState(false)
|
||||
const [hoveredCard, setHoveredCard] = useState<number | null>(null)
|
||||
const [progress, setProgress] = useState(0)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [showNotification, setShowNotification] = useState(false)
|
||||
|
||||
const startProgress = () => {
|
||||
setProgress(0)
|
||||
const interval = setInterval(() => {
|
||||
setProgress((prev) => {
|
||||
if (prev >= 100) {
|
||||
clearInterval(interval)
|
||||
return 100
|
||||
}
|
||||
return prev + 10
|
||||
})
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const showLoadingDemo = () => {
|
||||
setIsLoading(true)
|
||||
setTimeout(() => setIsLoading(false), 3000)
|
||||
}
|
||||
|
||||
const triggerNotification = () => {
|
||||
setShowNotification(true)
|
||||
setTimeout(() => setShowNotification(false), 3000)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* CSS Анимации */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">CSS Анимации</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Spin Animations */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Вращение и загрузка</h4>
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center">
|
||||
<div className="w-8 h-8 border-2 border-white/20 border-t-white rounded-full animate-spin mx-auto mb-2"></div>
|
||||
<p className="text-white/70 text-xs">animate-spin</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center">
|
||||
<RefreshCw className="w-8 h-8 text-white/70 animate-spin mx-auto mb-2" />
|
||||
<p className="text-white/70 text-xs">icon spin</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center">
|
||||
<Loader className="w-8 h-8 text-blue-400 animate-spin mx-auto mb-2" />
|
||||
<p className="text-white/70 text-xs">loader</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center">
|
||||
<div className="flex space-x-1 mx-auto w-fit mb-2">
|
||||
<div className="w-2 h-2 bg-white rounded-full animate-bounce"></div>
|
||||
<div className="w-2 h-2 bg-white rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
|
||||
<div className="w-2 h-2 bg-white rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
|
||||
</div>
|
||||
<p className="text-white/70 text-xs">dots bounce</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pulse Animations */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Пульсация</h4>
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center">
|
||||
<div className="w-8 h-8 bg-green-400 rounded-full animate-pulse mx-auto mb-2"></div>
|
||||
<p className="text-white/70 text-xs">pulse circle</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center">
|
||||
<Bell className="w-8 h-8 text-yellow-400 animate-pulse mx-auto mb-2" />
|
||||
<p className="text-white/70 text-xs">notification</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center">
|
||||
<Heart className="w-8 h-8 text-red-400 animate-pulse mx-auto mb-2 fill-current" />
|
||||
<p className="text-white/70 text-xs">heartbeat</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center">
|
||||
<div className="relative mx-auto w-8 h-8 mb-2">
|
||||
<div className="absolute inset-0 bg-blue-400 rounded-full animate-ping"></div>
|
||||
<div className="relative w-8 h-8 bg-blue-400 rounded-full"></div>
|
||||
</div>
|
||||
<p className="text-white/70 text-xs">ping</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bounce Animations */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Подпрыгивание</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center">
|
||||
<ArrowRight className="w-8 h-8 text-white/70 animate-bounce mx-auto mb-2" />
|
||||
<p className="text-white/70 text-xs">bounce arrow</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center">
|
||||
<ChevronDown className="w-8 h-8 text-white/70 animate-bounce mx-auto mb-2" />
|
||||
<p className="text-white/70 text-xs">bounce down</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center">
|
||||
<Button
|
||||
variant="glass"
|
||||
size="sm"
|
||||
className="animate-bounce"
|
||||
>
|
||||
Кнопка
|
||||
</Button>
|
||||
<p className="text-white/70 text-xs mt-2">bounce button</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Hover эффекты */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Hover эффекты</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Scale Hover */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Масштабирование при наведении</h4>
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center hover:scale-105 transition-transform cursor-pointer">
|
||||
<Package className="w-8 h-8 text-blue-400 mx-auto mb-2" />
|
||||
<p className="text-white/70 text-xs">scale-105</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center hover:scale-110 transition-transform cursor-pointer">
|
||||
<Truck className="w-8 h-8 text-green-400 mx-auto mb-2" />
|
||||
<p className="text-white/70 text-xs">scale-110</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center hover:scale-95 transition-transform cursor-pointer">
|
||||
<ShoppingCart className="w-8 h-8 text-purple-400 mx-auto mb-2" />
|
||||
<p className="text-white/70 text-xs">scale-95</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center hover:-translate-y-1 transition-transform cursor-pointer">
|
||||
<Star className="w-8 h-8 text-yellow-400 mx-auto mb-2" />
|
||||
<p className="text-white/70 text-xs">translate-y</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Color Hover */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Изменение цвета</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="hover:bg-blue-500 hover:border-blue-500 transition-colors"
|
||||
>
|
||||
Hover Blue
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="hover:bg-green-500 hover:border-green-500 transition-colors"
|
||||
>
|
||||
Hover Green
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="hover:bg-purple-500 hover:border-purple-500 transition-colors"
|
||||
>
|
||||
Hover Purple
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Shadow Hover */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Тени при наведении</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{[1, 2, 3].map((card) => (
|
||||
<div
|
||||
key={card}
|
||||
className="glass-card p-4 rounded-lg border border-white/10 cursor-pointer transition-all duration-300 hover:shadow-xl hover:shadow-purple-500/20"
|
||||
onMouseEnter={() => setHoveredCard(card)}
|
||||
onMouseLeave={() => setHoveredCard(null)}
|
||||
>
|
||||
<div className="text-center">
|
||||
<div className={`w-12 h-12 rounded-full mx-auto mb-3 flex items-center justify-center transition-all ${
|
||||
hoveredCard === card ? 'bg-purple-500/30 scale-110' : 'bg-white/10'
|
||||
}`}>
|
||||
<Sparkles className={`w-6 h-6 transition-colors ${
|
||||
hoveredCard === card ? 'text-purple-300' : 'text-white/60'
|
||||
}`} />
|
||||
</div>
|
||||
<p className="text-white font-medium">Карточка {card}</p>
|
||||
<p className="text-white/60 text-xs">Наведите для эффекта</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Transition эффекты */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Переходы (Transitions)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Duration Examples */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Продолжительность переходов</h4>
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="hover:bg-white/20 transition-all duration-75"
|
||||
>
|
||||
75ms
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="hover:bg-white/20 transition-all duration-150"
|
||||
>
|
||||
150ms
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="hover:bg-white/20 transition-all duration-300"
|
||||
>
|
||||
300ms
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="hover:bg-white/20 transition-all duration-500"
|
||||
>
|
||||
500ms
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Easing Examples */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Типы анимации</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="hover:scale-110 transition-transform duration-300 ease-linear"
|
||||
>
|
||||
Linear
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="hover:scale-110 transition-transform duration-300 ease-in-out"
|
||||
>
|
||||
Ease In Out
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="hover:scale-110 transition-transform duration-300 ease-out"
|
||||
>
|
||||
Ease Out
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Интерактивные анимации */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Интерактивные анимации</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Loading Progress */}
|
||||
<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 mb-4">
|
||||
<span className="text-white text-sm">Прогресс: {progress}%</span>
|
||||
<Button
|
||||
variant="glass"
|
||||
size="sm"
|
||||
onClick={startProgress}
|
||||
disabled={progress > 0 && progress < 100}
|
||||
>
|
||||
<Play className="h-4 w-4 mr-2" />
|
||||
Запустить
|
||||
</Button>
|
||||
</div>
|
||||
<Progress value={progress} className="mb-2" />
|
||||
<div className="text-xs text-white/60">
|
||||
{progress === 0 && "Нажмите 'Запустить' для начала"}
|
||||
{progress > 0 && progress < 100 && "Загрузка..."}
|
||||
{progress === 100 && "Загрузка завершена!"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading States */}
|
||||
<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 mb-4">
|
||||
<span className="text-white text-sm">Демо загрузки (3 сек)</span>
|
||||
<Button
|
||||
variant="glass"
|
||||
size="sm"
|
||||
onClick={showLoadingDemo}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader className="h-4 w-4 mr-2 animate-spin" />
|
||||
Загрузка...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Zap className="h-4 w-4 mr-2" />
|
||||
Загрузить
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{isLoading && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin"></div>
|
||||
<span className="text-white/70 text-sm">Подключение к серверу...</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-4 h-4 border-2 border-white/20 border-t-blue-400 rounded-full animate-spin"></div>
|
||||
<span className="text-white/70 text-sm">Загрузка данных...</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-4 h-4 border-2 border-white/20 border-t-green-400 rounded-full animate-spin"></div>
|
||||
<span className="text-white/70 text-sm">Обработка результата...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notification Animation */}
|
||||
<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 mb-4">
|
||||
<span className="text-white text-sm">Всплывающее уведомление</span>
|
||||
<Button
|
||||
variant="glass"
|
||||
size="sm"
|
||||
onClick={triggerNotification}
|
||||
>
|
||||
<Bell className="h-4 w-4 mr-2" />
|
||||
Показать
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{showNotification && (
|
||||
<div className="animate-in slide-in-from-right-5 duration-300">
|
||||
<div className="glass-card p-3 rounded-lg border border-green-500/30 bg-green-500/10">
|
||||
<div className="flex items-center space-x-3">
|
||||
<CheckCircle className="h-5 w-5 text-green-400" />
|
||||
<div>
|
||||
<div className="text-white font-medium text-sm">Успешно!</div>
|
||||
<div className="text-green-300/70 text-xs">Операция выполнена успешно</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Animation Toggle */}
|
||||
<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 mb-4">
|
||||
<span className="text-white text-sm">Управление анимацией</span>
|
||||
<Button
|
||||
variant="glass"
|
||||
size="sm"
|
||||
onClick={() => setIsAnimating(!isAnimating)}
|
||||
>
|
||||
{isAnimating ? (
|
||||
<>
|
||||
<Pause className="h-4 w-4 mr-2" />
|
||||
Остановить
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play className="h-4 w-4 mr-2" />
|
||||
Запустить
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<div className={`glass-card p-3 rounded-lg border border-white/10 text-center ${isAnimating ? 'animate-pulse' : ''}`}>
|
||||
<div className="w-8 h-8 bg-blue-400 rounded-full mx-auto mb-2"></div>
|
||||
<p className="text-white/70 text-xs">Pulse</p>
|
||||
</div>
|
||||
|
||||
<div className={`glass-card p-3 rounded-lg border border-white/10 text-center ${isAnimating ? 'animate-bounce' : ''}`}>
|
||||
<div className="w-8 h-8 bg-green-400 rounded-full mx-auto mb-2"></div>
|
||||
<p className="text-white/70 text-xs">Bounce</p>
|
||||
</div>
|
||||
|
||||
<div className={`glass-card p-3 rounded-lg border border-white/10 text-center ${isAnimating ? 'animate-spin' : ''}`}>
|
||||
<div className="w-8 h-8 bg-purple-400 rounded-full mx-auto mb-2"></div>
|
||||
<p className="text-white/70 text-xs">Spin</p>
|
||||
</div>
|
||||
|
||||
<div className={`glass-card p-3 rounded-lg border border-white/10 text-center transition-all duration-1000 ${isAnimating ? 'scale-110 rotate-12' : 'scale-100 rotate-0'}`}>
|
||||
<div className="w-8 h-8 bg-yellow-400 rounded-full mx-auto mb-2"></div>
|
||||
<p className="text-white/70 text-xs">Transform</p>
|
||||
</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">
|
||||
{/* Staggered Animation */}
|
||||
<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="grid grid-cols-5 gap-2">
|
||||
{[1, 2, 3, 4, 5].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className="h-16 bg-gradient-to-r from-purple-500/20 to-pink-500/20 rounded animate-pulse border border-white/10"
|
||||
style={{
|
||||
animationDelay: `${item * 0.2}s`,
|
||||
animationDuration: '2s'
|
||||
}}
|
||||
>
|
||||
<div className="h-full flex items-center justify-center text-white/70 text-sm">
|
||||
{item}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chain Animation */}
|
||||
<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="relative h-20">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-4 h-4 bg-blue-400 rounded-full animate-bounce"></div>
|
||||
<div className="flex-1 h-0.5 bg-white/20 mx-2"></div>
|
||||
<div className="w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
|
||||
<div className="flex-1 h-0.5 bg-white/20 mx-2"></div>
|
||||
<div className="w-4 h-4 bg-purple-400 rounded-full animate-spin"></div>
|
||||
<div className="flex-1 h-0.5 bg-white/20 mx-2"></div>
|
||||
<div className="w-4 h-4 bg-yellow-400 rounded-full animate-ping"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Flip Animation */}
|
||||
<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="grid grid-cols-3 gap-4">
|
||||
{[1, 2, 3].map((card) => (
|
||||
<div
|
||||
key={card}
|
||||
className="relative h-32 [perspective:1000px] cursor-pointer group"
|
||||
>
|
||||
<div className="relative w-full h-full transition-transform duration-700 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
|
||||
{/* Front */}
|
||||
<div className="absolute inset-0 glass-card rounded-lg border border-white/10 [backface-visibility:hidden] flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="w-8 h-8 bg-blue-400 rounded-full mx-auto mb-2"></div>
|
||||
<p className="text-white text-sm">Карточка {card}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Back */}
|
||||
<div className="absolute inset-0 glass-card rounded-lg border border-white/10 [backface-visibility:hidden] [transform:rotateY(180deg)] flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<Settings className="w-8 h-8 text-purple-400 mx-auto mb-2" />
|
||||
<p className="text-white text-sm">Настройки</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
733
src/components/admin/ui-kit/interactive-demo.tsx
Normal file
733
src/components/admin/ui-kit/interactive-demo.tsx
Normal file
@ -0,0 +1,733 @@
|
||||
"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 { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Slider } from '@/components/ui/slider'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Plus,
|
||||
Minus,
|
||||
Star,
|
||||
Heart,
|
||||
ThumbsUp,
|
||||
Share,
|
||||
Bookmark,
|
||||
Flag,
|
||||
MoreHorizontal,
|
||||
Settings,
|
||||
Filter,
|
||||
Search,
|
||||
Calendar,
|
||||
Clock,
|
||||
User,
|
||||
Bell,
|
||||
MessageCircle,
|
||||
Mail,
|
||||
Phone,
|
||||
MapPin,
|
||||
Globe,
|
||||
Zap,
|
||||
Shield,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Lock,
|
||||
Unlock,
|
||||
Copy,
|
||||
Check,
|
||||
X,
|
||||
AlertTriangle,
|
||||
Info,
|
||||
HelpCircle,
|
||||
ExternalLink,
|
||||
Download,
|
||||
Upload,
|
||||
Trash2,
|
||||
Edit3,
|
||||
Save,
|
||||
RefreshCw
|
||||
} from 'lucide-react'
|
||||
|
||||
export function InteractiveDemo() {
|
||||
const [rating, setRating] = useState(3)
|
||||
const [liked, setLiked] = useState(false)
|
||||
const [bookmarked, setBookmarked] = useState(false)
|
||||
const [sliderValue, setSliderValue] = useState([50])
|
||||
const [switchValue, setSwitchValue] = useState(false)
|
||||
const [checkboxValue, setCheckboxValue] = useState(false)
|
||||
const [counter, setCounter] = useState(5)
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [notifications, setNotifications] = useState(true)
|
||||
const [expandedCard, setExpandedCard] = useState<number | null>(null)
|
||||
const [selectedItems, setSelectedItems] = useState<number[]>([])
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
const handleCopy = () => {
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
|
||||
const toggleItemSelection = (id: number) => {
|
||||
setSelectedItems(prev =>
|
||||
prev.includes(id) ? prev.filter(item => item !== id) : [...prev, id]
|
||||
)
|
||||
}
|
||||
|
||||
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">
|
||||
{/* Action Buttons */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Кнопки действий</h4>
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<Button
|
||||
variant={liked ? "glass" : "outline"}
|
||||
onClick={() => setLiked(!liked)}
|
||||
className={liked ? "text-red-300" : ""}
|
||||
>
|
||||
<Heart className={`h-4 w-4 mr-2 ${liked ? 'fill-current' : ''}`} />
|
||||
{liked ? 'Понравилось' : 'Нравится'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant={bookmarked ? "glass" : "outline"}
|
||||
onClick={() => setBookmarked(!bookmarked)}
|
||||
className={bookmarked ? "text-yellow-300" : ""}
|
||||
>
|
||||
<Bookmark className={`h-4 w-4 mr-2 ${bookmarked ? 'fill-current' : ''}`} />
|
||||
{bookmarked ? 'Сохранено' : 'Сохранить'}
|
||||
</Button>
|
||||
|
||||
<Button variant="outline">
|
||||
<Share className="h-4 w-4 mr-2" />
|
||||
Поделиться
|
||||
</Button>
|
||||
|
||||
<Button variant="outline">
|
||||
<Flag className="h-4 w-4 mr-2" />
|
||||
Пожаловаться
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rating Stars */}
|
||||
<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-4">
|
||||
<span className="text-white text-sm">Оцените товар:</span>
|
||||
<div className="flex items-center space-x-1">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<button
|
||||
key={star}
|
||||
onClick={() => setRating(star)}
|
||||
className="text-2xl transition-colors hover:scale-110 transform"
|
||||
>
|
||||
<Star
|
||||
className={`h-6 w-6 ${
|
||||
star <= rating
|
||||
? 'text-yellow-400 fill-current'
|
||||
: 'text-white/30'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-white/60 text-sm">({rating} из 5)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Counter */}
|
||||
<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-4">
|
||||
<span className="text-white text-sm">Количество:</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setCounter(Math.max(0, counter - 1))}
|
||||
disabled={counter <= 0}
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<div className="w-16 text-center">
|
||||
<Input
|
||||
value={counter}
|
||||
onChange={(e) => setCounter(parseInt(e.target.value) || 0)}
|
||||
className="text-center glass-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setCounter(counter + 1)}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toggle Buttons */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Переключатели</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="notifications" className="text-white">Уведомления</Label>
|
||||
<Switch
|
||||
id="notifications"
|
||||
checked={notifications}
|
||||
onCheckedChange={setNotifications}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="agree"
|
||||
checked={checkboxValue}
|
||||
onCheckedChange={(checked) => setCheckboxValue(!!checked)}
|
||||
/>
|
||||
<Label htmlFor="agree" className="text-white text-sm">
|
||||
Согласен с условиями
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-white text-sm">Громкость</Label>
|
||||
<Slider
|
||||
value={sliderValue}
|
||||
onValueChange={setSliderValue}
|
||||
max={100}
|
||||
step={1}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="text-white/60 text-xs text-center">{sliderValue[0]}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Формы и инпуты */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Интерактивные формы</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Search Input */}
|
||||
<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-3">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/40" />
|
||||
<Input
|
||||
placeholder="Поиск товаров..."
|
||||
className="pl-10 glass-input"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="outline">
|
||||
<Filter className="h-4 w-4 mr-2" />
|
||||
Фильтры
|
||||
</Button>
|
||||
<Button variant="glass">
|
||||
<Search className="h-4 w-4 mr-2" />
|
||||
Найти
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password Input */}
|
||||
<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="space-y-2">
|
||||
<Label className="text-white">Пароль</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="Введите пароль"
|
||||
className="glass-input pr-10"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute right-0 top-0 h-full"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
>
|
||||
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Select Dropdown */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Выпадающие списки</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-white">Категория</Label>
|
||||
<Select>
|
||||
<SelectTrigger className="glass-input">
|
||||
<SelectValue placeholder="Выберите категорию" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="electronics">Электроника</SelectItem>
|
||||
<SelectItem value="clothing">Одежда</SelectItem>
|
||||
<SelectItem value="books">Книги</SelectItem>
|
||||
<SelectItem value="home">Дом и сад</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-white">Сортировка</Label>
|
||||
<Select>
|
||||
<SelectTrigger className="glass-input">
|
||||
<SelectValue placeholder="По умолчанию" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="name">По названию</SelectItem>
|
||||
<SelectItem value="price">По цене</SelectItem>
|
||||
<SelectItem value="date">По дате</SelectItem>
|
||||
<SelectItem value="rating">По рейтингу</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-white">Статус</Label>
|
||||
<Select>
|
||||
<SelectTrigger className="glass-input">
|
||||
<SelectValue placeholder="Все статусы" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="active">Активные</SelectItem>
|
||||
<SelectItem value="inactive">Неактивные</SelectItem>
|
||||
<SelectItem value="pending">Ожидающие</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Copy to Clipboard */}
|
||||
<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-3">
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
value="https://sferav.com/product/12345"
|
||||
readOnly
|
||||
className="glass-input"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
variant={copied ? "glass" : "outline"}
|
||||
onClick={handleCopy}
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="h-4 w-4 mr-2" />
|
||||
Скопировано
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
Копировать
|
||||
</>
|
||||
)}
|
||||
</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">
|
||||
{/* Alert Dialog */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Диалоги подтверждения</h4>
|
||||
<div className="flex items-center space-x-4">
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="outline" className="text-red-400 border-red-400/50">
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Удалить
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent className="glass-card">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="text-white">Подтвердите удаление</AlertDialogTitle>
|
||||
<AlertDialogDescription className="text-white/70">
|
||||
Это действие нельзя отменить. Товар будет окончательно удален из системы.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel className="glass-secondary">Отмена</AlertDialogCancel>
|
||||
<AlertDialogAction className="bg-red-500 hover:bg-red-600">Удалить</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="glass">
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
Сохранить
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent className="glass-card">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="text-white">Сохранить изменения?</AlertDialogTitle>
|
||||
<AlertDialogDescription className="text-white/70">
|
||||
Все внесенные изменения будут сохранены в системе.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel className="glass-secondary">Отмена</AlertDialogCancel>
|
||||
<AlertDialogAction className="bg-green-500 hover:bg-green-600">Сохранить</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="outline" className="text-yellow-400 border-yellow-400/50">
|
||||
<AlertTriangle className="h-4 w-4 mr-2" />
|
||||
Предупреждение
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent className="glass-card">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="text-white flex items-center">
|
||||
<AlertTriangle className="h-5 w-5 text-yellow-400 mr-2" />
|
||||
Внимание!
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription className="text-white/70">
|
||||
Эта операция может повлиять на работу системы. Продолжить?
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel className="glass-secondary">Отмена</AlertDialogCancel>
|
||||
<AlertDialogAction className="bg-yellow-500 hover:bg-yellow-600">Продолжить</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Regular Dialog */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Информационные диалоги</h4>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
Настройки
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="glass-card max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-white">Настройки системы</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-white">Темная тема</Label>
|
||||
<Switch />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-white">Уведомления</Label>
|
||||
<Switch checked />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-white">Автосохранение</Label>
|
||||
<Switch checked />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end space-x-2 mt-6">
|
||||
<Button variant="ghost">Отмена</Button>
|
||||
<Button variant="glass">Сохранить</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<Info className="h-4 w-4 mr-2" />
|
||||
Информация
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="glass-card max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-white">О системе SferaV</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="text-white/80">
|
||||
<p className="mb-4">
|
||||
SferaV - современная система управления бизнесом для фулфилмент-центров,
|
||||
селлеров, логистических компаний и оптовиков.
|
||||
</p>
|
||||
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Версия:</span>
|
||||
<span>1.0.0</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Сборка:</span>
|
||||
<span>2024.01.15</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Лицензия:</span>
|
||||
<span>MIT</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end space-x-2 mt-6">
|
||||
<Button variant="outline">
|
||||
<ExternalLink className="h-4 w-4 mr-2" />
|
||||
Сайт
|
||||
</Button>
|
||||
<Button variant="glass">Закрыть</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<HelpCircle className="h-4 w-4 mr-2" />
|
||||
Помощь
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="glass-card max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-white">Справка</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Tabs defaultValue="faq" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-3 bg-white/5">
|
||||
<TabsTrigger value="faq" className="data-[state=active]:bg-white/20">FAQ</TabsTrigger>
|
||||
<TabsTrigger value="contact" className="data-[state=active]:bg-white/20">Контакты</TabsTrigger>
|
||||
<TabsTrigger value="docs" className="data-[state=active]:bg-white/20">Документация</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="faq" className="space-y-4 mt-4">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h5 className="text-white font-medium">Как добавить товар?</h5>
|
||||
<p className="text-white/70 text-sm">Перейдите в раздел "Склад" и нажмите кнопку "Добавить товар".</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-white font-medium">Как связаться с поддержкой?</h5>
|
||||
<p className="text-white/70 text-sm">Используйте вкладку "Контакты" в этом окне.</p>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="contact" className="space-y-4 mt-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Mail className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-white">support@sferav.com</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Phone className="h-4 w-4 text-green-400" />
|
||||
<span className="text-white">+7 (495) 123-45-67</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<MessageCircle className="h-4 w-4 text-purple-400" />
|
||||
<span className="text-white">Telegram: @sferav_support</span>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="docs" className="space-y-4 mt-4">
|
||||
<div className="space-y-2">
|
||||
<Button variant="ghost" className="w-full justify-start">
|
||||
<ExternalLink className="h-4 w-4 mr-2" />
|
||||
Руководство пользователя
|
||||
</Button>
|
||||
<Button variant="ghost" className="w-full justify-start">
|
||||
<ExternalLink className="h-4 w-4 mr-2" />
|
||||
API документация
|
||||
</Button>
|
||||
<Button variant="ghost" className="w-full justify-start">
|
||||
<ExternalLink className="h-4 w-4 mr-2" />
|
||||
Видео уроки
|
||||
</Button>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Расширяемые элементы */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Расширяемые элементы</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Expandable Cards */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Расширяемые карточки</h4>
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3].map((card) => (
|
||||
<div key={card} className="glass-card rounded-lg border border-white/10 overflow-hidden">
|
||||
<div
|
||||
className="p-4 cursor-pointer flex items-center justify-between hover:bg-white/5 transition-colors"
|
||||
onClick={() => setExpandedCard(expandedCard === card ? null : card)}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center">
|
||||
<Settings className="h-5 w-5 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-white font-medium">Настройка {card}</div>
|
||||
<div className="text-white/60 text-sm">Описание настройки {card}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{expandedCard === card ? (
|
||||
<ChevronUp className="h-5 w-5 text-white/60" />
|
||||
) : (
|
||||
<ChevronDown className="h-5 w-5 text-white/60" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{expandedCard === card && (
|
||||
<div className="px-4 pb-4 border-t border-white/10">
|
||||
<div className="mt-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-white">Включить функцию</Label>
|
||||
<Switch />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-white">Уровень</Label>
|
||||
<Slider defaultValue={[50]} max={100} step={1} />
|
||||
</div>
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button variant="ghost" size="sm">Сбросить</Button>
|
||||
<Button variant="glass" size="sm">Применить</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selectable List */}
|
||||
<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 mb-4">
|
||||
<span className="text-white text-sm">
|
||||
Выбрано: {selectedItems.length} из 5
|
||||
</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedItems([])}
|
||||
>
|
||||
Очистить
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedItems([1, 2, 3, 4, 5])}
|
||||
>
|
||||
Выбрать все
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3, 4, 5].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className={`p-3 rounded-lg border cursor-pointer transition-all ${
|
||||
selectedItems.includes(item)
|
||||
? 'border-blue-500/50 bg-blue-500/10'
|
||||
: 'border-white/10 hover:bg-white/5'
|
||||
}`}
|
||||
onClick={() => toggleItemSelection(item)}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Checkbox
|
||||
checked={selectedItems.includes(item)}
|
||||
onCheckedChange={() => toggleItemSelection(item)}
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="text-white font-medium">Элемент {item}</div>
|
||||
<div className="text-white/60 text-sm">Описание элемента {item}</div>
|
||||
</div>
|
||||
{selectedItems.includes(item) && (
|
||||
<Check className="h-4 w-4 text-blue-400" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{selectedItems.length > 0 && (
|
||||
<div className="mt-4 flex justify-end space-x-2">
|
||||
<Button variant="outline" size="sm">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Экспорт
|
||||
</Button>
|
||||
<Button variant="glass" size="sm">
|
||||
<Edit3 className="h-4 w-4 mr-2" />
|
||||
Редактировать
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
427
src/components/admin/ui-kit/layouts-demo.tsx
Normal file
427
src/components/admin/ui-kit/layouts-demo.tsx
Normal file
@ -0,0 +1,427 @@
|
||||
"use client"
|
||||
|
||||
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 {
|
||||
Layout,
|
||||
Sidebar as SidebarIcon,
|
||||
Monitor,
|
||||
Smartphone,
|
||||
Menu,
|
||||
ChevronRight,
|
||||
Home,
|
||||
Settings,
|
||||
Users,
|
||||
MessageCircle,
|
||||
Building,
|
||||
Plus
|
||||
} from 'lucide-react'
|
||||
|
||||
export function LayoutsDemo() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Основные Layout паттерны */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Основные Layout паттерны</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Sidebar Layout */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Sidebar Layout</h4>
|
||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||
<div className="h-40 bg-white/5 rounded-lg border border-white/10 flex">
|
||||
{/* Sidebar */}
|
||||
<div className="w-16 bg-white/10 rounded-l-lg border-r border-white/10 flex flex-col items-center py-3 space-y-2">
|
||||
<div className="w-8 h-8 bg-primary/30 rounded-lg flex items-center justify-center">
|
||||
<Home className="h-4 w-4 text-primary" />
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center">
|
||||
<Users className="h-4 w-4 text-white/60" />
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center">
|
||||
<MessageCircle className="h-4 w-4 text-white/60" />
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center">
|
||||
<Settings className="h-4 w-4 text-white/60" />
|
||||
</div>
|
||||
</div>
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 p-4">
|
||||
<div className="h-4 bg-white/20 rounded mb-2"></div>
|
||||
<div className="h-2 bg-white/10 rounded mb-2 w-3/4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-12 bg-white/5 rounded border border-white/10"></div>
|
||||
<div className="h-12 bg-white/5 rounded border border-white/10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||
Sidebar + Main Content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Full Sidebar Layout */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Full Sidebar Layout</h4>
|
||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||
<div className="h-40 bg-white/5 rounded-lg border border-white/10 flex">
|
||||
{/* Full Sidebar */}
|
||||
<div className="w-48 bg-white/10 rounded-l-lg border-r border-white/10 p-3 space-y-3">
|
||||
{/* Profile */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-primary/30 rounded-full"></div>
|
||||
<div className="flex-1">
|
||||
<div className="h-2 bg-white/30 rounded mb-1"></div>
|
||||
<div className="h-1.5 bg-white/20 rounded w-2/3"></div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Menu Items */}
|
||||
<div className="space-y-1">
|
||||
<div className="h-8 bg-primary/20 rounded flex items-center px-2">
|
||||
<div className="w-4 h-4 bg-primary/50 rounded mr-2"></div>
|
||||
<div className="h-1.5 bg-primary/70 rounded flex-1"></div>
|
||||
</div>
|
||||
<div className="h-8 bg-white/5 rounded flex items-center px-2">
|
||||
<div className="w-4 h-4 bg-white/20 rounded mr-2"></div>
|
||||
<div className="h-1.5 bg-white/30 rounded flex-1"></div>
|
||||
</div>
|
||||
<div className="h-8 bg-white/5 rounded flex items-center px-2">
|
||||
<div className="w-4 h-4 bg-white/20 rounded mr-2"></div>
|
||||
<div className="h-1.5 bg-white/30 rounded flex-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 p-4">
|
||||
<div className="h-4 bg-white/20 rounded mb-2"></div>
|
||||
<div className="h-2 bg-white/10 rounded mb-2 w-3/4"></div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="h-16 bg-white/5 rounded border border-white/10"></div>
|
||||
<div className="h-16 bg-white/5 rounded border border-white/10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||
Full Sidebar с профилем и навигацией
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid Layout */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Grid Layout</h4>
|
||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||
<div className="h-32 bg-white/5 rounded-lg border border-white/10 p-3">
|
||||
<div className="grid grid-cols-3 gap-2 h-full">
|
||||
<div className="bg-white/10 rounded border border-white/10"></div>
|
||||
<div className="bg-white/10 rounded border border-white/10"></div>
|
||||
<div className="bg-white/10 rounded border border-white/10"></div>
|
||||
<div className="bg-white/10 rounded border border-white/10"></div>
|
||||
<div className="bg-white/10 rounded border border-white/10"></div>
|
||||
<div className="bg-white/10 rounded border border-white/10"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||
Grid 3x2 layout
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Split Layout */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Split Layout (Мессенджер)</h4>
|
||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||
<div className="h-40 bg-white/5 rounded-lg border border-white/10 flex">
|
||||
{/* Left Panel */}
|
||||
<div className="w-1/3 bg-white/10 rounded-l-lg border-r border-white/10 p-3">
|
||||
<div className="h-3 bg-white/30 rounded mb-3"></div>
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3, 4].map((item) => (
|
||||
<div key={item} className="flex items-center space-x-2 p-2 bg-white/5 rounded">
|
||||
<div className="w-8 h-8 bg-primary/30 rounded-full"></div>
|
||||
<div className="flex-1">
|
||||
<div className="h-2 bg-white/30 rounded mb-1"></div>
|
||||
<div className="h-1.5 bg-white/20 rounded w-2/3"></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Right Panel */}
|
||||
<div className="flex-1 p-3 flex flex-col">
|
||||
<div className="h-3 bg-white/30 rounded mb-2"></div>
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="flex">
|
||||
<div className="bg-white/10 rounded-lg p-2 max-w-xs">
|
||||
<div className="h-1.5 bg-white/30 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<div className="bg-primary/20 rounded-lg p-2 max-w-xs">
|
||||
<div className="h-1.5 bg-primary/60 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-8 bg-white/10 rounded border border-white/10"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||
Split layout для чатов
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* AuthLayout */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Auth Layout</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||
<div className="h-48 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-lg border border-white/10 flex">
|
||||
{/* Left Side - Branding */}
|
||||
<div className="w-1/2 p-6 flex flex-col justify-center">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-gradient-bright mb-2">SferaV</div>
|
||||
<div className="text-white/70 text-sm mb-4">Управление бизнесом</div>
|
||||
<div className="space-y-2">
|
||||
<div className="bg-white/10 rounded p-2 text-xs text-white/70">
|
||||
🚚 Фулфилмент
|
||||
</div>
|
||||
<div className="bg-white/10 rounded p-2 text-xs text-white/70">
|
||||
📦 Логистика
|
||||
</div>
|
||||
<div className="bg-white/10 rounded p-2 text-xs text-white/70">
|
||||
🛒 Селлер
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Right Side - Form */}
|
||||
<div className="w-1/2 p-6 flex items-center justify-center">
|
||||
<div className="w-full max-w-xs glass-card p-4">
|
||||
<div className="text-center mb-3">
|
||||
<div className="h-3 bg-white/30 rounded mb-2"></div>
|
||||
<div className="h-1 bg-white/20 rounded"></div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="h-8 glass-input rounded border border-white/20"></div>
|
||||
<div className="h-8 glass-button rounded text-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||
Двухколоночный layout для авторизации
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Adaptive Layouts */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Адаптивные Layout</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Desktop */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3 flex items-center">
|
||||
<Monitor className="h-4 w-4 mr-2 text-blue-400" />
|
||||
Desktop
|
||||
</h4>
|
||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||
<div className="h-32 bg-white/5 rounded-lg border border-white/10 flex">
|
||||
<div className="w-56 bg-white/10 border-r border-white/10 p-2">
|
||||
<div className="text-xs text-white/60 text-center">Sidebar</div>
|
||||
</div>
|
||||
<div className="flex-1 p-2">
|
||||
<div className="text-xs text-white/60 text-center">Main Content</div>
|
||||
<div className="grid grid-cols-3 gap-1 mt-2 h-20">
|
||||
<div className="bg-white/10 rounded"></div>
|
||||
<div className="bg-white/10 rounded"></div>
|
||||
<div className="bg-white/10 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||
lg:grid-cols-3 lg:gap-6
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3 flex items-center">
|
||||
<Smartphone className="h-4 w-4 mr-2 text-green-400" />
|
||||
Mobile
|
||||
</h4>
|
||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||
<div className="w-40 mx-auto">
|
||||
<div className="h-40 bg-white/5 rounded-lg border border-white/10 flex flex-col">
|
||||
{/* Mobile Header */}
|
||||
<div className="h-8 bg-white/10 border-b border-white/10 flex items-center justify-between px-2">
|
||||
<Menu className="h-3 w-3 text-white/60" />
|
||||
<div className="text-xs text-white/60">SferaV</div>
|
||||
<div className="w-3"></div>
|
||||
</div>
|
||||
{/* Mobile Content */}
|
||||
<div className="flex-1 p-2">
|
||||
<div className="space-y-1">
|
||||
<div className="h-12 bg-white/10 rounded"></div>
|
||||
<div className="h-12 bg-white/10 rounded"></div>
|
||||
<div className="h-12 bg-white/10 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/60 font-mono text-center">
|
||||
grid-cols-1 gap-3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Sidebar Examples */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Компоненты Sidebar</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Mini Sidebar */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Mini Sidebar</h4>
|
||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||
<div className="w-16 glass-sidebar rounded-lg p-2 space-y-2">
|
||||
<div className="flex items-center justify-center">
|
||||
<Avatar className="h-8 w-8 bg-primary/30">
|
||||
<AvatarFallback className="bg-primary/30 text-white text-xs">SF</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<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">
|
||||
<Users 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">
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||
Компактный sidebar (w-16)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Full Sidebar */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Full Sidebar</h4>
|
||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||
<div className="w-56 glass-sidebar rounded-lg p-4 space-y-4">
|
||||
{/* Profile */}
|
||||
<div className="flex items-center space-x-3 pb-4 border-b border-white/10">
|
||||
<Avatar className="h-10 w-10 bg-primary/30">
|
||||
<AvatarFallback className="bg-primary/30 text-white">SF</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="text-white font-medium text-sm">SferaV Inc</div>
|
||||
<Badge variant="outline" className="border-primary/50 text-primary text-xs">
|
||||
Фулфилмент
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<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">
|
||||
<Users 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">
|
||||
<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 className="mt-2 text-xs text-white/60 font-mono">
|
||||
Полный sidebar с профилем (w-56)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Spacing and Structure */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Структура и отступы</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Container */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Container Patterns</h4>
|
||||
<div className="space-y-4">
|
||||
<div className="bg-white/5 rounded-lg p-6 border border-white/10">
|
||||
<div className="text-xs text-white/60 mb-2">p-6 (24px padding)</div>
|
||||
<div className="bg-white/10 rounded p-4">
|
||||
<div className="text-xs text-white/60 mb-2">p-4 (16px padding)</div>
|
||||
<div className="bg-white/20 rounded p-2">
|
||||
<div className="text-xs text-white/60">p-2 (8px padding)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Spacing */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Space Patterns</h4>
|
||||
<div className="space-y-6">
|
||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||
<div className="text-xs text-white/60 mb-3">space-y-6</div>
|
||||
<div className="space-y-6">
|
||||
<div className="h-8 bg-white/20 rounded"></div>
|
||||
<div className="h-8 bg-white/20 rounded"></div>
|
||||
<div className="h-8 bg-white/20 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
|
||||
<div className="text-xs text-white/60 mb-3">space-y-3</div>
|
||||
<div className="space-y-3">
|
||||
<div className="h-8 bg-white/20 rounded"></div>
|
||||
<div className="h-8 bg-white/20 rounded"></div>
|
||||
<div className="h-8 bg-white/20 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
591
src/components/admin/ui-kit/media-demo.tsx
Normal file
591
src/components/admin/ui-kit/media-demo.tsx
Normal file
@ -0,0 +1,591 @@
|
||||
"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 {
|
||||
Play,
|
||||
Pause,
|
||||
Volume2,
|
||||
VolumeX,
|
||||
SkipBack,
|
||||
SkipForward,
|
||||
Download,
|
||||
Share,
|
||||
MoreVertical,
|
||||
Maximize2,
|
||||
Minimize2,
|
||||
Image as ImageIcon,
|
||||
FileText,
|
||||
File,
|
||||
Archive,
|
||||
Video,
|
||||
Music,
|
||||
Mic,
|
||||
Camera,
|
||||
Upload,
|
||||
X,
|
||||
Eye,
|
||||
ZoomIn,
|
||||
ZoomOut,
|
||||
RotateCcw,
|
||||
Crop,
|
||||
Edit3,
|
||||
Trash2,
|
||||
Copy,
|
||||
ExternalLink,
|
||||
Paperclip,
|
||||
Folder,
|
||||
Search
|
||||
} from 'lucide-react'
|
||||
|
||||
export function MediaDemo() {
|
||||
const [isPlaying, setIsPlaying] = useState(false)
|
||||
const [isMuted, setIsMuted] = useState(false)
|
||||
const [volume, setVolume] = useState(75)
|
||||
const [progress, setProgress] = useState(30)
|
||||
const [isFullscreen, setIsFullscreen] = useState(false)
|
||||
const [selectedFile, setSelectedFile] = useState<number | null>(null)
|
||||
|
||||
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">
|
||||
{/* Audio Player */}
|
||||
<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-4">
|
||||
{/* Play/Pause Button */}
|
||||
<Button
|
||||
variant="glass"
|
||||
size="icon"
|
||||
onClick={() => setIsPlaying(!isPlaying)}
|
||||
className="w-12 h-12"
|
||||
>
|
||||
{isPlaying ? <Pause className="h-6 w-6" /> : <Play className="h-6 w-6" />}
|
||||
</Button>
|
||||
|
||||
{/* Progress and Time */}
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Volume2 className="h-4 w-4 text-white/60" />
|
||||
<div className="flex-1 h-1 bg-white/20 rounded-full overflow-hidden cursor-pointer">
|
||||
<div
|
||||
className="h-full bg-blue-400 transition-all duration-300"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center text-xs text-white/60">
|
||||
<span>1:23</span>
|
||||
<span className="text-white font-medium">Голосовое сообщение</span>
|
||||
<span>4:15</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setIsMuted(!isMuted)}
|
||||
>
|
||||
{isMuted ? <VolumeX className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Download className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Voice Recorder */}
|
||||
<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="icon" className="w-12 h-12">
|
||||
<Mic className="h-6 w-6" />
|
||||
</Button>
|
||||
|
||||
<div>
|
||||
<div className="text-white font-medium">Запись голоса</div>
|
||||
<div className="text-white/60 text-sm">Нажмите для начала записи</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex space-x-1">
|
||||
<div className="w-1 h-8 bg-white/30 rounded animate-pulse"></div>
|
||||
<div className="w-1 h-6 bg-white/30 rounded animate-pulse" style={{ animationDelay: '0.1s' }}></div>
|
||||
<div className="w-1 h-10 bg-white/30 rounded animate-pulse" style={{ animationDelay: '0.2s' }}></div>
|
||||
<div className="w-1 h-4 bg-white/30 rounded animate-pulse" style={{ animationDelay: '0.3s' }}></div>
|
||||
<div className="w-1 h-8 bg-white/30 rounded animate-pulse" style={{ animationDelay: '0.4s' }}></div>
|
||||
</div>
|
||||
<span className="text-white/60 text-sm">0:05</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mini Audio Controls */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Мини-контролы</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="glass-card p-3 rounded-lg border border-white/10">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button variant="ghost" size="icon" className="w-8 h-8">
|
||||
<Play className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="flex-1">
|
||||
<div className="h-1 bg-white/20 rounded-full">
|
||||
<div className="h-full w-1/3 bg-blue-400 rounded-full"></div>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-white/60 mt-1">
|
||||
<span>0:12</span>
|
||||
<span>0:38</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-3 rounded-lg border border-white/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Music className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-white text-sm">Аудио</span>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" className="w-6 h-6">
|
||||
<Download className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-3 rounded-lg border border-white/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-2 h-2 bg-red-400 rounded-full animate-pulse"></div>
|
||||
<span className="text-white text-sm">Запись</span>
|
||||
</div>
|
||||
<span className="text-white/60 text-xs">1:23</span>
|
||||
</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">
|
||||
{/* Image Gallery */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Галерея изображений</h4>
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
{[1, 2, 3, 4].map((image) => (
|
||||
<div
|
||||
key={image}
|
||||
className="relative group glass-card rounded-lg border border-white/10 overflow-hidden aspect-square cursor-pointer"
|
||||
onClick={() => setSelectedFile(image)}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center">
|
||||
<ImageIcon className="h-12 w-12 text-white/30" />
|
||||
</div>
|
||||
|
||||
{/* Overlay */}
|
||||
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button variant="ghost" size="icon" className="w-8 h-8 bg-white/20">
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="w-8 h-8 bg-white/20">
|
||||
<Download className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="w-8 h-8 bg-white/20">
|
||||
<Share className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Badge */}
|
||||
<div className="absolute top-2 left-2">
|
||||
<Badge className="bg-white/20 text-white text-xs">
|
||||
IMG {image}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image Viewer */}
|
||||
<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">
|
||||
{selectedFile ? (
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<ImageIcon className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<div className="text-white font-medium">image_{selectedFile}.jpg</div>
|
||||
<div className="text-white/60 text-sm">1920×1080 • 2.4 MB</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button variant="ghost" size="icon">
|
||||
<ZoomIn className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<ZoomOut className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Download className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSelectedFile(null)}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image Preview */}
|
||||
<div className="h-64 bg-white/5 rounded-lg border border-white/10 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<ImageIcon className="h-16 w-16 text-white/30 mx-auto mb-2" />
|
||||
<p className="text-white/60">Предпросмотр изображения #{selectedFile}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button variant="glass" size="sm">
|
||||
<Edit3 className="h-4 w-4 mr-2" />
|
||||
Редактировать
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<Crop className="h-4 w-4 mr-2" />
|
||||
Обрезать
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button variant="outline" size="sm">
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
Копировать
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="text-red-400">
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Удалить
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-64 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<ImageIcon className="h-16 w-16 text-white/30 mx-auto mb-4" />
|
||||
<p className="text-white/60">Выберите изображение для просмотра</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image Upload */}
|
||||
<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 border-dashed">
|
||||
<div className="text-center">
|
||||
<Camera className="h-12 w-12 text-white/40 mx-auto mb-4" />
|
||||
<div className="text-white font-medium mb-2">Перетащите изображения сюда</div>
|
||||
<div className="text-white/60 text-sm mb-4">или нажмите для выбора файлов</div>
|
||||
|
||||
<Button variant="glass" className="mb-4">
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
Выбрать файлы
|
||||
</Button>
|
||||
|
||||
<div className="text-white/40 text-xs">
|
||||
Поддерживаются: JPG, PNG, GIF до 10MB
|
||||
</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">
|
||||
{/* File List */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Список файлов</h4>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
{ name: 'договор.pdf', size: '2.4 MB', type: 'pdf', icon: FileText, color: 'text-red-400' },
|
||||
{ name: 'презентация.pptx', size: '8.1 MB', type: 'presentation', icon: File, color: 'text-orange-400' },
|
||||
{ name: 'архив.zip', size: '15.6 MB', type: 'archive', icon: Archive, color: 'text-purple-400' },
|
||||
{ name: 'видео.mp4', size: '45.2 MB', type: 'video', icon: Video, color: 'text-blue-400' },
|
||||
{ name: 'аудио.mp3', size: '5.8 MB', type: 'audio', icon: Music, color: 'text-green-400' }
|
||||
].map((file, index) => (
|
||||
<div key={index} className="glass-card p-3 rounded-lg border border-white/10 flex items-center space-x-3 hover:bg-white/5 transition-colors cursor-pointer">
|
||||
<div className={`w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center ${file.color}`}>
|
||||
<file.icon className="h-5 w-5" />
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="text-white font-medium text-sm">{file.name}</div>
|
||||
<div className="text-white/60 text-xs">
|
||||
{file.size} • {file.type}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-1">
|
||||
<Button variant="ghost" size="icon" className="w-8 h-8">
|
||||
<Eye className="h-4 w-4 text-white/60" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="w-8 h-8">
|
||||
<Download className="h-4 w-4 text-white/60" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="w-8 h-8">
|
||||
<MoreVertical className="h-4 w-4 text-white/60" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* File Upload Progress */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Прогресс загрузки</h4>
|
||||
<div className="space-y-3">
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<div className="flex items-center space-x-3 mb-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
|
||||
<Upload className="h-5 w-5 text-blue-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-white font-medium text-sm">отчет.xlsx</div>
|
||||
<div className="text-white/60 text-xs">3.2 MB • Загружается...</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" className="w-8 h-8">
|
||||
<X className="h-4 w-4 text-white/60" />
|
||||
</Button>
|
||||
</div>
|
||||
<Progress value={65} className="h-2" />
|
||||
<div className="flex justify-between text-xs text-white/60 mt-2">
|
||||
<span>65% • 2.1 MB из 3.2 MB</span>
|
||||
<span>~30 сек</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-green-500/30 bg-green-500/10">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
|
||||
<FileText className="h-5 w-5 text-green-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-white font-medium text-sm">документ.pdf</div>
|
||||
<div className="text-green-300/70 text-xs">1.8 MB • Загружен</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" className="w-8 h-8">
|
||||
<ExternalLink className="h-4 w-4 text-green-400" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* File Attachments */}
|
||||
<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-3 mb-4">
|
||||
<Paperclip className="h-5 w-5 text-white/60" />
|
||||
<div>
|
||||
<div className="text-white font-medium">Прикрепленные файлы</div>
|
||||
<div className="text-white/60 text-sm">3 файла • 12.4 MB</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
{ name: 'техзадание.docx', size: '2.1 MB', icon: FileText },
|
||||
{ name: 'макеты.zip', size: '8.7 MB', icon: Archive },
|
||||
{ name: 'презентация.pdf', size: '1.6 MB', icon: FileText }
|
||||
].map((file, index) => (
|
||||
<div key={index} className="flex items-center space-x-3 p-2 rounded hover:bg-white/5 transition-colors">
|
||||
<file.icon className="h-4 w-4 text-white/60" />
|
||||
<div className="flex-1">
|
||||
<div className="text-white text-sm">{file.name}</div>
|
||||
<div className="text-white/40 text-xs">{file.size}</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" className="w-6 h-6">
|
||||
<Download className="h-3 w-3 text-white/60" />
|
||||
</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">
|
||||
{/* Video Player */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Видео плеер</h4>
|
||||
<div className="glass-card rounded-lg border border-white/10 overflow-hidden">
|
||||
{/* Video Area */}
|
||||
<div className="relative h-64 bg-black/30 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<Video className="h-16 w-16 text-white/40 mx-auto mb-2" />
|
||||
<p className="text-white/60">Видео плеер</p>
|
||||
</div>
|
||||
|
||||
{/* Play Overlay */}
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/20">
|
||||
<Button
|
||||
variant="glass"
|
||||
size="icon"
|
||||
className="w-16 h-16"
|
||||
onClick={() => setIsPlaying(!isPlaying)}
|
||||
>
|
||||
{isPlaying ? <Pause className="h-8 w-8" /> : <Play className="h-8 w-8" />}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Fullscreen Toggle */}
|
||||
<div className="absolute top-4 right-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="bg-black/50"
|
||||
onClick={() => setIsFullscreen(!isFullscreen)}
|
||||
>
|
||||
{isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Video Controls */}
|
||||
<div className="p-4 space-y-3">
|
||||
{/* Progress Bar */}
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-white/60 text-sm">2:34</span>
|
||||
<div className="flex-1 h-1 bg-white/20 rounded-full cursor-pointer">
|
||||
<div
|
||||
className="h-full bg-red-500 rounded-full transition-all"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-white/60 text-sm">8:15</span>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button variant="ghost" size="icon">
|
||||
<SkipBack className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="glass"
|
||||
size="icon"
|
||||
onClick={() => setIsPlaying(!isPlaying)}
|
||||
>
|
||||
{isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<SkipForward className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setIsMuted(!isMuted)}
|
||||
>
|
||||
{isMuted ? <VolumeX className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
|
||||
</Button>
|
||||
|
||||
<div className="w-20 h-1 bg-white/20 rounded-full">
|
||||
<div
|
||||
className="h-full bg-white rounded-full"
|
||||
style={{ width: `${isMuted ? 0 : volume}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Video Thumbnails */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Превью видео</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{[1, 2, 3].map((video) => (
|
||||
<div key={video} className="glass-card rounded-lg border border-white/10 overflow-hidden cursor-pointer group">
|
||||
<div className="relative h-32 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center">
|
||||
<Video className="h-8 w-8 text-white/40" />
|
||||
|
||||
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||
<Play className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-2 right-2">
|
||||
<Badge className="bg-black/70 text-white text-xs">5:23</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3">
|
||||
<div className="text-white font-medium text-sm mb-1">Видео презентация {video}</div>
|
||||
<div className="text-white/60 text-xs">1080p • 12.5 MB</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
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>
|
||||
)
|
||||
}
|
||||
661
src/components/admin/ui-kit/specialized-demo.tsx
Normal file
661
src/components/admin/ui-kit/specialized-demo.tsx
Normal file
@ -0,0 +1,661 @@
|
||||
"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 { Input } from '@/components/ui/input'
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import {
|
||||
MessageCircle,
|
||||
Send,
|
||||
Paperclip,
|
||||
Smile,
|
||||
Play,
|
||||
Pause,
|
||||
Volume2,
|
||||
Download,
|
||||
ShoppingCart,
|
||||
Plus,
|
||||
Minus,
|
||||
Trash2,
|
||||
Star,
|
||||
Heart,
|
||||
Package,
|
||||
Building,
|
||||
Users,
|
||||
Phone,
|
||||
Mail,
|
||||
MapPin,
|
||||
FileText,
|
||||
Image as ImageIcon,
|
||||
Mic,
|
||||
MoreVertical,
|
||||
Search,
|
||||
Filter,
|
||||
Eye,
|
||||
Calendar,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
XCircle
|
||||
} from 'lucide-react'
|
||||
|
||||
export function SpecializedDemo() {
|
||||
const [cartQuantity, setCartQuantity] = useState(2)
|
||||
const [isFavorite, setIsFavorite] = useState(false)
|
||||
const [isPlaying, setIsPlaying] = useState(false)
|
||||
|
||||
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">
|
||||
{/* Chat Interface */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Интерфейс чата</h4>
|
||||
<div className="glass-card rounded-lg border border-white/10 h-80 flex">
|
||||
{/* Chat List */}
|
||||
<div className="w-80 border-r border-white/10 p-4 space-y-3">
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<Users className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<h5 className="text-white font-medium">Контрагенты</h5>
|
||||
<p className="text-white/60 text-sm">4 активных</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/40" />
|
||||
<Input placeholder="Поиск..." className="pl-10 glass-input text-white" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="glass-card p-3 rounded-lg border border-primary/30 bg-primary/10">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Avatar className="h-10 w-10 bg-blue-500/30">
|
||||
<AvatarFallback className="bg-blue-500/30 text-white">ЛК</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-white font-medium text-sm">ЛогКом ООО</span>
|
||||
<Badge className="bg-orange-500/20 text-orange-300 text-xs">Логистика</Badge>
|
||||
</div>
|
||||
<p className="text-white/60 text-xs">Последнее сообщение...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-3 rounded-lg border border-white/10">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Avatar className="h-10 w-10 bg-green-500/30">
|
||||
<AvatarFallback className="bg-green-500/30 text-white">СМ</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-white font-medium text-sm">СеллерМакс</span>
|
||||
<Badge className="bg-green-500/20 text-green-300 text-xs">Селлер</Badge>
|
||||
</div>
|
||||
<p className="text-white/60 text-xs">Когда будет поставка?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-3 rounded-lg border border-white/10">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Avatar className="h-10 w-10 bg-purple-500/30">
|
||||
<AvatarFallback className="bg-purple-500/30 text-white">ОТ</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-white font-medium text-sm">ОптТорг</span>
|
||||
<Badge className="bg-purple-500/20 text-purple-300 text-xs">Оптовик</Badge>
|
||||
</div>
|
||||
<p className="text-white/60 text-xs">Новый прайс готов</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chat Window */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
{/* Chat Header */}
|
||||
<div className="p-4 border-b border-white/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Avatar className="h-10 w-10 bg-blue-500/30">
|
||||
<AvatarFallback className="bg-blue-500/30 text-white">ЛК</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-white font-medium">ЛогКом ООО</span>
|
||||
<Badge className="bg-orange-500/20 text-orange-300 text-xs">Логистика</Badge>
|
||||
</div>
|
||||
<p className="text-white/60 text-sm">Логистическая компания</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreVertical className="h-4 w-4 text-white/60" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
<div className="flex-1 p-4 space-y-4 overflow-y-auto">
|
||||
{/* Incoming Message */}
|
||||
<div className="flex">
|
||||
<div className="max-w-xs">
|
||||
<div className="bg-white/10 border border-white/20 rounded-lg p-3">
|
||||
<p className="text-white text-sm">Привет! Как дела с доставкой?</p>
|
||||
</div>
|
||||
<p className="text-white/50 text-xs mt-1">10:30</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Outgoing Message */}
|
||||
<div className="flex justify-end">
|
||||
<div className="max-w-xs">
|
||||
<div className="bg-blue-500/20 border border-blue-500/30 rounded-lg p-3">
|
||||
<p className="text-white text-sm">Все отлично! Груз уже в пути</p>
|
||||
</div>
|
||||
<p className="text-blue-300/70 text-xs mt-1 text-right">10:32</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Voice Message */}
|
||||
<div className="flex">
|
||||
<div className="max-w-xs">
|
||||
<div className="bg-white/10 border border-white/20 rounded-lg p-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsPlaying(!isPlaying)}
|
||||
className="text-white hover:bg-white/20"
|
||||
>
|
||||
{isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
|
||||
</Button>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Volume2 className="h-3 w-3 text-white/60" />
|
||||
<div className="flex-1 h-1 bg-white/20 rounded-full">
|
||||
<div className="h-full w-1/3 bg-white/60 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-white/50 mt-1">
|
||||
<span>0:08</span>
|
||||
<span>0:24</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-white/50 text-xs mt-1">10:35</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* File Message */}
|
||||
<div className="flex justify-end">
|
||||
<div className="max-w-xs">
|
||||
<div className="bg-blue-500/20 border border-blue-500/30 rounded-lg p-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-blue-500/30 rounded-lg flex items-center justify-center">
|
||||
<FileText className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-white font-medium text-sm">договор.pdf</p>
|
||||
<p className="text-blue-300/70 text-xs">2.4 MB • PDF</p>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" className="text-blue-300">
|
||||
<Download className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-blue-300/70 text-xs mt-1 text-right">10:38</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Message Input */}
|
||||
<div className="p-4 border-t border-white/10">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
placeholder="Введите сообщение..."
|
||||
className="glass-input text-white"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" className="text-white/60">
|
||||
<Smile className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="text-white/60">
|
||||
<Paperclip className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="text-white/60">
|
||||
<Mic className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="glass" size="icon">
|
||||
<Send className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Корзина и товары */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Компоненты корзины и товаров</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Product Card */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Карточка товара</h4>
|
||||
<div className="w-64 glass-card rounded-lg border border-white/10 overflow-hidden">
|
||||
{/* Product Image */}
|
||||
<div className="relative h-40 bg-white/5">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<Package className="h-16 w-16 text-white/30" />
|
||||
</div>
|
||||
<div className="absolute top-2 left-2">
|
||||
<Badge className="bg-green-500/20 text-green-300 text-xs">В наличии</Badge>
|
||||
</div>
|
||||
<div className="absolute top-2 right-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setIsFavorite(!isFavorite)}
|
||||
className="w-8 h-8 bg-black/50 hover:bg-black/70"
|
||||
>
|
||||
<Heart className={`h-4 w-4 ${isFavorite ? 'text-red-400 fill-current' : 'text-white/60'}`} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Info */}
|
||||
<div className="p-4 space-y-3">
|
||||
<div>
|
||||
<h5 className="text-white font-medium text-sm mb-1">iPhone 15 Pro Max</h5>
|
||||
<p className="text-white/60 text-xs">Артикул: IP15PM-256-BLU</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-white font-semibold">89 990 ₽</div>
|
||||
<div className="text-white/60 text-xs">В наличии: 15 шт</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<Star className="h-3 w-3 text-yellow-400 fill-current" />
|
||||
<Star className="h-3 w-3 text-yellow-400 fill-current" />
|
||||
<Star className="h-3 w-3 text-yellow-400 fill-current" />
|
||||
<Star className="h-3 w-3 text-yellow-400 fill-current" />
|
||||
<Star className="h-3 w-3 text-white/30" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex items-center space-x-1 glass-input rounded px-2 py-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setCartQuantity(Math.max(1, cartQuantity - 1))}
|
||||
className="w-6 h-6 p-0"
|
||||
>
|
||||
<Minus className="h-3 w-3" />
|
||||
</Button>
|
||||
<span className="text-white text-sm w-8 text-center">{cartQuantity}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setCartQuantity(cartQuantity + 1)}
|
||||
className="w-6 h-6 p-0"
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<Button variant="glass" className="flex-1 h-8 text-xs">
|
||||
<ShoppingCart className="h-3 w-3 mr-2" />
|
||||
В корзину
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Organization */}
|
||||
<div className="flex items-center space-x-2 pt-2 border-t border-white/10">
|
||||
<Avatar className="h-6 w-6 bg-purple-500/30">
|
||||
<AvatarFallback className="bg-purple-500/30 text-white text-xs">ОТ</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="text-white text-xs font-medium">ОптТорг</div>
|
||||
<Badge className="bg-purple-500/20 text-purple-300 text-xs">Оптовик</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cart Summary */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Корзина (сводка)</h4>
|
||||
<div className="w-80 glass-card rounded-lg border border-white/10 p-4 space-y-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<ShoppingCart className="h-5 w-5 text-purple-400" />
|
||||
<div>
|
||||
<h5 className="text-white font-medium">Корзина</h5>
|
||||
<p className="text-white/60 text-sm">3 товара</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cart Items */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-3 glass-card p-3 rounded border border-white/10">
|
||||
<div className="w-12 h-12 bg-white/5 rounded flex items-center justify-center">
|
||||
<Package className="h-6 w-6 text-white/30" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-white text-sm font-medium">iPhone 15 Pro</div>
|
||||
<div className="text-white/60 text-xs">2 × 89 990 ₽</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<Button variant="ghost" size="icon" className="w-6 h-6">
|
||||
<Minus className="h-3 w-3 text-white/60" />
|
||||
</Button>
|
||||
<span className="text-white text-sm w-6 text-center">2</span>
|
||||
<Button variant="ghost" size="icon" className="w-6 h-6">
|
||||
<Plus className="h-3 w-3 text-white/60" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="w-6 h-6 text-red-400">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3 glass-card p-3 rounded border border-white/10">
|
||||
<div className="w-12 h-12 bg-white/5 rounded flex items-center justify-center">
|
||||
<Package className="h-6 w-6 text-white/30" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-white text-sm font-medium">Samsung Galaxy</div>
|
||||
<div className="text-white/60 text-xs">1 × 75 990 ₽</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<Button variant="ghost" size="icon" className="w-6 h-6">
|
||||
<Minus className="h-3 w-3 text-white/60" />
|
||||
</Button>
|
||||
<span className="text-white text-sm w-6 text-center">1</span>
|
||||
<Button variant="ghost" size="icon" className="w-6 h-6">
|
||||
<Plus className="h-3 w-3 text-white/60" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="w-6 h-6 text-red-400">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Summary */}
|
||||
<div className="border-t border-white/10 pt-4 space-y-2">
|
||||
<div className="flex justify-between text-white/60 text-sm">
|
||||
<span>Товары (3 шт)</span>
|
||||
<span>255 970 ₽</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-white/60 text-sm">
|
||||
<span>Доставка</span>
|
||||
<span>Бесплатно</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-white font-semibold">
|
||||
<span>Итого</span>
|
||||
<span>255 970 ₽</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button variant="glass" className="w-full">
|
||||
Оформить заказ
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Компоненты организаций */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Компоненты организаций</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Organization Card */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Карточка организации</h4>
|
||||
<div className="w-80 glass-card rounded-lg border border-white/10 p-4 space-y-4">
|
||||
<div className="flex items-start space-x-3">
|
||||
<Avatar className="h-12 w-12 bg-blue-500/30">
|
||||
<AvatarFallback className="bg-blue-500/30 text-white">ФЦ</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<h5 className="text-white font-medium">ФулфилментЦентр ООО</h5>
|
||||
<Badge className="bg-blue-500/20 text-blue-300 text-xs">Фулфилмент</Badge>
|
||||
</div>
|
||||
<p className="text-white/60 text-sm">Полный цикл обработки заказов</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex items-center space-x-2 text-white/70">
|
||||
<Building className="h-4 w-4 text-white/40" />
|
||||
<span>ИНН: 7707083893</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 text-white/70">
|
||||
<MapPin className="h-4 w-4 text-white/40" />
|
||||
<span>Москва, ул. Складская, 15</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 text-white/70">
|
||||
<Phone className="h-4 w-4 text-white/40" />
|
||||
<span>+7 (495) 123-45-67</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 text-white/70">
|
||||
<Mail className="h-4 w-4 text-white/40" />
|
||||
<span>info@fulfilment.ru</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2 pt-2 border-t border-white/10">
|
||||
<Button variant="glass" className="flex-1 h-8 text-xs">
|
||||
Добавить в контрагенты
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" className="h-8 w-8">
|
||||
<Eye className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* User Profile */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Профиль пользователя</h4>
|
||||
<div className="w-80 glass-card rounded-lg border border-white/10 p-4 space-y-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Avatar className="h-16 w-16 bg-primary/30">
|
||||
<AvatarFallback className="bg-primary/30 text-white text-xl">ИИ</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<h5 className="text-white font-medium">Иван Иванов</h5>
|
||||
<p className="text-white/60 text-sm">Менеджер</p>
|
||||
<Badge className="bg-blue-500/20 text-blue-300 text-xs mt-1">Фулфилмент</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div className="space-y-1">
|
||||
<p className="text-white/60">Телефон</p>
|
||||
<p className="text-white">+7 (999) 123-45-67</p>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-white/60">Email</p>
|
||||
<p className="text-white">ivan@company.ru</p>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-white/60">Telegram</p>
|
||||
<p className="text-white">@ivan_manager</p>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-white/60">WhatsApp</p>
|
||||
<p className="text-white">+7 (999) 123-45-67</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2 pt-2 border-t border-white/10">
|
||||
<Button variant="glass" className="flex-1 h-8 text-xs">
|
||||
<MessageCircle className="h-3 w-3 mr-2" />
|
||||
Написать
|
||||
</Button>
|
||||
<Button variant="outline" className="flex-1 h-8 text-xs">
|
||||
<Phone className="h-3 w-3 mr-2" />
|
||||
Позвонить
|
||||
</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">
|
||||
{/* Status Indicators */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Индикаторы состояния</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 space-y-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle className="h-5 w-5 text-green-400" />
|
||||
<div>
|
||||
<div className="text-white font-medium text-sm">Успешно</div>
|
||||
<div className="text-green-300/70 text-xs">Операция завершена</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<AlertCircle className="h-5 w-5 text-yellow-400" />
|
||||
<div>
|
||||
<div className="text-white font-medium text-sm">Предупреждение</div>
|
||||
<div className="text-yellow-300/70 text-xs">Требует внимания</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<XCircle className="h-5 w-5 text-red-400" />
|
||||
<div>
|
||||
<div className="text-white font-medium text-sm">Ошибка</div>
|
||||
<div className="text-red-300/70 text-xs">Операция не выполнена</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Clock className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<div className="text-white font-medium text-sm">В обработке</div>
|
||||
<div className="text-blue-300/70 text-xs">Пожалуйста, подождите</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-white text-sm">Загрузка данных</span>
|
||||
<div className="w-4 h-4 border-2 border-white/20 border-t-white animate-spin rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between text-sm mb-2">
|
||||
<span className="text-white">Прогресс выполнения</span>
|
||||
<span className="text-white/60">75%</span>
|
||||
</div>
|
||||
<Progress value={75} className="h-2" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
||||
<span className="text-white text-sm">Онлайн</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-2 h-2 bg-red-400 rounded-full"></div>
|
||||
<span className="text-white text-sm">Оффлайн</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-2 h-2 bg-yellow-400 rounded-full"></div>
|
||||
<span className="text-white text-sm">Ожидание</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Activity Timeline */}
|
||||
<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="space-y-4">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full mt-2"></div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-white text-sm font-medium">Заказ создан</span>
|
||||
<Badge className="bg-green-500/20 text-green-300 text-xs">Завершено</Badge>
|
||||
</div>
|
||||
<p className="text-white/60 text-xs">Заказ #12345 успешно создан</p>
|
||||
<p className="text-white/40 text-xs">2 минуты назад</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="w-2 h-2 bg-blue-400 rounded-full mt-2 animate-pulse"></div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-white text-sm font-medium">Обработка платежа</span>
|
||||
<Badge className="bg-blue-500/20 text-blue-300 text-xs">В процессе</Badge>
|
||||
</div>
|
||||
<p className="text-white/60 text-xs">Проверка платежных данных</p>
|
||||
<p className="text-white/40 text-xs">Сейчас</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="w-2 h-2 bg-white/20 rounded-full mt-2"></div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-white/60 text-sm">Отправка товара</span>
|
||||
<Badge variant="outline" className="border-white/20 text-white/60 text-xs">Ожидание</Badge>
|
||||
</div>
|
||||
<p className="text-white/40 text-xs">Подготовка к отправке</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="w-2 h-2 bg-white/20 rounded-full mt-2"></div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-white/60 text-sm">Доставка</span>
|
||||
<Badge variant="outline" className="border-white/20 text-white/60 text-xs">Ожидание</Badge>
|
||||
</div>
|
||||
<p className="text-white/40 text-xs">Передача курьеру</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
633
src/components/admin/ui-kit/states-demo.tsx
Normal file
633
src/components/admin/ui-kit/states-demo.tsx
Normal file
@ -0,0 +1,633 @@
|
||||
"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 { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import {
|
||||
CheckCircle,
|
||||
AlertTriangle,
|
||||
XCircle,
|
||||
Info,
|
||||
Clock,
|
||||
Loader,
|
||||
Zap,
|
||||
Wifi,
|
||||
WifiOff,
|
||||
Battery,
|
||||
BatteryLow,
|
||||
Signal,
|
||||
SignalLow,
|
||||
SignalZero,
|
||||
Circle,
|
||||
Play,
|
||||
Pause,
|
||||
Square,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
Minus,
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
Activity,
|
||||
Users,
|
||||
Package,
|
||||
DollarSign,
|
||||
Star,
|
||||
Bookmark,
|
||||
Heart,
|
||||
Eye,
|
||||
Download,
|
||||
Upload,
|
||||
Trash2
|
||||
} from 'lucide-react'
|
||||
|
||||
export function StatesDemo() {
|
||||
const [connectionStatus, setConnectionStatus] = useState<'online' | 'offline' | 'connecting'>('online')
|
||||
const [taskStatus, setTaskStatus] = useState<'pending' | 'running' | 'completed' | 'failed'>('pending')
|
||||
const [batteryLevel, setBatteryLevel] = useState(75)
|
||||
|
||||
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">
|
||||
{/* Success States */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Состояния успеха</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Alert className="border-green-500/30 bg-green-500/10">
|
||||
<CheckCircle className="h-4 w-4 text-green-400" />
|
||||
<AlertDescription className="text-green-300">
|
||||
Операция выполнена успешно
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-green-500/30 bg-green-500/10">
|
||||
<div className="flex items-center space-x-3">
|
||||
<CheckCircle className="h-5 w-5 text-green-400" />
|
||||
<div>
|
||||
<div className="text-green-300 font-medium text-sm">Заказ создан</div>
|
||||
<div className="text-green-400/70 text-xs">#12345 успешно обработан</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-2 mt-4">
|
||||
<Badge className="bg-green-500/20 text-green-300 border-green-500/30">Завершено</Badge>
|
||||
<Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30">Активно</Badge>
|
||||
<Badge className="bg-emerald-500/20 text-emerald-300 border-emerald-500/30">Подтверждено</Badge>
|
||||
<Badge className="bg-teal-500/20 text-teal-300 border-teal-500/30">Проверено</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Warning States */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Предупреждения</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Alert className="border-yellow-500/30 bg-yellow-500/10">
|
||||
<AlertTriangle className="h-4 w-4 text-yellow-400" />
|
||||
<AlertDescription className="text-yellow-300">
|
||||
Требуется внимание пользователя
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-yellow-500/30 bg-yellow-500/10">
|
||||
<div className="flex items-center space-x-3">
|
||||
<AlertTriangle className="h-5 w-5 text-yellow-400" />
|
||||
<div>
|
||||
<div className="text-yellow-300 font-medium text-sm">Низкий остаток</div>
|
||||
<div className="text-yellow-400/70 text-xs">Товар заканчивается на складе</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-2 mt-4">
|
||||
<Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30">Предупреждение</Badge>
|
||||
<Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30">Внимание</Badge>
|
||||
<Badge className="bg-amber-500/20 text-amber-300 border-amber-500/30">Ожидание</Badge>
|
||||
<Badge className="bg-lime-500/20 text-lime-300 border-lime-500/30">Черновик</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error States */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Ошибки</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Alert className="border-red-500/30 bg-red-500/10">
|
||||
<XCircle className="h-4 w-4 text-red-400" />
|
||||
<AlertDescription className="text-red-300">
|
||||
Произошла критическая ошибка
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-red-500/30 bg-red-500/10">
|
||||
<div className="flex items-center space-x-3">
|
||||
<XCircle className="h-5 w-5 text-red-400" />
|
||||
<div>
|
||||
<div className="text-red-300 font-medium text-sm">Ошибка платежа</div>
|
||||
<div className="text-red-400/70 text-xs">Недостаточно средств на счету</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-2 mt-4">
|
||||
<Badge className="bg-red-500/20 text-red-300 border-red-500/30">Ошибка</Badge>
|
||||
<Badge className="bg-rose-500/20 text-rose-300 border-rose-500/30">Отклонено</Badge>
|
||||
<Badge className="bg-pink-500/20 text-pink-300 border-pink-500/30">Неактивно</Badge>
|
||||
<Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30">Заблокировано</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info States */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Информационные состояния</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Alert className="border-blue-500/30 bg-blue-500/10">
|
||||
<Info className="h-4 w-4 text-blue-400" />
|
||||
<AlertDescription className="text-blue-300">
|
||||
Дополнительная информация для пользователя
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-blue-500/30 bg-blue-500/10">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Info className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<div className="text-blue-300 font-medium text-sm">Новая версия</div>
|
||||
<div className="text-blue-400/70 text-xs">Доступно обновление системы</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-2 mt-4">
|
||||
<Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30">Информация</Badge>
|
||||
<Badge className="bg-indigo-500/20 text-indigo-300 border-indigo-500/30">Новое</Badge>
|
||||
<Badge className="bg-cyan-500/20 text-cyan-300 border-cyan-500/30">Обновлено</Badge>
|
||||
<Badge className="bg-sky-500/20 text-sky-300 border-sky-500/30">Синхронизировано</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Индикаторы загрузки */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Индикаторы загрузки</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Progress Bars */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Прогресс-бары</h4>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<span className="text-white">Загрузка файлов</span>
|
||||
<span className="text-white/60">75%</span>
|
||||
</div>
|
||||
<Progress value={75} className="h-2" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<span className="text-white">Обработка данных</span>
|
||||
<span className="text-green-300">100%</span>
|
||||
</div>
|
||||
<Progress value={100} className="h-2 [&>div]:bg-green-500" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<span className="text-white">Синхронизация</span>
|
||||
<span className="text-yellow-300">45%</span>
|
||||
</div>
|
||||
<Progress value={45} className="h-2 [&>div]:bg-yellow-500" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<span className="text-white">Ошибка загрузки</span>
|
||||
<span className="text-red-300">35%</span>
|
||||
</div>
|
||||
<Progress value={35} className="h-2 [&>div]:bg-red-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading Spinners */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Спиннеры загрузки</h4>
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center">
|
||||
<div className="w-8 h-8 border-2 border-white/20 border-t-white rounded-full animate-spin mx-auto mb-2"></div>
|
||||
<p className="text-white/70 text-xs">Загрузка</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center">
|
||||
<Loader className="w-8 h-8 text-blue-400 animate-spin mx-auto mb-2" />
|
||||
<p className="text-white/70 text-xs">Обработка</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center">
|
||||
<div className="flex space-x-1 justify-center mb-2">
|
||||
<div className="w-2 h-2 bg-white rounded-full animate-bounce"></div>
|
||||
<div className="w-2 h-2 bg-white rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
|
||||
<div className="w-2 h-2 bg-white rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
|
||||
</div>
|
||||
<p className="text-white/70 text-xs">Ожидание</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 text-center">
|
||||
<div className="relative w-8 h-8 mx-auto mb-2">
|
||||
<div className="absolute inset-0 border-2 border-purple-500/30 rounded-full"></div>
|
||||
<div className="absolute inset-0 border-2 border-transparent border-t-purple-500 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
<p className="text-white/70 text-xs">Прогресс</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading States */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Состояния загрузки</h4>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-3 glass-card p-3 rounded border border-white/10">
|
||||
<Clock className="h-5 w-5 text-blue-400" />
|
||||
<div className="flex-1">
|
||||
<div className="text-white font-medium text-sm">Подготовка к загрузке</div>
|
||||
<div className="text-blue-300/70 text-xs">Инициализация процесса...</div>
|
||||
</div>
|
||||
<Badge className="bg-blue-500/20 text-blue-300 text-xs">Ожидание</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3 glass-card p-3 rounded border border-white/10">
|
||||
<Loader className="h-5 w-5 text-purple-400 animate-spin" />
|
||||
<div className="flex-1">
|
||||
<div className="text-white font-medium text-sm">Загрузка данных</div>
|
||||
<div className="text-purple-300/70 text-xs">Получение информации с сервера...</div>
|
||||
</div>
|
||||
<Badge className="bg-purple-500/20 text-purple-300 text-xs">В процессе</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3 glass-card p-3 rounded border border-white/10">
|
||||
<CheckCircle className="h-5 w-5 text-green-400" />
|
||||
<div className="flex-1">
|
||||
<div className="text-white font-medium text-sm">Загрузка завершена</div>
|
||||
<div className="text-green-300/70 text-xs">Все данные успешно получены</div>
|
||||
</div>
|
||||
<Badge className="bg-green-500/20 text-green-300 text-xs">Готово</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">
|
||||
{/* Connection Status */}
|
||||
<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 mb-4">
|
||||
<span className="text-white text-sm">Статус сети</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant={connectionStatus === 'online' ? 'glass' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setConnectionStatus('online')}
|
||||
>
|
||||
Online
|
||||
</Button>
|
||||
<Button
|
||||
variant={connectionStatus === 'connecting' ? 'glass' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setConnectionStatus('connecting')}
|
||||
>
|
||||
Connecting
|
||||
</Button>
|
||||
<Button
|
||||
variant={connectionStatus === 'offline' ? 'glass' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setConnectionStatus('offline')}
|
||||
>
|
||||
Offline
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
{connectionStatus === 'online' && (
|
||||
<>
|
||||
<Wifi className="h-6 w-6 text-green-400" />
|
||||
<div>
|
||||
<div className="text-green-300 font-medium">Подключено</div>
|
||||
<div className="text-green-400/70 text-sm">Стабильное соединение</div>
|
||||
</div>
|
||||
<div className="ml-auto">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{connectionStatus === 'connecting' && (
|
||||
<>
|
||||
<div className="relative">
|
||||
<Wifi className="h-6 w-6 text-yellow-400" />
|
||||
<div className="absolute inset-0">
|
||||
<div className="w-6 h-6 border-2 border-transparent border-t-yellow-400 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-yellow-300 font-medium">Подключение</div>
|
||||
<div className="text-yellow-400/70 text-sm">Установка соединения...</div>
|
||||
</div>
|
||||
<div className="ml-auto">
|
||||
<div className="w-2 h-2 bg-yellow-400 rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{connectionStatus === 'offline' && (
|
||||
<>
|
||||
<WifiOff className="h-6 w-6 text-red-400" />
|
||||
<div>
|
||||
<div className="text-red-300 font-medium">Отключено</div>
|
||||
<div className="text-red-400/70 text-sm">Нет подключения к сети</div>
|
||||
</div>
|
||||
<div className="ml-auto">
|
||||
<div className="w-2 h-2 bg-red-400 rounded-full"></div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Task Status */}
|
||||
<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 mb-4">
|
||||
<span className="text-white text-sm">Выполнение задачи</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant={taskStatus === 'pending' ? 'glass' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setTaskStatus('pending')}
|
||||
>
|
||||
Pending
|
||||
</Button>
|
||||
<Button
|
||||
variant={taskStatus === 'running' ? 'glass' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setTaskStatus('running')}
|
||||
>
|
||||
Running
|
||||
</Button>
|
||||
<Button
|
||||
variant={taskStatus === 'completed' ? 'glass' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setTaskStatus('completed')}
|
||||
>
|
||||
Completed
|
||||
</Button>
|
||||
<Button
|
||||
variant={taskStatus === 'failed' ? 'glass' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setTaskStatus('failed')}
|
||||
>
|
||||
Failed
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
{taskStatus === 'pending' && <Clock className="h-5 w-5 text-gray-400" />}
|
||||
{taskStatus === 'running' && <Play className="h-5 w-5 text-blue-400" />}
|
||||
{taskStatus === 'completed' && <CheckCircle className="h-5 w-5 text-green-400" />}
|
||||
{taskStatus === 'failed' && <XCircle className="h-5 w-5 text-red-400" />}
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="text-white font-medium text-sm">
|
||||
Обработка заказа #12345
|
||||
</div>
|
||||
<div className="text-white/60 text-xs">
|
||||
{taskStatus === 'pending' && 'Ожидает выполнения'}
|
||||
{taskStatus === 'running' && 'Выполняется...'}
|
||||
{taskStatus === 'completed' && 'Успешно завершено'}
|
||||
{taskStatus === 'failed' && 'Ошибка выполнения'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Badge className={
|
||||
taskStatus === 'pending' ? 'bg-gray-500/20 text-gray-300' :
|
||||
taskStatus === 'running' ? 'bg-blue-500/20 text-blue-300' :
|
||||
taskStatus === 'completed' ? 'bg-green-500/20 text-green-300' :
|
||||
'bg-red-500/20 text-red-300'
|
||||
}>
|
||||
{taskStatus === 'pending' && 'Ожидание'}
|
||||
{taskStatus === 'running' && 'Выполняется'}
|
||||
{taskStatus === 'completed' && 'Завершено'}
|
||||
{taskStatus === 'failed' && 'Ошибка'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{taskStatus === 'running' && (
|
||||
<Progress value={65} className="h-1" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Battery Level */}
|
||||
<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 mb-4">
|
||||
<span className="text-white text-sm">Батарея устройства</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setBatteryLevel(Math.max(0, batteryLevel - 25))}
|
||||
>
|
||||
-25%
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setBatteryLevel(Math.min(100, batteryLevel + 25))}
|
||||
>
|
||||
+25%
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
{batteryLevel > 20 ? (
|
||||
<Battery className={`h-6 w-6 ${batteryLevel > 50 ? 'text-green-400' : 'text-yellow-400'}`} />
|
||||
) : (
|
||||
<BatteryLow className="h-6 w-6 text-red-400" />
|
||||
)}
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-white text-sm">Заряд батареи</span>
|
||||
<span className={`text-sm ${
|
||||
batteryLevel > 50 ? 'text-green-300' :
|
||||
batteryLevel > 20 ? 'text-yellow-300' :
|
||||
'text-red-300'
|
||||
}`}>
|
||||
{batteryLevel}%
|
||||
</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={batteryLevel}
|
||||
className={`h-2 ${
|
||||
batteryLevel > 50 ? '[&>div]:bg-green-500' :
|
||||
batteryLevel > 20 ? '[&>div]:bg-yellow-500' :
|
||||
'[&>div]:bg-red-500'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Badge className={
|
||||
batteryLevel > 50 ? 'bg-green-500/20 text-green-300' :
|
||||
batteryLevel > 20 ? 'bg-yellow-500/20 text-yellow-300' :
|
||||
'bg-red-500/20 text-red-300'
|
||||
}>
|
||||
{batteryLevel > 50 ? 'Заряжена' :
|
||||
batteryLevel > 20 ? 'Средний' :
|
||||
'Низкий'}
|
||||
</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">
|
||||
{/* Metric Cards */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Карточки метрик</h4>
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<Users className="h-5 w-5 text-blue-400" />
|
||||
<TrendingUp className="h-4 w-4 text-green-400" />
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-white">1,234</div>
|
||||
<div className="text-white/60 text-sm">Пользователи</div>
|
||||
<div className="flex items-center space-x-1 mt-1">
|
||||
<ArrowUp className="h-3 w-3 text-green-400" />
|
||||
<span className="text-green-400 text-xs">+12%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<Package className="h-5 w-5 text-purple-400" />
|
||||
<TrendingDown className="h-4 w-4 text-red-400" />
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-white">856</div>
|
||||
<div className="text-white/60 text-sm">Заказы</div>
|
||||
<div className="flex items-center space-x-1 mt-1">
|
||||
<ArrowDown className="h-3 w-3 text-red-400" />
|
||||
<span className="text-red-400 text-xs">-5%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<DollarSign className="h-5 w-5 text-green-400" />
|
||||
<Minus className="h-4 w-4 text-white/60" />
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-white">₽45,678</div>
|
||||
<div className="text-white/60 text-sm">Доход</div>
|
||||
<div className="flex items-center space-x-1 mt-1">
|
||||
<span className="text-white/60 text-xs">Без изменений</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<Activity className="h-5 w-5 text-orange-400" />
|
||||
<TrendingUp className="h-4 w-4 text-green-400" />
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-white">98.5%</div>
|
||||
<div className="text-white/60 text-sm">Uptime</div>
|
||||
<div className="flex items-center space-x-1 mt-1">
|
||||
<ArrowUp className="h-3 w-3 text-green-400" />
|
||||
<span className="text-green-400 text-xs">+0.2%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Dots */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Точечные индикаторы</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 space-y-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-3 h-3 bg-green-400 rounded-full"></div>
|
||||
<span className="text-white text-sm">Сервер 1 - Онлайн</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
|
||||
<span className="text-white text-sm">Сервер 2 - Активен</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-3 h-3 bg-yellow-400 rounded-full"></div>
|
||||
<span className="text-white text-sm">Сервер 3 - Обслуживание</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-3 h-3 bg-red-400 rounded-full"></div>
|
||||
<span className="text-white text-sm">Сервер 4 - Недоступен</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 rounded-lg border border-white/10 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-white text-sm">Задача 1</span>
|
||||
<CheckCircle className="h-4 w-4 text-green-400" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-white text-sm">Задача 2</span>
|
||||
<Loader className="h-4 w-4 text-blue-400 animate-spin" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-white text-sm">Задача 3</span>
|
||||
<Clock className="h-4 w-4 text-yellow-400" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-white text-sm">Задача 4</span>
|
||||
<XCircle className="h-4 w-4 text-red-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -44,7 +44,7 @@ export function AuthGuard({ children, fallback }: AuthGuardProps) {
|
||||
// Показываем лоадер пока проверяем авторизацию
|
||||
if (isChecking || isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-smooth flex items-center justify-center">
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center text-white">
|
||||
<div className="animate-spin rounded-full h-16 w-16 border-4 border-white border-t-transparent mx-auto mb-4"></div>
|
||||
<p className="text-white/80">Проверяем авторизацию...</p>
|
||||
|
||||
@ -16,7 +16,7 @@ export function CartDashboard() {
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="h-screen bg-gradient-smooth flex overflow-hidden">
|
||||
<div className="h-screen flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56 px-6 py-4 overflow-hidden">
|
||||
<div className="h-full flex items-center justify-center">
|
||||
@ -32,7 +32,7 @@ export function CartDashboard() {
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="h-screen bg-gradient-smooth flex overflow-hidden">
|
||||
<div className="h-screen flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56 px-6 py-4 overflow-hidden">
|
||||
<div className="h-full flex items-center justify-center">
|
||||
@ -48,7 +48,7 @@ export function CartDashboard() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-gradient-smooth flex overflow-hidden">
|
||||
<div className="h-screen flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56 px-6 py-4 overflow-hidden">
|
||||
<div className="h-full w-full flex flex-col">
|
||||
|
||||
@ -21,7 +21,7 @@ export function DashboardHome() {
|
||||
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-smooth flex">
|
||||
<div className="min-h-screen flex">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-64">
|
||||
<div className="p-8">
|
||||
|
||||
@ -21,7 +21,7 @@ export function Dashboard() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-smooth flex">
|
||||
<div className="min-h-screen flex">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-64">
|
||||
{renderContent()}
|
||||
|
||||
@ -550,7 +550,7 @@ export function UserSettings() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-gradient-smooth flex overflow-hidden">
|
||||
<div className="h-screen flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56 px-6 py-4 overflow-hidden">
|
||||
<div className="h-full w-full flex flex-col">
|
||||
|
||||
@ -341,7 +341,7 @@ ${employees.map((emp: Employee) =>
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-smooth flex">
|
||||
<div className="min-h-screen flex">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56 p-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
@ -355,7 +355,7 @@ ${employees.map((emp: Employee) =>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-smooth flex">
|
||||
<div className="min-h-screen flex">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56 p-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
|
||||
@ -36,7 +36,7 @@ export function MarketDashboard() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-gradient-smooth flex overflow-hidden">
|
||||
<div className="h-screen flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56 px-6 py-4 overflow-hidden">
|
||||
<div className="h-full w-full flex flex-col">
|
||||
|
||||
@ -38,7 +38,7 @@ export function MessengerDashboard() {
|
||||
// Если нет контрагентов, показываем заглушку
|
||||
if (!counterpartiesLoading && counterparties.length === 0) {
|
||||
return (
|
||||
<div className="h-screen bg-gradient-smooth flex overflow-hidden">
|
||||
<div className="h-screen flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56 px-6 py-4 overflow-hidden">
|
||||
<div className="h-full w-full flex flex-col">
|
||||
@ -61,7 +61,7 @@ export function MessengerDashboard() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-gradient-smooth flex overflow-hidden">
|
||||
<div className="h-screen flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56 px-6 py-4 overflow-hidden">
|
||||
<div className="h-full w-full flex flex-col">
|
||||
|
||||
@ -11,7 +11,7 @@ import { MarketWholesale } from '../market/market-wholesale'
|
||||
|
||||
export function PartnersDashboard() {
|
||||
return (
|
||||
<div className="h-screen bg-gradient-smooth flex overflow-hidden">
|
||||
<div className="h-screen flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56 px-6 py-4 overflow-hidden">
|
||||
<div className="h-full w-full flex flex-col">
|
||||
|
||||
@ -8,7 +8,7 @@ import { LogisticsTab } from './logistics-tab'
|
||||
|
||||
export function ServicesDashboard() {
|
||||
return (
|
||||
<div className="h-screen bg-gradient-smooth flex overflow-hidden">
|
||||
<div className="h-screen flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56 px-6 py-4 overflow-hidden">
|
||||
<div className="h-full w-full flex flex-col">
|
||||
|
||||
@ -320,7 +320,7 @@ export function CreateSupplyPage() {
|
||||
// Рендер товаров оптовика
|
||||
if (selectedWholesaler && selectedVariant === 'wholesaler') {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-smooth flex">
|
||||
<div className="min-h-screen flex">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56">
|
||||
<div className="p-8">
|
||||
@ -669,7 +669,7 @@ export function CreateSupplyPage() {
|
||||
// Рендер выбора оптовиков
|
||||
if (selectedVariant === 'wholesaler') {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-smooth flex">
|
||||
<div className="min-h-screen flex">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56">
|
||||
<div className="p-8">
|
||||
@ -970,7 +970,7 @@ export function CreateSupplyPage() {
|
||||
|
||||
// Главная страница выбора варианта
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-smooth flex">
|
||||
<div className="min-h-screen flex">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56">
|
||||
<div className="p-8">
|
||||
|
||||
@ -327,7 +327,7 @@ export function SuppliesDashboard() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-smooth flex">
|
||||
<div className="min-h-screen flex">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56">
|
||||
<div className="p-8">
|
||||
|
||||
@ -74,7 +74,7 @@ export function WarehouseDashboard() {
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="h-screen bg-gradient-smooth flex overflow-hidden">
|
||||
<div className="h-screen flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56 px-6 py-4 overflow-hidden">
|
||||
<div className="h-full w-full flex flex-col">
|
||||
@ -102,7 +102,7 @@ export function WarehouseDashboard() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-gradient-smooth flex overflow-hidden">
|
||||
<div className="h-screen flex overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className="flex-1 ml-56 px-6 py-4 overflow-hidden">
|
||||
<div className="h-full w-full flex flex-col">
|
||||
|
||||
Reference in New Issue
Block a user