diff --git a/src/components/admin/ui-kit/cards-demo.tsx b/src/components/admin/ui-kit/cards-demo.tsx index ad90885..0843b82 100644 --- a/src/components/admin/ui-kit/cards-demo.tsx +++ b/src/components/admin/ui-kit/cards-demo.tsx @@ -5,6 +5,8 @@ import { Button } from '@/components/ui/button' import { Badge } from '@/components/ui/badge' import { Avatar, AvatarFallback } from '@/components/ui/avatar' import { Progress } from '@/components/ui/progress' +import { Input } from '@/components/ui/input' +import { useState } from 'react' import { Heart, Share2, @@ -17,10 +19,92 @@ import { Package, Building, Phone, - Calendar + Calendar, + ShoppingCart, + Eye, + ChevronLeft, + ChevronRight, + Package2, + ArrowRight, + Sparkles, + Car, + Baby, + Home, + BookOpen, + Palette, + ShirtIcon, + Footprints, + Gamepad2, + Utensils, + Laptop, + Zap, + Crown } from 'lucide-react' +// Демо-компонент для аватара организации (упрощенная версия) +function DemoOrganizationAvatar({ organizationName, size = 'sm' }: { organizationName: string, size?: 'sm' | 'md' | 'lg' }) { + const getInitials = (name: string) => { + return name + .split(' ') + .map(word => word.charAt(0)) + .join('') + .toUpperCase() + .slice(0, 2) + } + + const getSizes = (size: 'sm' | 'md' | 'lg') => { + switch (size) { + case 'sm': return 'size-6' + case 'md': return 'size-8' + case 'lg': return 'size-10' + default: return 'size-6' + } + } + + return ( + + + {getInitials(organizationName)} + + + ) +} + export function CardsDemo() { + const [currentImageIndex, setCurrentImageIndex] = useState(0) + const [quantity, setQuantity] = useState(1) + const [isFavorite, setIsFavorite] = useState(false) + + // Демо данные для карточек каталога + const demoProduct = { + id: '1', + name: 'Беспроводные наушники Sony WH-1000XM4', + article: 'SONY-WH1000XM4', + price: 24990, + quantity: 15, + category: { name: 'Электроника' }, + images: ['/placeholder-product.png', '/placeholder-product.png'], + organization: { + name: 'ТехноМаркет', + inn: '7708123456789' + } + } + + const mockImages = ['/placeholder-product.png', '/placeholder-product.png', '/placeholder-product.png'] + + const getStockStatus = (quantity: number) => { + if (quantity === 0) return { text: 'Нет в наличии', color: 'bg-red-500/20 text-red-300' } + if (quantity < 10) return { text: 'Мало', color: 'bg-orange-500/20 text-orange-300' } + return { text: 'В наличии', color: 'bg-green-500/20 text-green-300' } + } + + const displayPrice = new Intl.NumberFormat('ru-RU', { + style: 'currency', + currency: 'RUB' + }).format(demoProduct.price) + + const stockStatus = getStockStatus(demoProduct.quantity) + return (
{/* Базовые карточки */} @@ -408,6 +492,816 @@ export function CardsDemo() {
+ + {/* Карточки категорий товаров из Market */} + + + Карточки категорий товаров (Market) + + Клон карточек категорий из каталога товаров /market + + + + {/* Демо карточек категорий */} +
+

Карточки категорий с градиентами

+
+ {/* Карточка "Все товары" */} + alert('Все товары выбраны!')} + className="group relative overflow-hidden bg-gradient-to-br from-indigo-500/10 via-purple-500/10 to-pink-500/10 backdrop-blur border-white/10 hover:border-white/20 transition-all duration-300 cursor-pointer hover:scale-105" + > +
+
+
+ +
+ +
+
+

+ Все товары +

+

+ Просмотреть весь каталог +

+
+
+ + {/* Эффект при наведении */} +
+ + + {/* Автотовары */} + alert('Автотовары выбраны!')} + className="group relative overflow-hidden bg-gradient-to-br from-purple-500/10 via-pink-500/10 to-red-500/10 backdrop-blur border-white/10 hover:border-purple-500/30 transition-all duration-300 cursor-pointer hover:scale-105" + > +
+
+
+ +
+ +
+
+

+ Автотовары +

+

+ Товары категории +

+
+
+ + {/* Эффект при наведении */} +
+ + + {/* Детские товары */} + alert('Детские товары выбраны!')} + className="group relative overflow-hidden bg-gradient-to-br from-blue-500/10 via-cyan-500/10 to-teal-500/10 backdrop-blur border-white/10 hover:border-blue-500/30 transition-all duration-300 cursor-pointer hover:scale-105" + > +
+
+
+ +
+ +
+
+

+ Детские товары +

+

+ Товары категории +

+
+
+ + {/* Эффект при наведении */} +
+ + + {/* Дом и сад */} + alert('Дом и сад выбран!')} + className="group relative overflow-hidden bg-gradient-to-br from-green-500/10 via-emerald-500/10 to-lime-500/10 backdrop-blur border-white/10 hover:border-green-500/30 transition-all duration-300 cursor-pointer hover:scale-105" + > +
+
+
+ +
+ +
+
+

+ Дом и сад +

+

+ Товары категории +

+
+
+ + {/* Эффект при наведении */} +
+ +
+
+ + {/* Вторая строка категорий */} +
+

Дополнительные категории

+
+ {/* Книги и канцелярия */} + alert('Книги и канцелярия выбраны!')} + className="group relative overflow-hidden bg-gradient-to-br from-yellow-500/10 via-orange-500/10 to-red-500/10 backdrop-blur border-white/10 hover:border-orange-500/30 transition-all duration-300 cursor-pointer hover:scale-105" + > +
+
+
+ +
+ +
+
+

+ Книги и канцелярия +

+

+ Товары категории +

+
+
+ + {/* Эффект при наведении */} +
+ + + {/* Красота и здоровье */} + alert('Красота и здоровье выбраны!')} + className="group relative overflow-hidden bg-gradient-to-br from-pink-500/10 via-rose-500/10 to-purple-500/10 backdrop-blur border-white/10 hover:border-pink-500/30 transition-all duration-300 cursor-pointer hover:scale-105" + > +
+
+
+ +
+ +
+
+

+ Красота и здоровье +

+

+ Товары категории +

+
+
+ + {/* Эффект при наведении */} +
+ + + {/* Обувь */} + alert('Обувь выбрана!')} + className="group relative overflow-hidden bg-gradient-to-br from-indigo-500/10 via-blue-500/10 to-cyan-500/10 backdrop-blur border-white/10 hover:border-indigo-500/30 transition-all duration-300 cursor-pointer hover:scale-105" + > +
+
+
+ +
+ +
+
+

+ Обувь +

+

+ Товары категории +

+
+
+ + {/* Эффект при наведении */} +
+ + + {/* Одежда */} + alert('Одежда выбрана!')} + className="group relative overflow-hidden bg-gradient-to-br from-teal-500/10 via-green-500/10 to-emerald-500/10 backdrop-blur border-white/10 hover:border-teal-500/30 transition-all duration-300 cursor-pointer hover:scale-105" + > +
+
+
+ +
+ +
+
+

+ Одежда +

+

+ Товары категории +

+
+
+ + {/* Эффект при наведении */} +
+ +
+
+ + {/* Продвинутые карточки категорий с премиум-эффектами */} +
+

🚀 Премиум карточки с продвинутыми эффектами

+
+ {/* Автотовары - Премиум */} + +
+
+ +
+
+
+
+
+ +
+
+
+
+ HOT +
+ +
+
+ +
+
+

+ Автотовары +

+

+ Запчасти и аксессуары для авто +

+
+
+
+
+
+
+
+ 1,247 товаров +
+
+
+ + {/* Частицы */} +
+
+ + + {/* Детские товары - Премиум */} + +
+
+ +
+
+
+
+
+ +
+
+
+
+ NEW +
+ +
+
+ +
+
+

+ Детские товары +

+

+ Игрушки и товары для детей +

+
+
+
+
+
+
+
+ 892 товаров +
+
+
+ + {/* Плавающие элементы */} +
+
+ + + {/* Дом и сад - Премиум */} + +
+
+ +
+
+
+
+
+ +
+
+
+
+ ECO +
+ +
+
+ +
+
+

+ Дом и сад +

+

+ Товары для дома и садоводства +

+
+
+
+
+
+
+
+ 2,156 товаров +
+
+
+ + {/* Органические элементы */} +
+
+ +
+
+ + {/* Мега-премиум карточки с 3D эффектами */} +
+

✨ Мега-премиум карточки с 3D эффектами

+
+ {/* Электроника - 3D Премиум */} + + {/* Фоновая анимация */} +
+
+ + {/* Плавающие частицы */} +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+
+ + TECH +
+
+
+ +
+
+
+ +
+
+

+ Электроника +

+

+ Современные гаджеты и техника +

+
+ +
+
+
+
+
+
+
+ 3,428 товаров +
+ +
+
+ Онлайн +
+
+
+
+ + + {/* Премиум категория - Корона */} + + {/* Золотое свечение */} +
+
+ + {/* Премиум частицы */} +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+
+ + VIP +
+
+
+ +
+
+
+ +
+
+

+ Премиум товары +

+

+ Эксклюзивные и люксовые товары +

+
+ +
+
+
+
+
+
+
+ 156 товаров +
+ +
+ + EXCLUSIVE +
+
+
+
+ +
+
+ + {/* Код использования */} +
+

Код использования карточек категорий

+
+

📝 Пример использования карточки категории:

+ 
+{` onSelectCategory(category.id, category.name)}
+  className="group relative overflow-hidden bg-gradient-to-br from-purple-500/10 via-pink-500/10 to-red-500/10 backdrop-blur border-white/10 hover:border-purple-500/30 transition-all duration-300 cursor-pointer hover:scale-105"
+>
+  

+    

+      

+        
+      

+      
+    

+    

+      

+        {category.name}
+      

+      

+        Товары категории
+      

+    

+  

+  
+  {/* Эффект при наведении */}
+  

+`}
+
+
+
+ + + + {/* Карточки каталога товаров из Market */} + + + Карточки товаров каталога (Market) + + Клон карточек товаров из раздела /market с полным функционалом + + + + {/* Основная карточка товара */} +
+

Полная карточка товара

+
+
+ {/* Изображения товара */} +
+
+ +
+ + {/* Навигация по изображениям */} + + + + {/* Индикаторы изображений */} +
+ {[0, 1, 2].map((index) => ( +
+ ))} +
+ + {/* Кнопка увеличения */} + +
+ + {/* Информация о товаре */} +
+ {/* Название и цена */} +
+

{demoProduct.name}

+
+ {displayPrice} + + {stockStatus.text} + +
+
+ + {/* Краткая информация */} +
+ Арт: {demoProduct.article} + {demoProduct.category.name} +
+ + {/* Информация о продавце */} +
+
+ +
+

{demoProduct.organization.name}

+

ИНН: {demoProduct.organization.inn}

+
+
+
+ + {/* Выбор количества и добавление в заявки */} +
+ {/* Выбор количества */} +
+ Количество: + { + const value = parseInt(e.target.value) || 1 + if (value >= 1 && value <= demoProduct.quantity) { + setQuantity(value) + } + }} + className="w-16 h-6 text-xs text-center glass-input text-white border-white/20" + /> +
+ + {/* Кнопки действий */} +
+ {/* Кнопка добавления в заявки */} + + + {/* Кнопка избранного */} + +
+
+
+
+
+
+ + {/* Варианты карточек товаров */} +
+

Варианты состояний карточек

+
+ {/* Товар в наличии */} +
+
+
+ +
+
+
+
+

Товар в наличии

+
+ 1 599 ₽ + В наличии +
+
+
+ Арт: DEMO-001 + Категория +
+
+
+ +
+

Поставщик А

+

ИНН: 1234567890

+
+
+
+ +
+
+ + {/* Товар заканчивается */} +
+
+
+ +
+
+
+
+

Товар заканчивается

+
+ 2 299 ₽ + Мало +
+
+
+ Арт: DEMO-002 + Категория +
+
+
+ +
+

Поставщик Б

+

ИНН: 0987654321

+
+
+
+ +
+
+ + {/* Товар недоступен */} +
+
+
+ +
+
+
+
+

Товар недоступен

+
+ 999 ₽ + Нет в наличии +
+
+
+ Арт: DEMO-003 + Категория +
+
+
+ +
+

Поставщик В

+

ИНН: 5678901234

+
+
+
+ +
+
+
+
+ + {/* Код использования */} +
+

Код использования

+
+

📝 Пример использования карточки товара:

+ 
+{``}
+
+
+
+ +
) } \ No newline at end of file