Добавлены модели и функциональность для управления администраторами, включая авторизацию через JWT, запросы и мутации для получения информации об администраторах и управления пользователями. Обновлены стили и логика работы с токенами в Apollo Client. Улучшен интерфейс взаимодействия с пользователем.
This commit is contained in:
Bivekich
288
src/components/admin/ui-kit/buttons-demo.tsx
Normal file
288
src/components/admin/ui-kit/buttons-demo.tsx
Normal file
@ -0,0 +1,288 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import {
|
||||
Play,
|
||||
Download,
|
||||
Heart,
|
||||
Settings,
|
||||
Trash2,
|
||||
Plus,
|
||||
Search,
|
||||
Filter,
|
||||
Loader2
|
||||
} from 'lucide-react'
|
||||
|
||||
export function ButtonsDemo() {
|
||||
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">
|
||||
{/* Default */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Default</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="default">Обычная кнопка</Button>
|
||||
<Button variant="default" size="sm">Маленькая</Button>
|
||||
<Button variant="default" size="lg">Большая</Button>
|
||||
<Button variant="default" disabled>Отключена</Button>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||
variant="default"
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Glass */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Glass (Основная)</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="glass">Glass кнопка</Button>
|
||||
<Button variant="glass" size="sm">Маленькая</Button>
|
||||
<Button variant="glass" size="lg">Большая</Button>
|
||||
<Button variant="glass" disabled>Отключена</Button>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||
variant="glass"
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Glass Secondary */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Glass Secondary</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="glass-secondary">Вторичная glass</Button>
|
||||
<Button variant="glass-secondary" size="sm">Маленькая</Button>
|
||||
<Button variant="glass-secondary" size="lg">Большая</Button>
|
||||
<Button variant="glass-secondary" disabled>Отключена</Button>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||
variant="glass-secondary"
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Secondary */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Secondary</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="secondary">Вторичная</Button>
|
||||
<Button variant="secondary" size="sm">Маленькая</Button>
|
||||
<Button variant="secondary" size="lg">Большая</Button>
|
||||
<Button variant="secondary" disabled>Отключена</Button>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||
variant="secondary"
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Outline */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Outline</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="outline">Обводка</Button>
|
||||
<Button variant="outline" size="sm">Маленькая</Button>
|
||||
<Button variant="outline" size="lg">Большая</Button>
|
||||
<Button variant="outline" disabled>Отключена</Button>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||
variant="outline"
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ghost */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Ghost</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="ghost">Призрачная</Button>
|
||||
<Button variant="ghost" size="sm">Маленькая</Button>
|
||||
<Button variant="ghost" size="lg">Большая</Button>
|
||||
<Button variant="ghost" disabled>Отключена</Button>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||
variant="ghost"
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Destructive */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Destructive</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="destructive">Удалить</Button>
|
||||
<Button variant="destructive" size="sm">Маленькая</Button>
|
||||
<Button variant="destructive" size="lg">Большая</Button>
|
||||
<Button variant="destructive" disabled>Отключена</Button>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||
variant="destructive"
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Link */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Link</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="link">Ссылка</Button>
|
||||
<Button variant="link" size="sm">Маленькая</Button>
|
||||
<Button variant="link" size="lg">Большая</Button>
|
||||
<Button variant="link" disabled>Отключена</Button>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-white/60 font-mono">
|
||||
variant="link"
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Кнопки с иконками */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Кнопки с иконками</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Иконка слева */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Иконка слева</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="glass">
|
||||
<Play className="h-4 w-4 mr-2" />
|
||||
Воспроизвести
|
||||
</Button>
|
||||
<Button variant="glass-secondary">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Скачать
|
||||
</Button>
|
||||
<Button variant="outline">
|
||||
<Search className="h-4 w-4 mr-2" />
|
||||
Поиск
|
||||
</Button>
|
||||
<Button variant="destructive">
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Удалить
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Иконка справа */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Иконка справа</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="glass">
|
||||
Настройки
|
||||
<Settings className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
<Button variant="secondary">
|
||||
Фильтры
|
||||
<Filter className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Только иконка */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Только иконка</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="glass" size="icon">
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="outline" size="icon">
|
||||
<Heart className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="destructive" size="icon">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Загрузка */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Состояние загрузки</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="glass" disabled>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Загрузка...
|
||||
</Button>
|
||||
<Button variant="outline" disabled>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Сохранение...
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Размеры */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Размеры</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button variant="glass" size="sm">
|
||||
Маленькая (sm)
|
||||
</Button>
|
||||
<Button variant="glass" size="default">
|
||||
Обычная (default)
|
||||
</Button>
|
||||
<Button variant="glass" size="lg">
|
||||
Большая (lg)
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-xs text-white/60 font-mono">
|
||||
size="sm" | "default" | "lg" | "icon"
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Примеры использования */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Примеры использования</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Группа действий */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Группа действий</h4>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="glass">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Создать
|
||||
</Button>
|
||||
<Button variant="outline">
|
||||
Редактировать
|
||||
</Button>
|
||||
<Button variant="destructive">
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Удалить
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Навигация */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Навигация</h4>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="ghost">Назад</Button>
|
||||
<Button variant="glass">Продолжить</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Формы */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Формы</h4>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline">Отмена</Button>
|
||||
<Button variant="glass">Сохранить</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
413
src/components/admin/ui-kit/cards-demo.tsx
Normal file
413
src/components/admin/ui-kit/cards-demo.tsx
Normal file
@ -0,0 +1,413 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import {
|
||||
Heart,
|
||||
Share2,
|
||||
MoreHorizontal,
|
||||
Star,
|
||||
Clock,
|
||||
MapPin,
|
||||
Users,
|
||||
TrendingUp,
|
||||
Package,
|
||||
Building,
|
||||
Phone,
|
||||
Calendar
|
||||
} from 'lucide-react'
|
||||
|
||||
export function CardsDemo() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Базовые карточки */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Базовые карточки</CardTitle>
|
||||
<CardDescription className="text-white/70">
|
||||
Основные варианты карточек с Glass Morphism эффектом
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Простая карточка */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Простая карточка</h4>
|
||||
<Card className="glass-card border-white/10 max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Заголовок карточки</CardTitle>
|
||||
<CardDescription className="text-white/70">
|
||||
Описание содержимого карточки
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-white/80 text-sm">
|
||||
Основное содержимое карточки. Здесь может быть любая информация.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Карточка с действиями */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Карточка с действиями</h4>
|
||||
<Card className="glass-card border-white/10 max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Карточка с кнопками</CardTitle>
|
||||
<CardDescription className="text-white/70">
|
||||
Пример карточки с различными действиями
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-white/80 text-sm">
|
||||
Содержимое карточки с возможностями взаимодействия.
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="glass" size="sm">
|
||||
Основное действие
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
Вторичное
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Интерактивная карточка */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Интерактивная карточка</h4>
|
||||
<Card className="glass-card border-white/10 max-w-sm hover:border-white/20 transition-all cursor-pointer group">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-white group-hover:text-primary transition-colors">
|
||||
Кликабельная карточка
|
||||
</CardTitle>
|
||||
<Button variant="ghost" size="icon" className="text-white/70 hover:text-white">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<CardDescription className="text-white/70">
|
||||
Карточка с hover эффектами
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-white/80 text-sm">
|
||||
При наведении карточка меняет внешний вид и становится более яркой.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Карточки продуктов */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Карточки продуктов</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{/* Карточка товара */}
|
||||
<Card className="glass-card border-white/10 hover:border-white/20 transition-all group">
|
||||
<div className="aspect-square bg-white/5 rounded-t-lg relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-blue-500/20"></div>
|
||||
<div className="absolute top-3 right-3 flex gap-2">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 bg-white/10 backdrop-blur">
|
||||
<Heart className="h-4 w-4 text-white" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 bg-white/10 backdrop-blur">
|
||||
<Share2 className="h-4 w-4 text-white" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="absolute bottom-3 left-3">
|
||||
<Badge variant="secondary" className="bg-white/20 text-white border-white/30">
|
||||
Новинка
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-white text-base group-hover:text-primary transition-colors">
|
||||
Название товара
|
||||
</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<Star
|
||||
key={star}
|
||||
className="h-3 w-3 fill-yellow-400 text-yellow-400"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-white/70 text-xs">(24 отзыва)</span>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xl font-bold text-white">1 299 ₽</span>
|
||||
<span className="text-white/60 line-through text-sm">1 599 ₽</span>
|
||||
</div>
|
||||
<Button variant="glass" className="w-full" size="sm">
|
||||
<Package className="h-4 w-4 mr-2" />
|
||||
В корзину
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Карточка услуги */}
|
||||
<Card className="glass-card border-white/10 hover:border-white/20 transition-all group">
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-1">
|
||||
<CardTitle className="text-white text-base group-hover:text-primary transition-colors">
|
||||
Фулфилмент услуги
|
||||
</CardTitle>
|
||||
<CardDescription className="text-white/70 text-sm">
|
||||
Полный цикл обработки заказов
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Badge variant="outline" className="border-green-500 text-green-400">
|
||||
Активно
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center text-white/80 text-sm">
|
||||
<MapPin className="h-4 w-4 mr-2 text-white/60" />
|
||||
Москва, складской комплекс
|
||||
</div>
|
||||
<div className="flex items-center text-white/80 text-sm">
|
||||
<Clock className="h-4 w-4 mr-2 text-white/60" />
|
||||
24/7 обработка заказов
|
||||
</div>
|
||||
<div className="flex items-center text-white/80 text-sm">
|
||||
<Users className="h-4 w-4 mr-2 text-white/60" />
|
||||
до 1000 заказов/день
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<div className="flex items-center justify-between text-sm text-white/70 mb-1">
|
||||
<span>Загрузка склада</span>
|
||||
<span>75%</span>
|
||||
</div>
|
||||
<Progress value={75} className="h-2" />
|
||||
</div>
|
||||
<Button variant="outline" className="w-full" size="sm">
|
||||
Подробнее
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Карточка статистики */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-white text-base">
|
||||
Продажи за месяц
|
||||
</CardTitle>
|
||||
<TrendingUp className="h-5 w-5 text-green-400" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<div className="text-2xl font-bold text-white">
|
||||
₽2,847,532
|
||||
</div>
|
||||
<div className="flex items-center text-sm">
|
||||
<TrendingUp className="h-3 w-3 text-green-400 mr-1" />
|
||||
<span className="text-green-400">+12.5%</span>
|
||||
<span className="text-white/60 ml-1">от прошлого месяца</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-white/70">Заказов</span>
|
||||
<span className="text-white">1,247</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-white/70">Средний чек</span>
|
||||
<span className="text-white">₽2,284</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-white/70">Конверсия</span>
|
||||
<span className="text-white">3.2%</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Карточки пользователей */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Карточки пользователей</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Профиль пользователя */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Avatar className="h-12 w-12 bg-white/20">
|
||||
<AvatarFallback className="bg-white/20 text-white font-semibold">
|
||||
ИП
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="space-y-1">
|
||||
<CardTitle className="text-white text-base">
|
||||
Иван Петров
|
||||
</CardTitle>
|
||||
<CardDescription className="text-white/70 text-sm">
|
||||
Менеджер фулфилмент центра
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center text-white/80 text-sm">
|
||||
<Phone className="h-4 w-4 mr-2 text-white/60" />
|
||||
+7 (999) 123-45-67
|
||||
</div>
|
||||
<div className="flex items-center text-white/80 text-sm">
|
||||
<Building className="h-4 w-4 mr-2 text-white/60" />
|
||||
ООО "Логистик Центр"
|
||||
</div>
|
||||
<div className="flex items-center text-white/80 text-sm">
|
||||
<Calendar className="h-4 w-4 mr-2 text-white/60" />
|
||||
Регистрация: 15.03.2024
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Button variant="glass" size="sm" className="flex-1">
|
||||
Связаться
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" className="flex-1">
|
||||
Профиль
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Компактная карточка организации */}
|
||||
<Card className="glass-card border-white/10 hover:border-white/20 transition-all cursor-pointer">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start space-x-3">
|
||||
<Avatar className="h-10 w-10 bg-white/20">
|
||||
<AvatarFallback className="bg-white/20 text-white text-xs">
|
||||
ООО
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<h3 className="text-white font-medium text-sm truncate">
|
||||
Торговая компания "Альфа"
|
||||
</h3>
|
||||
<Badge variant="default" className="ml-2 text-xs">
|
||||
Селлер
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-white/70 text-xs mb-2">
|
||||
ИНН: 7708123456789
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-white/60 text-xs">
|
||||
Последний вход: 2 часа назад
|
||||
</span>
|
||||
<div className="w-2 h-2 rounded-full bg-green-400"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Специальные контейнеры */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Специальные контейнеры</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Alert карточка */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Уведомления</h4>
|
||||
<div className="space-y-3">
|
||||
<Card className="glass-card border-green-500/50 bg-green-500/10">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="w-2 h-2 rounded-full bg-green-400 mt-2"></div>
|
||||
<div>
|
||||
<h4 className="text-white font-medium text-sm">Успешно</h4>
|
||||
<p className="text-white/80 text-sm">Данные сохранены успешно</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="glass-card border-yellow-500/50 bg-yellow-500/10">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="w-2 h-2 rounded-full bg-yellow-400 mt-2"></div>
|
||||
<div>
|
||||
<h4 className="text-white font-medium text-sm">Предупреждение</h4>
|
||||
<p className="text-white/80 text-sm">Проверьте корректность введенных данных</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="glass-card border-red-500/50 bg-red-500/10">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="w-2 h-2 rounded-full bg-red-400 mt-2"></div>
|
||||
<div>
|
||||
<h4 className="text-white font-medium text-sm">Ошибка</h4>
|
||||
<p className="text-white/80 text-sm">Не удалось выполнить операцию</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Карточка с навигацией */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Навигационная карточка</h4>
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Быстрые действия</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Button variant="glass-secondary" className="h-16 flex-col space-y-1">
|
||||
<Package className="h-6 w-6" />
|
||||
<span className="text-xs">Товары</span>
|
||||
</Button>
|
||||
<Button variant="glass-secondary" className="h-16 flex-col space-y-1">
|
||||
<Users className="h-6 w-6" />
|
||||
<span className="text-xs">Клиенты</span>
|
||||
</Button>
|
||||
<Button variant="glass-secondary" className="h-16 flex-col space-y-1">
|
||||
<TrendingUp className="h-6 w-6" />
|
||||
<span className="text-xs">Аналитика</span>
|
||||
</Button>
|
||||
<Button variant="glass-secondary" className="h-16 flex-col space-y-1">
|
||||
<Building className="h-6 w-6" />
|
||||
<span className="text-xs">Склады</span>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
367
src/components/admin/ui-kit/colors-demo.tsx
Normal file
367
src/components/admin/ui-kit/colors-demo.tsx
Normal file
@ -0,0 +1,367 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
|
||||
export function ColorsDemo() {
|
||||
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">
|
||||
{/* Primary цвета */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Primary (Основной)</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="space-y-2">
|
||||
<div className="h-16 w-full rounded-lg" style={{background: 'oklch(0.65 0.28 315)'}}></div>
|
||||
<div className="text-white text-xs font-mono">primary</div>
|
||||
<div className="text-white/60 text-xs">oklch(0.65 0.28 315)</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-16 w-full bg-primary-foreground rounded-lg"></div>
|
||||
<div className="text-white text-xs font-mono">primary-foreground</div>
|
||||
<div className="text-white/60 text-xs">oklch(0.985 0 0)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Secondary цвета */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Secondary (Вторичный)</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="space-y-2">
|
||||
<div className="h-16 w-full bg-secondary rounded-lg"></div>
|
||||
<div className="text-white text-xs font-mono">secondary</div>
|
||||
<div className="text-white/60 text-xs">oklch(0.94 0.08 315)</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-16 w-full bg-secondary-foreground rounded-lg"></div>
|
||||
<div className="text-white text-xs font-mono">secondary-foreground</div>
|
||||
<div className="text-white/60 text-xs">oklch(0.205 0 0)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Accent цвета */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Accent (Акцентный)</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="space-y-2">
|
||||
<div className="h-16 w-full bg-accent rounded-lg"></div>
|
||||
<div className="text-white text-xs font-mono">accent</div>
|
||||
<div className="text-white/60 text-xs">oklch(0.90 0.12 315)</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-16 w-full bg-accent-foreground rounded-lg"></div>
|
||||
<div className="text-white text-xs font-mono">accent-foreground</div>
|
||||
<div className="text-white/60 text-xs">oklch(0.205 0 0)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Destructive цвета */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Destructive (Деструктивный)</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="space-y-2">
|
||||
<div className="h-16 w-full bg-destructive rounded-lg"></div>
|
||||
<div className="text-white text-xs font-mono">destructive</div>
|
||||
<div className="text-white/60 text-xs">oklch(0.577 0.245 27.325)</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">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Background цвета */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Background</h4>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-12 w-12 bg-background rounded-lg border border-white/20"></div>
|
||||
<div>
|
||||
<div className="text-white text-xs font-mono">background</div>
|
||||
<div className="text-white/60 text-xs">oklch(0.98 0.02 320)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-12 w-12 bg-foreground rounded-lg"></div>
|
||||
<div>
|
||||
<div className="text-white text-xs font-mono">foreground</div>
|
||||
<div className="text-white/60 text-xs">oklch(0.145 0 0)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Muted цвета */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Muted</h4>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-12 w-12 bg-muted rounded-lg"></div>
|
||||
<div>
|
||||
<div className="text-white text-xs font-mono">muted</div>
|
||||
<div className="text-white/60 text-xs">oklch(0.94 0.05 315)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-12 w-12 bg-muted-foreground rounded-lg"></div>
|
||||
<div>
|
||||
<div className="text-white text-xs font-mono">muted-foreground</div>
|
||||
<div className="text-white/60 text-xs">oklch(0.556 0 0)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Border и input цвета */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Border & Input</h4>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-12 w-12 bg-border rounded-lg"></div>
|
||||
<div>
|
||||
<div className="text-white text-xs font-mono">border</div>
|
||||
<div className="text-white/60 text-xs">oklch(0.90 0.08 315)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-12 w-12 bg-input rounded-lg"></div>
|
||||
<div>
|
||||
<div className="text-white text-xs font-mono">input</div>
|
||||
<div className="text-white/60 text-xs">oklch(0.96 0.05 315)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-12 w-12 bg-ring rounded-lg"></div>
|
||||
<div>
|
||||
<div className="text-white text-xs font-mono">ring</div>
|
||||
<div className="text-white/60 text-xs">oklch(0.65 0.28 315)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Card & Popover</h4>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-12 w-12 bg-card rounded-lg border border-white/20"></div>
|
||||
<div>
|
||||
<div className="text-white text-xs font-mono">card</div>
|
||||
<div className="text-white/60 text-xs">oklch(1 0 0)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-12 w-12 bg-popover rounded-lg border border-white/20"></div>
|
||||
<div>
|
||||
<div className="text-white text-xs font-mono">popover</div>
|
||||
<div className="text-white/60 text-xs">oklch(1 0 0)</div>
|
||||
</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">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Основные градиенты */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Основные градиенты</h4>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="h-16 w-full gradient-purple rounded-lg mb-2"></div>
|
||||
<div className="text-white text-xs font-mono">gradient-purple</div>
|
||||
<div className="text-white/60 text-xs">Основной фиолетовый градиент</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="h-16 w-full gradient-purple-light rounded-lg mb-2"></div>
|
||||
<div className="text-white text-xs font-mono">gradient-purple-light</div>
|
||||
<div className="text-white/60 text-xs">Светлый фиолетовый градиент</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="h-16 w-full bg-gradient-smooth rounded-lg mb-2"></div>
|
||||
<div className="text-white text-xs font-mono">bg-gradient-smooth</div>
|
||||
<div className="text-white/60 text-xs">Темный градиент для фона</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Текстовые градиенты */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Текстовые градиенты</h4>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-gradient-bright mb-2">
|
||||
Текст с ярким градиентом
|
||||
</div>
|
||||
<div className="text-white text-xs font-mono">text-gradient-bright</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-gradient mb-2">
|
||||
Текст с обычным градиентом
|
||||
</div>
|
||||
<div className="text-white text-xs font-mono">text-gradient</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-2xl font-bold glow-text mb-2">
|
||||
Текст с свечением
|
||||
</div>
|
||||
<div className="text-white text-xs font-mono">glow-text</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Прозрачности белого */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Прозрачности белого цвета</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
{[
|
||||
{ opacity: '100', class: 'text-white', bg: 'bg-white' },
|
||||
{ opacity: '90', class: 'text-white/90', bg: 'bg-white/90' },
|
||||
{ opacity: '80', class: 'text-white/80', bg: 'bg-white/80' },
|
||||
{ opacity: '70', class: 'text-white/70', bg: 'bg-white/70' },
|
||||
{ opacity: '60', class: 'text-white/60', bg: 'bg-white/60' },
|
||||
{ opacity: '50', class: 'text-white/50', bg: 'bg-white/50' },
|
||||
{ opacity: '40', class: 'text-white/40', bg: 'bg-white/40' },
|
||||
{ opacity: '30', class: 'text-white/30', bg: 'bg-white/30' },
|
||||
{ opacity: '20', class: 'text-white/20', bg: 'bg-white/20' },
|
||||
{ opacity: '10', class: 'text-white/10', bg: 'bg-white/10' },
|
||||
].map((item) => (
|
||||
<div key={item.opacity} className="space-y-2">
|
||||
<div className={`h-12 w-full ${item.bg} rounded-lg border border-white/20`}></div>
|
||||
<div className="text-white text-xs text-center">
|
||||
{item.opacity}%
|
||||
</div>
|
||||
<div className="text-white/60 text-xs font-mono text-center">
|
||||
{item.class}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Статусные цвета */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Статусные цвета</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-white/90 text-sm font-medium">Успех</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="h-12 w-full bg-green-500 rounded-lg"></div>
|
||||
<div className="text-white text-xs font-mono">green-500</div>
|
||||
<div className="text-green-400 text-sm">Успешная операция</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-white/90 text-sm font-medium">Предупреждение</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="h-12 w-full bg-yellow-500 rounded-lg"></div>
|
||||
<div className="text-white text-xs font-mono">yellow-500</div>
|
||||
<div className="text-yellow-400 text-sm">Требует внимания</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-white/90 text-sm font-medium">Ошибка</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="h-12 w-full bg-red-500 rounded-lg"></div>
|
||||
<div className="text-white text-xs font-mono">red-500</div>
|
||||
<div className="text-red-400 text-sm">Ошибка или проблема</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-white/90 text-sm font-medium">Информация</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="h-12 w-full bg-blue-500 rounded-lg"></div>
|
||||
<div className="text-white text-xs font-mono">blue-500</div>
|
||||
<div className="text-blue-400 text-sm">Информационное сообщение</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Glass эффекты */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Glass Morphism эффекты</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Основные Glass эффекты</h4>
|
||||
<div className="space-y-4">
|
||||
<div className="glass-card p-4 rounded-lg">
|
||||
<div className="text-white text-sm font-mono mb-1">glass-card</div>
|
||||
<div className="text-white/70 text-xs">Основная стеклянная карточка</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-input p-3 rounded-lg">
|
||||
<div className="text-white text-sm font-mono mb-1">glass-input</div>
|
||||
<div className="text-white/70 text-xs">Стеклянное поле ввода</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-sidebar p-4 rounded-lg">
|
||||
<div className="text-white text-sm font-mono mb-1">glass-sidebar</div>
|
||||
<div className="text-white/70 text-xs">Стеклянный сайдбар</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Glass кнопки</h4>
|
||||
<div className="space-y-4">
|
||||
<div className="glass-button p-4 rounded-lg text-center cursor-pointer">
|
||||
<div className="text-white text-sm font-mono mb-1">glass-button</div>
|
||||
<div className="text-white/70 text-xs">Основная стеклянная кнопка</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-secondary p-4 rounded-lg text-center cursor-pointer">
|
||||
<div className="text-white text-sm font-mono mb-1">glass-secondary</div>
|
||||
<div className="text-white/70 text-xs">Вторичная стеклянная кнопка</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
527
src/components/admin/ui-kit/forms-demo.tsx
Normal file
527
src/components/admin/ui-kit/forms-demo.tsx
Normal file
@ -0,0 +1,527 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { Slider } from '@/components/ui/slider'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { PhoneInput } from '@/components/ui/phone-input'
|
||||
import {
|
||||
Eye,
|
||||
EyeOff,
|
||||
Search,
|
||||
Calendar,
|
||||
Mail,
|
||||
User,
|
||||
Lock
|
||||
} from 'lucide-react'
|
||||
|
||||
export function FormsDemo() {
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [switchValue, setSwitchValue] = useState(false)
|
||||
const [sliderValue, setSliderValue] = useState([50])
|
||||
const [checkboxValue, setCheckboxValue] = 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">
|
||||
{/* Обычный инпут */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="basic-input" className="text-white/90">
|
||||
Обычное поле
|
||||
</Label>
|
||||
<Input
|
||||
id="basic-input"
|
||||
type="text"
|
||||
placeholder="Введите текст..."
|
||||
className="glass-input text-white placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Инпут с иконкой */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="icon-input" className="text-white/90">
|
||||
Поле с иконкой
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
|
||||
<Input
|
||||
id="icon-input"
|
||||
type="text"
|
||||
placeholder="Поиск..."
|
||||
className="pl-10 glass-input text-white placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Пароль */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password-input" className="text-white/90">
|
||||
Пароль
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
|
||||
<Input
|
||||
id="password-input"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="Введите пароль"
|
||||
className="pl-10 pr-10 glass-input text-white placeholder:text-white/50"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 text-white/70 hover:text-white hover:bg-white/10"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff className="h-4 w-4" />
|
||||
) : (
|
||||
<Eye className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email-input" className="text-white/90">
|
||||
Email
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
|
||||
<Input
|
||||
id="email-input"
|
||||
type="email"
|
||||
placeholder="example@domain.com"
|
||||
className="pl-10 glass-input text-white placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Телефон */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone-input" className="text-white/90">
|
||||
Телефон
|
||||
</Label>
|
||||
<PhoneInput
|
||||
id="phone-input"
|
||||
placeholder="+7 (999) 999-99-99"
|
||||
className="glass-input text-white placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Дата */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="date-input" className="text-white/90">
|
||||
Дата
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
|
||||
<Input
|
||||
id="date-input"
|
||||
type="date"
|
||||
className="pl-10 glass-input text-white placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Число */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="number-input" className="text-white/90">
|
||||
Число
|
||||
</Label>
|
||||
<Input
|
||||
id="number-input"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
min="0"
|
||||
max="100"
|
||||
className="glass-input text-white placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Отключенное поле */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="disabled-input" className="text-white/90">
|
||||
Отключенное поле
|
||||
</Label>
|
||||
<Input
|
||||
id="disabled-input"
|
||||
type="text"
|
||||
placeholder="Недоступно для редактирования"
|
||||
disabled
|
||||
className="glass-input text-white placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Селекты и выпадающие списки */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Селекты и выпадающие списки</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-white/90">
|
||||
Выберите опцию
|
||||
</Label>
|
||||
<Select>
|
||||
<SelectTrigger className="glass-input text-white">
|
||||
<SelectValue placeholder="Выберите..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="glass-card border-white/10">
|
||||
<SelectItem value="option1">Опция 1</SelectItem>
|
||||
<SelectItem value="option2">Опция 2</SelectItem>
|
||||
<SelectItem value="option3">Опция 3</SelectItem>
|
||||
<SelectItem value="option4">Опция 4</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-white/90">
|
||||
Тип организации
|
||||
</Label>
|
||||
<Select>
|
||||
<SelectTrigger className="glass-input text-white">
|
||||
<SelectValue placeholder="Выберите тип..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="glass-card border-white/10">
|
||||
<SelectItem value="fulfillment">Фулфилмент</SelectItem>
|
||||
<SelectItem value="seller">Селлер</SelectItem>
|
||||
<SelectItem value="logist">Логистика</SelectItem>
|
||||
<SelectItem value="wholesale">Оптовик</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Чекбоксы и переключатели */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Чекбоксы и переключатели</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Чекбоксы */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-white/90 text-sm font-medium">Чекбоксы</h4>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="checkbox1"
|
||||
checked={checkboxValue}
|
||||
onCheckedChange={setCheckboxValue}
|
||||
/>
|
||||
<Label
|
||||
htmlFor="checkbox1"
|
||||
className="text-white/90 text-sm cursor-pointer"
|
||||
>
|
||||
Согласие с условиями
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="checkbox2" />
|
||||
<Label
|
||||
htmlFor="checkbox2"
|
||||
className="text-white/90 text-sm cursor-pointer"
|
||||
>
|
||||
Получать уведомления
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="checkbox3" disabled />
|
||||
<Label
|
||||
htmlFor="checkbox3"
|
||||
className="text-white/60 text-sm"
|
||||
>
|
||||
Отключенный чекбокс
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Переключатели */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-white/90 text-sm font-medium">Переключатели (Switch)</h4>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
id="switch1"
|
||||
checked={switchValue}
|
||||
onCheckedChange={setSwitchValue}
|
||||
/>
|
||||
<Label
|
||||
htmlFor="switch1"
|
||||
className="text-white/90 text-sm cursor-pointer"
|
||||
>
|
||||
Включить уведомления
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch id="switch2" />
|
||||
<Label
|
||||
htmlFor="switch2"
|
||||
className="text-white/90 text-sm cursor-pointer"
|
||||
>
|
||||
Темная тема
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch id="switch3" disabled />
|
||||
<Label
|
||||
htmlFor="switch3"
|
||||
className="text-white/60 text-sm"
|
||||
>
|
||||
Отключенный переключатель
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Слайдеры */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Слайдеры</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<Label className="text-white/90 text-sm font-medium">
|
||||
Значение: {sliderValue[0]}
|
||||
</Label>
|
||||
<Slider
|
||||
value={sliderValue}
|
||||
onValueChange={setSliderValue}
|
||||
max={100}
|
||||
min={0}
|
||||
step={1}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Label className="text-white/90 text-sm font-medium">
|
||||
Диапазон цен: 1000 - 5000 ₽
|
||||
</Label>
|
||||
<Slider
|
||||
defaultValue={[1000, 5000]}
|
||||
max={10000}
|
||||
min={0}
|
||||
step={100}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Состояния полей */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Состояния полей</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Обычное состояние */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="normal-state" className="text-white/90">
|
||||
Обычное состояние
|
||||
</Label>
|
||||
<Input
|
||||
id="normal-state"
|
||||
type="text"
|
||||
placeholder="Введите текст..."
|
||||
className="glass-input text-white placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Фокус */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="focus-state" className="text-white/90">
|
||||
Состояние фокуса
|
||||
</Label>
|
||||
<Input
|
||||
id="focus-state"
|
||||
type="text"
|
||||
placeholder="Кликните для фокуса"
|
||||
className="glass-input text-white placeholder:text-white/50 focus:border-primary focus:ring-2 focus:ring-primary/20"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Ошибка */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="error-state" className="text-white/90">
|
||||
Состояние ошибки
|
||||
</Label>
|
||||
<Input
|
||||
id="error-state"
|
||||
type="text"
|
||||
placeholder="Неверные данные"
|
||||
className="glass-input text-white placeholder:text-white/50 border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-500/20"
|
||||
/>
|
||||
<p className="text-red-400 text-xs">Это поле обязательно для заполнения</p>
|
||||
</div>
|
||||
|
||||
{/* Успех */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="success-state" className="text-white/90">
|
||||
Состояние успеха
|
||||
</Label>
|
||||
<Input
|
||||
id="success-state"
|
||||
type="text"
|
||||
value="Правильно заполнено"
|
||||
className="glass-input text-white placeholder:text-white/50 border-green-500 focus:border-green-500 focus:ring-2 focus:ring-green-500/20"
|
||||
readOnly
|
||||
/>
|
||||
<p className="text-green-400 text-xs">Данные сохранены успешно</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Примеры форм */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Примеры форм</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-8">
|
||||
{/* Форма входа */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-white/90 text-sm font-medium">Форма входа</h4>
|
||||
<div className="space-y-4 max-w-sm">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="login-email" className="text-white/90">
|
||||
Email
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
|
||||
<Input
|
||||
id="login-email"
|
||||
type="email"
|
||||
placeholder="example@domain.com"
|
||||
className="pl-10 glass-input text-white placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="login-password" className="text-white/90">
|
||||
Пароль
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
|
||||
<Input
|
||||
id="login-password"
|
||||
type="password"
|
||||
placeholder="Введите пароль"
|
||||
className="pl-10 glass-input text-white placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="remember" />
|
||||
<Label htmlFor="remember" className="text-white/90 text-sm cursor-pointer">
|
||||
Запомнить меня
|
||||
</Label>
|
||||
</div>
|
||||
<Button variant="glass" className="w-full">
|
||||
Войти
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Форма регистрации */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-white/90 text-sm font-medium">Форма регистрации</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="reg-name" className="text-white/90">
|
||||
Имя
|
||||
</Label>
|
||||
<Input
|
||||
id="reg-name"
|
||||
type="text"
|
||||
placeholder="Ваше имя"
|
||||
className="glass-input text-white placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="reg-surname" className="text-white/90">
|
||||
Фамилия
|
||||
</Label>
|
||||
<Input
|
||||
id="reg-surname"
|
||||
type="text"
|
||||
placeholder="Ваша фамилия"
|
||||
className="glass-input text-white placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2 md:col-span-2">
|
||||
<Label htmlFor="reg-email" className="text-white/90">
|
||||
Email
|
||||
</Label>
|
||||
<Input
|
||||
id="reg-email"
|
||||
type="email"
|
||||
placeholder="example@domain.com"
|
||||
className="glass-input text-white placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2 md:col-span-2">
|
||||
<Label htmlFor="reg-phone" className="text-white/90">
|
||||
Телефон
|
||||
</Label>
|
||||
<PhoneInput
|
||||
id="reg-phone"
|
||||
placeholder="+7 (999) 999-99-99"
|
||||
className="glass-input text-white placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2 md:col-span-2">
|
||||
<Label className="text-white/90">
|
||||
Тип организации
|
||||
</Label>
|
||||
<Select>
|
||||
<SelectTrigger className="glass-input text-white">
|
||||
<SelectValue placeholder="Выберите тип..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="glass-card border-white/10">
|
||||
<SelectItem value="fulfillment">Фулфилмент</SelectItem>
|
||||
<SelectItem value="seller">Селлер</SelectItem>
|
||||
<SelectItem value="logist">Логистика</SelectItem>
|
||||
<SelectItem value="wholesale">Оптовик</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 md:col-span-2">
|
||||
<Checkbox id="reg-terms" />
|
||||
<Label htmlFor="reg-terms" className="text-white/90 text-sm cursor-pointer">
|
||||
Согласен с условиями использования
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex gap-2 md:col-span-2">
|
||||
<Button variant="outline" className="flex-1">
|
||||
Отмена
|
||||
</Button>
|
||||
<Button variant="glass" className="flex-1">
|
||||
Зарегистрироваться
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
543
src/components/admin/ui-kit/icons-demo.tsx
Normal file
543
src/components/admin/ui-kit/icons-demo.tsx
Normal file
@ -0,0 +1,543 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
// Основные иконки
|
||||
Home, Settings, User, Search, Bell, Heart, Share2, Download, Upload,
|
||||
Edit, Trash2, Plus, Minus, X, Check, ChevronDown, ChevronUp, ChevronLeft,
|
||||
ChevronRight, ArrowLeft, ArrowRight, ArrowUp, ArrowDown,
|
||||
|
||||
// Бизнес иконки
|
||||
Building, Package, Truck, Users, Phone, Mail, Calendar, Clock, MapPin,
|
||||
TrendingUp, TrendingDown, BarChart, PieChart, DollarSign, CreditCard,
|
||||
|
||||
// Интерфейс
|
||||
Menu, MoreHorizontal, MoreVertical, Eye, EyeOff, Lock, Unlock, Key,
|
||||
Shield, AlertCircle, AlertTriangle, Info, CheckCircle, XCircle,
|
||||
|
||||
// Файлы и медиа
|
||||
File, FileText, Image, Video, Music, Camera, Paperclip, Link2,
|
||||
|
||||
// Действия
|
||||
Play, Pause, Square, SkipForward, SkipBack, Volume2, VolumeX,
|
||||
|
||||
// Социальные
|
||||
MessageCircle, Send, ThumbsUp, ThumbsDown, Star, Bookmark,
|
||||
|
||||
// Статус
|
||||
Wifi, WifiOff, Battery, Zap, Globe, Monitor, Smartphone, Tablet
|
||||
} from 'lucide-react'
|
||||
|
||||
const iconSections = [
|
||||
{
|
||||
title: 'Основные иконки',
|
||||
icons: [
|
||||
{ icon: Home, name: 'Home' },
|
||||
{ icon: Settings, name: 'Settings' },
|
||||
{ icon: User, name: 'User' },
|
||||
{ icon: Search, name: 'Search' },
|
||||
{ icon: Bell, name: 'Bell' },
|
||||
{ icon: Heart, name: 'Heart' },
|
||||
{ icon: Share2, name: 'Share2' },
|
||||
{ icon: Download, name: 'Download' },
|
||||
{ icon: Upload, name: 'Upload' },
|
||||
{ icon: Edit, name: 'Edit' },
|
||||
{ icon: Trash2, name: 'Trash2' },
|
||||
{ icon: Plus, name: 'Plus' },
|
||||
{ icon: Minus, name: 'Minus' },
|
||||
{ icon: X, name: 'X' },
|
||||
{ icon: Check, name: 'Check' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Навигация',
|
||||
icons: [
|
||||
{ icon: ChevronDown, name: 'ChevronDown' },
|
||||
{ icon: ChevronUp, name: 'ChevronUp' },
|
||||
{ icon: ChevronLeft, name: 'ChevronLeft' },
|
||||
{ icon: ChevronRight, name: 'ChevronRight' },
|
||||
{ icon: ArrowLeft, name: 'ArrowLeft' },
|
||||
{ icon: ArrowRight, name: 'ArrowRight' },
|
||||
{ icon: ArrowUp, name: 'ArrowUp' },
|
||||
{ icon: ArrowDown, name: 'ArrowDown' },
|
||||
{ icon: Menu, name: 'Menu' },
|
||||
{ icon: MoreHorizontal, name: 'MoreHorizontal' },
|
||||
{ icon: MoreVertical, name: 'MoreVertical' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Бизнес и коммерция',
|
||||
icons: [
|
||||
{ icon: Building, name: 'Building' },
|
||||
{ icon: Package, name: 'Package' },
|
||||
{ icon: Truck, name: 'Truck' },
|
||||
{ icon: Users, name: 'Users' },
|
||||
{ icon: Phone, name: 'Phone' },
|
||||
{ icon: Mail, name: 'Mail' },
|
||||
{ icon: Calendar, name: 'Calendar' },
|
||||
{ icon: Clock, name: 'Clock' },
|
||||
{ icon: MapPin, name: 'MapPin' },
|
||||
{ icon: TrendingUp, name: 'TrendingUp' },
|
||||
{ icon: TrendingDown, name: 'TrendingDown' },
|
||||
{ icon: BarChart, name: 'BarChart' },
|
||||
{ icon: PieChart, name: 'PieChart' },
|
||||
{ icon: DollarSign, name: 'DollarSign' },
|
||||
{ icon: CreditCard, name: 'CreditCard' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Безопасность и статус',
|
||||
icons: [
|
||||
{ icon: Eye, name: 'Eye' },
|
||||
{ icon: EyeOff, name: 'EyeOff' },
|
||||
{ icon: Lock, name: 'Lock' },
|
||||
{ icon: Unlock, name: 'Unlock' },
|
||||
{ icon: Key, name: 'Key' },
|
||||
{ icon: Shield, name: 'Shield' },
|
||||
{ icon: AlertCircle, name: 'AlertCircle' },
|
||||
{ icon: AlertTriangle, name: 'AlertTriangle' },
|
||||
{ icon: Info, name: 'Info' },
|
||||
{ icon: CheckCircle, name: 'CheckCircle' },
|
||||
{ icon: XCircle, name: 'XCircle' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Файлы и медиа',
|
||||
icons: [
|
||||
{ icon: File, name: 'File' },
|
||||
{ icon: FileText, name: 'FileText' },
|
||||
{ icon: Image, name: 'Image' },
|
||||
{ icon: Video, name: 'Video' },
|
||||
{ icon: Music, name: 'Music' },
|
||||
{ icon: Camera, name: 'Camera' },
|
||||
{ icon: Paperclip, name: 'Paperclip' },
|
||||
{ icon: Link2, name: 'Link2' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Медиа контролы',
|
||||
icons: [
|
||||
{ icon: Play, name: 'Play' },
|
||||
{ icon: Pause, name: 'Pause' },
|
||||
{ icon: Square, name: 'Square' },
|
||||
{ icon: SkipForward, name: 'SkipForward' },
|
||||
{ icon: SkipBack, name: 'SkipBack' },
|
||||
{ icon: Volume2, name: 'Volume2' },
|
||||
{ icon: VolumeX, name: 'VolumeX' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Коммуникации',
|
||||
icons: [
|
||||
{ icon: MessageCircle, name: 'MessageCircle' },
|
||||
{ icon: Send, name: 'Send' },
|
||||
{ icon: ThumbsUp, name: 'ThumbsUp' },
|
||||
{ icon: ThumbsDown, name: 'ThumbsDown' },
|
||||
{ icon: Star, name: 'Star' },
|
||||
{ icon: Bookmark, name: 'Bookmark' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Устройства и подключения',
|
||||
icons: [
|
||||
{ icon: Wifi, name: 'Wifi' },
|
||||
{ icon: WifiOff, name: 'WifiOff' },
|
||||
{ icon: Battery, name: 'Battery' },
|
||||
{ icon: Zap, name: 'Zap' },
|
||||
{ icon: Globe, name: 'Globe' },
|
||||
{ icon: Monitor, name: 'Monitor' },
|
||||
{ icon: Smartphone, name: 'Smartphone' },
|
||||
{ icon: Tablet, name: 'Tablet' },
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export function IconsDemo() {
|
||||
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">
|
||||
<div className="flex items-center gap-8">
|
||||
<div className="text-center space-y-2">
|
||||
<Settings className="h-3 w-3 text-white mx-auto" />
|
||||
<div className="text-white/70 text-xs">h-3 w-3</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Settings className="h-4 w-4 text-white mx-auto" />
|
||||
<div className="text-white/70 text-xs">h-4 w-4</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Settings className="h-5 w-5 text-white mx-auto" />
|
||||
<div className="text-white/70 text-xs">h-5 w-5</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Settings className="h-6 w-6 text-white mx-auto" />
|
||||
<div className="text-white/70 text-xs">h-6 w-6</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Settings className="h-8 w-8 text-white mx-auto" />
|
||||
<div className="text-white/70 text-xs">h-8 w-8</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Settings className="h-10 w-10 text-white mx-auto" />
|
||||
<div className="text-white/70 text-xs">h-10 w-10</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Settings className="h-12 w-12 text-white mx-auto" />
|
||||
<div className="text-white/70 text-xs">h-12 w-12</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Цвета иконок */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Цвета иконок</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-3 md:grid-cols-5 gap-4">
|
||||
<div className="text-center space-y-2">
|
||||
<Heart className="h-8 w-8 text-white mx-auto" />
|
||||
<div className="text-white/70 text-xs">text-white</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Heart className="h-8 w-8 text-white/80 mx-auto" />
|
||||
<div className="text-white/70 text-xs">text-white/80</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Heart className="h-8 w-8 text-white/60 mx-auto" />
|
||||
<div className="text-white/70 text-xs">text-white/60</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Heart className="h-8 w-8 text-primary mx-auto" />
|
||||
<div className="text-white/70 text-xs">text-primary</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Heart className="h-8 w-8 text-red-400 mx-auto" />
|
||||
<div className="text-white/70 text-xs">text-red-400</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Heart className="h-8 w-8 text-green-400 mx-auto" />
|
||||
<div className="text-white/70 text-xs">text-green-400</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Heart className="h-8 w-8 text-blue-400 mx-auto" />
|
||||
<div className="text-white/70 text-xs">text-blue-400</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Heart className="h-8 w-8 text-yellow-400 mx-auto" />
|
||||
<div className="text-white/70 text-xs">text-yellow-400</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Heart className="h-8 w-8 text-purple-400 mx-auto" />
|
||||
<div className="text-white/70 text-xs">text-purple-400</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Heart className="h-8 w-8 text-pink-400 mx-auto" />
|
||||
<div className="text-white/70 text-xs">text-pink-400</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Заполненные иконки */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Заполненные иконки</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="flex items-center gap-8">
|
||||
<div className="text-center space-y-2">
|
||||
<Heart className="h-8 w-8 text-red-400 mx-auto" />
|
||||
<div className="text-white/70 text-xs">Обычная</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Heart className="h-8 w-8 text-red-400 mx-auto fill-red-400" />
|
||||
<div className="text-white/70 text-xs">Заполненная</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Star className="h-8 w-8 text-yellow-400 mx-auto" />
|
||||
<div className="text-white/70 text-xs">Обычная</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Star className="h-8 w-8 text-yellow-400 mx-auto fill-yellow-400" />
|
||||
<div className="text-white/70 text-xs">Заполненная</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-white/60 text-sm">
|
||||
Добавьте класс <code className="bg-white/10 px-1 py-0.5 rounded text-xs font-mono">fill-[color]</code> для заливки иконки
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Аватары */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Аватары</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Размеры аватаров */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Размеры</h4>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-center space-y-2">
|
||||
<Avatar className="h-6 w-6 bg-white/20">
|
||||
<AvatarFallback className="bg-white/20 text-white text-xs">XS</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="text-white/70 text-xs">h-6 w-6</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Avatar className="h-8 w-8 bg-white/20">
|
||||
<AvatarFallback className="bg-white/20 text-white text-xs">SM</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="text-white/70 text-xs">h-8 w-8</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Avatar className="h-10 w-10 bg-white/20">
|
||||
<AvatarFallback className="bg-white/20 text-white text-sm">MD</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="text-white/70 text-xs">h-10 w-10</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Avatar className="h-12 w-12 bg-white/20">
|
||||
<AvatarFallback className="bg-white/20 text-white text-sm">LG</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="text-white/70 text-xs">h-12 w-12</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Avatar className="h-16 w-16 bg-white/20">
|
||||
<AvatarFallback className="bg-white/20 text-white">XL</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="text-white/70 text-xs">h-16 w-16</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Avatar className="h-20 w-20 bg-white/20">
|
||||
<AvatarFallback className="bg-white/20 text-white text-lg">2XL</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="text-white/70 text-xs">h-20 w-20</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Типы аватаров */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Типы</h4>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-center space-y-2">
|
||||
<Avatar className="h-12 w-12 bg-white/20">
|
||||
<AvatarFallback className="bg-white/20 text-white font-semibold">ИП</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="text-white/70 text-xs">Инициалы</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Avatar className="h-12 w-12 bg-primary/20">
|
||||
<AvatarFallback className="bg-primary/20 text-white font-semibold">AB</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="text-white/70 text-xs">Цветной фон</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Avatar className="h-12 w-12 bg-white/20">
|
||||
<User className="h-6 w-6 text-white/70" />
|
||||
</Avatar>
|
||||
<div className="text-white/70 text-xs">С иконкой</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<Avatar className="h-12 w-12">
|
||||
<div className="w-full h-full bg-gradient-to-br from-primary/60 to-blue-500/60 flex items-center justify-center">
|
||||
<span className="text-white font-semibold">GR</span>
|
||||
</div>
|
||||
</Avatar>
|
||||
<div className="text-white/70 text-xs">Градиент</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Статусы */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Со статусом</h4>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-center space-y-2">
|
||||
<div className="relative">
|
||||
<Avatar className="h-12 w-12 bg-white/20">
|
||||
<AvatarFallback className="bg-white/20 text-white font-semibold">ON</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="absolute -bottom-0.5 -right-0.5 w-4 h-4 bg-green-400 rounded-full border-2 border-background"></div>
|
||||
</div>
|
||||
<div className="text-white/70 text-xs">Онлайн</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<div className="relative">
|
||||
<Avatar className="h-12 w-12 bg-white/20">
|
||||
<AvatarFallback className="bg-white/20 text-white font-semibold">AW</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="absolute -bottom-0.5 -right-0.5 w-4 h-4 bg-yellow-400 rounded-full border-2 border-background"></div>
|
||||
</div>
|
||||
<div className="text-white/70 text-xs">Отошел</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<div className="relative">
|
||||
<Avatar className="h-12 w-12 bg-white/20">
|
||||
<AvatarFallback className="bg-white/20 text-white font-semibold">OF</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="absolute -bottom-0.5 -right-0.5 w-4 h-4 bg-gray-400 rounded-full border-2 border-background"></div>
|
||||
</div>
|
||||
<div className="text-white/70 text-xs">Не в сети</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">
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Варианты</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Badge variant="default">Default</Badge>
|
||||
<Badge variant="secondary">Secondary</Badge>
|
||||
<Badge variant="outline">Outline</Badge>
|
||||
<Badge variant="destructive">Destructive</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">С иконками</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Badge variant="default" className="gap-1">
|
||||
<CheckCircle className="h-3 w-3" />
|
||||
Активно
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
Ожидание
|
||||
</Badge>
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
Предупреждение
|
||||
</Badge>
|
||||
<Badge variant="destructive" className="gap-1">
|
||||
<XCircle className="h-3 w-3" />
|
||||
Ошибка
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Статусы организаций</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Badge className="bg-blue-500/20 text-blue-400 border-blue-500/50">
|
||||
Фулфилмент
|
||||
</Badge>
|
||||
<Badge className="bg-green-500/20 text-green-400 border-green-500/50">
|
||||
Селлер
|
||||
</Badge>
|
||||
<Badge className="bg-purple-500/20 text-purple-400 border-purple-500/50">
|
||||
Логистика
|
||||
</Badge>
|
||||
<Badge className="bg-orange-500/20 text-orange-400 border-orange-500/50">
|
||||
Оптовик
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Коллекция иконок */}
|
||||
{iconSections.map((section) => (
|
||||
<Card key={section.title} className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">{section.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4">
|
||||
{section.icons.map((iconData) => {
|
||||
const IconComponent = iconData.icon
|
||||
return (
|
||||
<div key={iconData.name} className="text-center space-y-2 p-2 rounded-lg hover:bg-white/5 transition-colors">
|
||||
<IconComponent className="h-6 w-6 text-white/80 mx-auto" />
|
||||
<div className="text-white/60 text-xs font-mono">{iconData.name}</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{/* Примеры использования */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Примеры использования в интерфейсе</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Кнопки с иконками */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Кнопки с иконками</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="glass" size="sm">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Создать
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Редактировать
|
||||
</Button>
|
||||
<Button variant="destructive" size="sm">
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Удалить
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Heart className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Share2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Элементы интерфейса */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-4">Элементы интерфейса</h4>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between glass-card p-4 rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Avatar className="h-10 w-10 bg-white/20">
|
||||
<AvatarFallback className="bg-white/20 text-white text-sm">ИП</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<div className="text-white font-medium">Иван Петров</div>
|
||||
<div className="text-white/70 text-sm flex items-center">
|
||||
<Building className="h-3 w-3 mr-1" />
|
||||
ООО "Логистик"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
<CheckCircle className="h-3 w-3" />
|
||||
Активен
|
||||
</Badge>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal className="h-4 w-4 text-white/70" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
390
src/components/admin/ui-kit/typography-demo.tsx
Normal file
390
src/components/admin/ui-kit/typography-demo.tsx
Normal file
@ -0,0 +1,390 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
|
||||
export function TypographyDemo() {
|
||||
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">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold text-white mb-2">
|
||||
Заголовок H1
|
||||
</h1>
|
||||
<p className="text-xs text-white/60 font-mono">
|
||||
text-4xl font-bold
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-white mb-2">
|
||||
Заголовок H2
|
||||
</h2>
|
||||
<p className="text-xs text-white/60 font-mono">
|
||||
text-3xl font-bold
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold text-white mb-2">
|
||||
Заголовок H3
|
||||
</h3>
|
||||
<p className="text-xs text-white/60 font-mono">
|
||||
text-2xl font-semibold
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-xl font-semibold text-white mb-2">
|
||||
Заголовок H4
|
||||
</h4>
|
||||
<p className="text-xs text-white/60 font-mono">
|
||||
text-xl font-semibold
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 className="text-lg font-medium text-white mb-2">
|
||||
Заголовок H5
|
||||
</h5>
|
||||
<p className="text-xs text-white/60 font-mono">
|
||||
text-lg font-medium
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6 className="text-base font-medium text-white mb-2">
|
||||
Заголовок H6
|
||||
</h6>
|
||||
<p className="text-xs text-white/60 font-mono">
|
||||
text-base font-medium
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Градиентные заголовки */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Градиентные заголовки</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold text-gradient-bright mb-2">
|
||||
Яркий градиентный заголовок
|
||||
</h1>
|
||||
<p className="text-xs text-white/60 font-mono">
|
||||
text-gradient-bright
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-gradient mb-2">
|
||||
Обычный градиентный заголовок
|
||||
</h2>
|
||||
<p className="text-xs text-white/60 font-mono">
|
||||
text-gradient
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold glow-text mb-2">
|
||||
Заголовок с свечением
|
||||
</h3>
|
||||
<p className="text-xs text-white/60 font-mono">
|
||||
glow-text
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Основной текст */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Основной текст</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div>
|
||||
<p className="text-white text-base mb-2">
|
||||
Обычный текст. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation.
|
||||
</p>
|
||||
<p className="text-xs text-white/60 font-mono">
|
||||
text-white text-base
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white/90 text-base mb-2">
|
||||
Текст с прозрачностью 90%. Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
<p className="text-xs text-white/60 font-mono">
|
||||
text-white/90
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white/70 text-base mb-2">
|
||||
Текст с прозрачностью 70%. Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
<p className="text-xs text-white/60 font-mono">
|
||||
text-white/70
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white/60 text-base mb-2">
|
||||
Вторичный текст с прозрачностью 60%. Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
<p className="text-xs text-white/60 font-mono">
|
||||
text-white/60
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Размеры текста */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Размеры текста</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<p className="text-xs text-white mb-1">Очень мелкий текст</p>
|
||||
<p className="text-xs text-white/60 font-mono">text-xs</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-white mb-1">Мелкий текст</p>
|
||||
<p className="text-xs text-white/60 font-mono">text-sm</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-base text-white mb-1">Базовый текст</p>
|
||||
<p className="text-xs text-white/60 font-mono">text-base</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-lg text-white mb-1">Большой текст</p>
|
||||
<p className="text-xs text-white/60 font-mono">text-lg</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xl text-white mb-1">Очень большой текст</p>
|
||||
<p className="text-xs text-white/60 font-mono">text-xl</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-2xl text-white mb-1">Огромный текст</p>
|
||||
<p className="text-xs text-white/60 font-mono">text-2xl</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Насыщенность шрифта */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Насыщенность шрифта</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<p className="text-white font-light text-lg mb-1">Легкий шрифт</p>
|
||||
<p className="text-xs text-white/60 font-mono">font-light</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white font-normal text-lg mb-1">Обычный шрифт</p>
|
||||
<p className="text-xs text-white/60 font-mono">font-normal</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white font-medium text-lg mb-1">Средний шрифт</p>
|
||||
<p className="text-xs text-white/60 font-mono">font-medium</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white font-semibold text-lg mb-1">Полужирный шрифт</p>
|
||||
<p className="text-xs text-white/60 font-mono">font-semibold</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white font-bold text-lg mb-1">Жирный шрифт</p>
|
||||
<p className="text-xs text-white/60 font-mono">font-bold</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Специальные стили */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Специальные стили текста</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div>
|
||||
<p className="text-white font-mono text-sm mb-1">
|
||||
Моноширинный шрифт для кода
|
||||
</p>
|
||||
<p className="text-xs text-white/60 font-mono">font-mono</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white italic text-base mb-1">
|
||||
Курсивный текст
|
||||
</p>
|
||||
<p className="text-xs text-white/60 font-mono">italic</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white underline text-base mb-1">
|
||||
Подчеркнутый текст
|
||||
</p>
|
||||
<p className="text-xs text-white/60 font-mono">underline</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white line-through text-base mb-1">
|
||||
Зачеркнутый текст
|
||||
</p>
|
||||
<p className="text-xs text-white/60 font-mono">line-through</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white uppercase text-base mb-1">
|
||||
Заглавные буквы
|
||||
</p>
|
||||
<p className="text-xs text-white/60 font-mono">uppercase</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white lowercase text-base mb-1">
|
||||
СТРОЧНЫЕ БУКВЫ
|
||||
</p>
|
||||
<p className="text-xs text-white/60 font-mono">lowercase</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white capitalize text-base mb-1">
|
||||
первая буква заглавная
|
||||
</p>
|
||||
<p className="text-xs text-white/60 font-mono">capitalize</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Выравнивание текста */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Выравнивание текста</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div>
|
||||
<p className="text-white text-left text-base mb-1">
|
||||
Выравнивание по левому краю. Lorem ipsum dolor sit amet consectetur.
|
||||
</p>
|
||||
<p className="text-xs text-white/60 font-mono">text-left</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white text-center text-base mb-1">
|
||||
Выравнивание по центру. Lorem ipsum dolor sit amet consectetur.
|
||||
</p>
|
||||
<p className="text-xs text-white/60 font-mono">text-center</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white text-right text-base mb-1">
|
||||
Выравнивание по правому краю. Lorem ipsum dolor sit amet consectetur.
|
||||
</p>
|
||||
<p className="text-xs text-white/60 font-mono">text-right</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white text-justify text-base mb-1">
|
||||
Выравнивание по ширине. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation.
|
||||
</p>
|
||||
<p className="text-xs text-white/60 font-mono">text-justify</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Списки */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Списки</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Маркированный список</h4>
|
||||
<ul className="text-white space-y-1 list-disc list-inside">
|
||||
<li>Первый пункт списка</li>
|
||||
<li>Второй пункт списка</li>
|
||||
<li>Третий пункт списка с длинным текстом, который может переноситься на несколько строк</li>
|
||||
<li>Четвертый пункт</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Нумерованный список</h4>
|
||||
<ol className="text-white space-y-1 list-decimal list-inside">
|
||||
<li>Первый шаг процесса</li>
|
||||
<li>Второй шаг процесса</li>
|
||||
<li>Третий шаг с подробным описанием того, что нужно сделать</li>
|
||||
<li>Завершающий шаг</li>
|
||||
</ol>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Цитаты и код */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Цитаты и код</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Цитата</h4>
|
||||
<blockquote className="text-white/80 text-lg italic border-l-4 border-primary pl-4 py-2">
|
||||
"Дизайн - это не то, как вещь выглядит. Дизайн - это то, как вещь работает."
|
||||
<footer className="text-white/60 text-sm mt-2 not-italic">
|
||||
— Стив Джобс
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Инлайн код</h4>
|
||||
<p className="text-white text-base">
|
||||
Используйте класс <code className="bg-white/10 text-white px-1.5 py-0.5 rounded text-sm font-mono">glass-card</code> для создания карточек с эффектом стекла.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Блок кода</h4>
|
||||
<pre className="bg-white/5 text-white p-4 rounded-lg text-sm font-mono overflow-x-auto">
|
||||
{`<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">
|
||||
Заголовок карточки
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Содержимое карточки
|
||||
</CardContent>
|
||||
</Card>`}
|
||||
</pre>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user