Добавлен новый демо-компонент для отображения карточек товаров и категорий в интерфейсе. Реализованы функции для управления состоянием карточек, включая выбор количества и добавление в заявки. Оптимизирован интерфейс с использованием новых компонентов, улучшена логика отображения данных о товарах и категориях.
This commit is contained in:
Veronika Smirnova
@ -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 (
|
||||
<Avatar className={getSizes(size)}>
|
||||
<AvatarFallback className="bg-purple-500 text-white font-medium text-xs">
|
||||
{getInitials(organizationName)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
)
|
||||
}
|
||||
|
||||
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 (
|
||||
<div className="space-y-6">
|
||||
{/* Базовые карточки */}
|
||||
@ -408,6 +492,816 @@ export function CardsDemo() {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Карточки категорий товаров из Market */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Карточки категорий товаров (Market)</CardTitle>
|
||||
<CardDescription className="text-white/70">
|
||||
Клон карточек категорий из каталога товаров /market
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Демо карточек категорий */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Карточки категорий с градиентами</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{/* Карточка "Все товары" */}
|
||||
<Card
|
||||
onClick={() => 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"
|
||||
>
|
||||
<div className="p-6 h-32 flex flex-col justify-between">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="p-3 rounded-lg bg-gradient-to-r from-indigo-500/20 to-purple-500/20 border border-indigo-500/30">
|
||||
<Sparkles className="h-6 w-6 text-indigo-400" />
|
||||
</div>
|
||||
<ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
|
||||
Все товары
|
||||
</h3>
|
||||
<p className="text-white/60 text-sm">
|
||||
Просмотреть весь каталог
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Эффект при наведении */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-indigo-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
</Card>
|
||||
|
||||
{/* Автотовары */}
|
||||
<Card
|
||||
onClick={() => 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"
|
||||
>
|
||||
<div className="p-6 h-32 flex flex-col justify-between">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="p-3 rounded-lg bg-gradient-to-r from-purple-500/20 to-pink-500/20 border border-purple-500/30">
|
||||
<Package2 className="h-6 w-6 text-purple-400" />
|
||||
</div>
|
||||
<ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
|
||||
Автотовары
|
||||
</h3>
|
||||
<p className="text-white/60 text-sm">
|
||||
Товары категории
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Эффект при наведении */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-pink-500/10 to-red-500/10 opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
|
||||
</Card>
|
||||
|
||||
{/* Детские товары */}
|
||||
<Card
|
||||
onClick={() => 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"
|
||||
>
|
||||
<div className="p-6 h-32 flex flex-col justify-between">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="p-3 rounded-lg bg-gradient-to-r from-blue-500/20 to-cyan-500/20 border border-blue-500/30">
|
||||
<Package2 className="h-6 w-6 text-blue-400" />
|
||||
</div>
|
||||
<ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
|
||||
Детские товары
|
||||
</h3>
|
||||
<p className="text-white/60 text-sm">
|
||||
Товары категории
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Эффект при наведении */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 via-cyan-500/10 to-teal-500/10 opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
|
||||
</Card>
|
||||
|
||||
{/* Дом и сад */}
|
||||
<Card
|
||||
onClick={() => 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"
|
||||
>
|
||||
<div className="p-6 h-32 flex flex-col justify-between">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="p-3 rounded-lg bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-500/30">
|
||||
<Package2 className="h-6 w-6 text-green-400" />
|
||||
</div>
|
||||
<ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
|
||||
Дом и сад
|
||||
</h3>
|
||||
<p className="text-white/60 text-sm">
|
||||
Товары категории
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Эффект при наведении */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-green-500/10 via-emerald-500/10 to-lime-500/10 opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Вторая строка категорий */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Дополнительные категории</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{/* Книги и канцелярия */}
|
||||
<Card
|
||||
onClick={() => 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"
|
||||
>
|
||||
<div className="p-6 h-32 flex flex-col justify-between">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="p-3 rounded-lg bg-gradient-to-r from-yellow-500/20 to-orange-500/20 border border-orange-500/30">
|
||||
<Package2 className="h-6 w-6 text-orange-400" />
|
||||
</div>
|
||||
<ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
|
||||
Книги и канцелярия
|
||||
</h3>
|
||||
<p className="text-white/60 text-sm">
|
||||
Товары категории
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Эффект при наведении */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-yellow-500/10 via-orange-500/10 to-red-500/10 opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
|
||||
</Card>
|
||||
|
||||
{/* Красота и здоровье */}
|
||||
<Card
|
||||
onClick={() => 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"
|
||||
>
|
||||
<div className="p-6 h-32 flex flex-col justify-between">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="p-3 rounded-lg bg-gradient-to-r from-pink-500/20 to-rose-500/20 border border-pink-500/30">
|
||||
<Package2 className="h-6 w-6 text-pink-400" />
|
||||
</div>
|
||||
<ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
|
||||
Красота и здоровье
|
||||
</h3>
|
||||
<p className="text-white/60 text-sm">
|
||||
Товары категории
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Эффект при наведении */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-pink-500/10 via-rose-500/10 to-purple-500/10 opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
|
||||
</Card>
|
||||
|
||||
{/* Обувь */}
|
||||
<Card
|
||||
onClick={() => 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"
|
||||
>
|
||||
<div className="p-6 h-32 flex flex-col justify-between">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="p-3 rounded-lg bg-gradient-to-r from-indigo-500/20 to-blue-500/20 border border-indigo-500/30">
|
||||
<Package2 className="h-6 w-6 text-indigo-400" />
|
||||
</div>
|
||||
<ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
|
||||
Обувь
|
||||
</h3>
|
||||
<p className="text-white/60 text-sm">
|
||||
Товары категории
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Эффект при наведении */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-indigo-500/10 via-blue-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
|
||||
</Card>
|
||||
|
||||
{/* Одежда */}
|
||||
<Card
|
||||
onClick={() => 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"
|
||||
>
|
||||
<div className="p-6 h-32 flex flex-col justify-between">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="p-3 rounded-lg bg-gradient-to-r from-teal-500/20 to-green-500/20 border border-teal-500/30">
|
||||
<Package2 className="h-6 w-6 text-teal-400" />
|
||||
</div>
|
||||
<ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
|
||||
Одежда
|
||||
</h3>
|
||||
<p className="text-white/60 text-sm">
|
||||
Товары категории
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Эффект при наведении */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-teal-500/10 via-green-500/10 to-emerald-500/10 opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Продвинутые карточки категорий с премиум-эффектами */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">🚀 Премиум карточки с продвинутыми эффектами</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* Автотовары - Премиум */}
|
||||
<Card className="group relative overflow-hidden bg-gradient-to-br from-red-500/5 via-orange-500/5 to-yellow-500/5 backdrop-blur-xl border border-red-500/20 hover:border-red-400/40 transition-all duration-500 cursor-pointer hover:scale-[1.02] hover:shadow-2xl hover:shadow-red-500/25">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-red-500/10 via-orange-500/10 to-yellow-500/10 opacity-0 group-hover:opacity-100 transition-all duration-500" />
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" />
|
||||
|
||||
<div className="relative p-8 h-48 flex flex-col justify-between">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-2 bg-gradient-to-r from-red-500/30 to-orange-500/30 rounded-full blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
<div className="relative p-4 rounded-2xl bg-gradient-to-br from-red-500/20 to-orange-500/20 border border-red-500/30 backdrop-blur-sm">
|
||||
<Car className="h-8 w-8 text-red-400 group-hover:text-red-300 transition-colors duration-300" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-end space-y-2">
|
||||
<div className="px-3 py-1 rounded-full bg-red-500/20 border border-red-500/30 backdrop-blur-sm">
|
||||
<span className="text-red-300 text-xs font-medium">HOT</span>
|
||||
</div>
|
||||
<ArrowRight className="h-6 w-6 text-white/30 group-hover:text-white/80 group-hover:translate-x-1 transition-all duration-300" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-white group-hover:text-red-200 transition-colors duration-300 mb-1">
|
||||
Автотовары
|
||||
</h3>
|
||||
<p className="text-white/60 group-hover:text-white/80 transition-colors duration-300">
|
||||
Запчасти и аксессуары для авто
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex -space-x-1">
|
||||
<div className="w-6 h-6 rounded-full bg-gradient-to-r from-red-500 to-orange-500 border-2 border-white/20" />
|
||||
<div className="w-6 h-6 rounded-full bg-gradient-to-r from-orange-500 to-yellow-500 border-2 border-white/20" />
|
||||
<div className="w-6 h-6 rounded-full bg-gradient-to-r from-yellow-500 to-red-500 border-2 border-white/20" />
|
||||
</div>
|
||||
<span className="text-white/50 text-sm">1,247 товаров</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Частицы */}
|
||||
<div className="absolute top-4 right-4 w-2 h-2 bg-red-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping transition-opacity duration-300" />
|
||||
<div className="absolute bottom-8 left-8 w-1 h-1 bg-orange-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-opacity duration-500 delay-100" />
|
||||
</Card>
|
||||
|
||||
{/* Детские товары - Премиум */}
|
||||
<Card className="group relative overflow-hidden bg-gradient-to-br from-pink-500/5 via-purple-500/5 to-blue-500/5 backdrop-blur-xl border border-pink-500/20 hover:border-pink-400/40 transition-all duration-500 cursor-pointer hover:scale-[1.02] hover:shadow-2xl hover:shadow-pink-500/25">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-pink-500/10 via-purple-500/10 to-blue-500/10 opacity-0 group-hover:opacity-100 transition-all duration-500" />
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" />
|
||||
|
||||
<div className="relative p-8 h-48 flex flex-col justify-between">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-2 bg-gradient-to-r from-pink-500/30 to-purple-500/30 rounded-full blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
<div className="relative p-4 rounded-2xl bg-gradient-to-br from-pink-500/20 to-purple-500/20 border border-pink-500/30 backdrop-blur-sm">
|
||||
<Baby className="h-8 w-8 text-pink-400 group-hover:text-pink-300 transition-colors duration-300" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-end space-y-2">
|
||||
<div className="px-3 py-1 rounded-full bg-pink-500/20 border border-pink-500/30 backdrop-blur-sm">
|
||||
<span className="text-pink-300 text-xs font-medium">NEW</span>
|
||||
</div>
|
||||
<ArrowRight className="h-6 w-6 text-white/30 group-hover:text-white/80 group-hover:translate-x-1 transition-all duration-300" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-white group-hover:text-pink-200 transition-colors duration-300 mb-1">
|
||||
Детские товары
|
||||
</h3>
|
||||
<p className="text-white/60 group-hover:text-white/80 transition-colors duration-300">
|
||||
Игрушки и товары для детей
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex -space-x-1">
|
||||
<div className="w-6 h-6 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 border-2 border-white/20" />
|
||||
<div className="w-6 h-6 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 border-2 border-white/20" />
|
||||
<div className="w-6 h-6 rounded-full bg-gradient-to-r from-blue-500 to-pink-500 border-2 border-white/20" />
|
||||
</div>
|
||||
<span className="text-white/50 text-sm">892 товаров</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Плавающие элементы */}
|
||||
<div className="absolute top-6 right-6 w-3 h-3 bg-pink-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-bounce transition-opacity duration-300 delay-200" />
|
||||
<div className="absolute bottom-12 left-6 w-2 h-2 bg-purple-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-opacity duration-500 delay-300" />
|
||||
</Card>
|
||||
|
||||
{/* Дом и сад - Премиум */}
|
||||
<Card className="group relative overflow-hidden bg-gradient-to-br from-green-500/5 via-emerald-500/5 to-teal-500/5 backdrop-blur-xl border border-green-500/20 hover:border-green-400/40 transition-all duration-500 cursor-pointer hover:scale-[1.02] hover:shadow-2xl hover:shadow-green-500/25">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-green-500/10 via-emerald-500/10 to-teal-500/10 opacity-0 group-hover:opacity-100 transition-all duration-500" />
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-green-500 via-emerald-500 to-teal-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" />
|
||||
|
||||
<div className="relative p-8 h-48 flex flex-col justify-between">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-2 bg-gradient-to-r from-green-500/30 to-emerald-500/30 rounded-full blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
<div className="relative p-4 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 border border-green-500/30 backdrop-blur-sm">
|
||||
<Home className="h-8 w-8 text-green-400 group-hover:text-green-300 transition-colors duration-300" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-end space-y-2">
|
||||
<div className="px-3 py-1 rounded-full bg-green-500/20 border border-green-500/30 backdrop-blur-sm">
|
||||
<span className="text-green-300 text-xs font-medium">ECO</span>
|
||||
</div>
|
||||
<ArrowRight className="h-6 w-6 text-white/30 group-hover:text-white/80 group-hover:translate-x-1 transition-all duration-300" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-white group-hover:text-green-200 transition-colors duration-300 mb-1">
|
||||
Дом и сад
|
||||
</h3>
|
||||
<p className="text-white/60 group-hover:text-white/80 transition-colors duration-300">
|
||||
Товары для дома и садоводства
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex -space-x-1">
|
||||
<div className="w-6 h-6 rounded-full bg-gradient-to-r from-green-500 to-emerald-500 border-2 border-white/20" />
|
||||
<div className="w-6 h-6 rounded-full bg-gradient-to-r from-emerald-500 to-teal-500 border-2 border-white/20" />
|
||||
<div className="w-6 h-6 rounded-full bg-gradient-to-r from-teal-500 to-green-500 border-2 border-white/20" />
|
||||
</div>
|
||||
<span className="text-white/50 text-sm">2,156 товаров</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Органические элементы */}
|
||||
<div className="absolute top-8 right-8 w-4 h-4 bg-green-400/50 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-opacity duration-300" />
|
||||
<div className="absolute bottom-16 left-12 w-1 h-1 bg-emerald-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping transition-opacity duration-500 delay-150" />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Мега-премиум карточки с 3D эффектами */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">✨ Мега-премиум карточки с 3D эффектами</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{/* Электроника - 3D Премиум */}
|
||||
<Card className="group relative overflow-hidden bg-gradient-to-br from-blue-500/5 via-indigo-500/5 to-purple-500/5 backdrop-blur-xl border border-blue-500/20 hover:border-blue-400/50 transition-all duration-700 cursor-pointer hover:scale-[1.03] hover:rotate-1 hover:shadow-2xl hover:shadow-blue-500/30 transform-gpu perspective-1000">
|
||||
{/* Фоновая анимация */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 via-indigo-500/10 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-all duration-700" />
|
||||
<div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
{/* Плавающие частицы */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute top-1/4 left-1/4 w-2 h-2 bg-blue-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping transition-opacity duration-500 delay-100" />
|
||||
<div className="absolute top-3/4 right-1/4 w-1 h-1 bg-indigo-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-opacity duration-700 delay-200" />
|
||||
<div className="absolute bottom-1/4 left-3/4 w-3 h-3 bg-purple-400/30 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-bounce transition-opacity duration-600 delay-300" />
|
||||
</div>
|
||||
|
||||
<div className="relative p-10 h-64 flex flex-col justify-between">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="relative transform group-hover:scale-110 transition-transform duration-500">
|
||||
<div className="absolute -inset-4 bg-gradient-to-r from-blue-500/40 to-purple-500/40 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
|
||||
<div className="relative p-6 rounded-3xl bg-gradient-to-br from-blue-500/20 to-indigo-500/20 border border-blue-500/40 backdrop-blur-md shadow-2xl">
|
||||
<Laptop className="h-12 w-12 text-blue-400 group-hover:text-blue-300 transition-colors duration-500" />
|
||||
<div className="absolute top-2 right-2 w-3 h-3 bg-green-400 rounded-full animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end space-y-3">
|
||||
<div className="px-4 py-2 rounded-full bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-blue-500/40 backdrop-blur-md">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Zap className="h-4 w-4 text-yellow-400" />
|
||||
<span className="text-blue-300 text-sm font-bold">TECH</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 rounded-full bg-white/10 backdrop-blur-sm group-hover:bg-blue-500/20 transition-colors duration-300">
|
||||
<ArrowRight className="h-8 w-8 text-white/40 group-hover:text-white/90 group-hover:translate-x-2 group-hover:scale-110 transition-all duration-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-3xl font-bold text-white group-hover:text-blue-200 transition-colors duration-500 mb-2 tracking-tight">
|
||||
Электроника
|
||||
</h3>
|
||||
<p className="text-white/60 group-hover:text-white/90 transition-colors duration-500 text-lg">
|
||||
Современные гаджеты и техника
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="flex -space-x-2">
|
||||
<div className="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-indigo-500 border-3 border-white/30 shadow-lg" />
|
||||
<div className="w-8 h-8 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 border-3 border-white/30 shadow-lg" />
|
||||
<div className="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 border-3 border-white/30 shadow-lg" />
|
||||
</div>
|
||||
<span className="text-white/70 font-medium">3,428 товаров</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse" />
|
||||
<span className="text-green-300 text-sm font-medium">Онлайн</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Премиум категория - Корона */}
|
||||
<Card className="group relative overflow-hidden bg-gradient-to-br from-yellow-500/5 via-orange-500/5 to-red-500/5 backdrop-blur-xl border-2 border-yellow-500/30 hover:border-yellow-400/60 transition-all duration-700 cursor-pointer hover:scale-[1.03] hover:-rotate-1 hover:shadow-2xl hover:shadow-yellow-500/40 transform-gpu">
|
||||
{/* Золотое свечение */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-yellow-500/10 via-orange-500/15 to-red-500/10 opacity-0 group-hover:opacity-100 transition-all duration-700" />
|
||||
<div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-yellow-500 via-orange-500 to-red-500 shadow-lg shadow-yellow-500/50" />
|
||||
|
||||
{/* Премиум частицы */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute top-1/3 right-1/3 w-4 h-4 bg-yellow-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping transition-opacity duration-500" />
|
||||
<div className="absolute bottom-1/3 left-1/5 w-2 h-2 bg-orange-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-bounce transition-opacity duration-700 delay-100" />
|
||||
<div className="absolute top-1/2 left-1/2 w-1 h-1 bg-red-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-opacity duration-600 delay-200" />
|
||||
</div>
|
||||
|
||||
<div className="relative p-10 h-64 flex flex-col justify-between">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="relative transform group-hover:scale-110 group-hover:rotate-12 transition-transform duration-700">
|
||||
<div className="absolute -inset-6 bg-gradient-to-r from-yellow-500/50 to-orange-500/50 rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
|
||||
<div className="relative p-6 rounded-3xl bg-gradient-to-br from-yellow-500/30 to-orange-500/30 border-2 border-yellow-500/50 backdrop-blur-md shadow-2xl">
|
||||
<Crown className="h-12 w-12 text-yellow-400 group-hover:text-yellow-300 transition-colors duration-500" />
|
||||
<div className="absolute -top-1 -right-1 w-4 h-4 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full animate-pulse shadow-lg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end space-y-3">
|
||||
<div className="px-4 py-2 rounded-full bg-gradient-to-r from-yellow-500/30 to-orange-500/30 border-2 border-yellow-500/50 backdrop-blur-md shadow-lg">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Sparkles className="h-4 w-4 text-yellow-300 animate-pulse" />
|
||||
<span className="text-yellow-200 text-sm font-bold">VIP</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 rounded-full bg-gradient-to-r from-yellow-500/20 to-orange-500/20 backdrop-blur-sm group-hover:from-yellow-500/40 group-hover:to-orange-500/40 transition-all duration-500">
|
||||
<ArrowRight className="h-8 w-8 text-yellow-300 group-hover:text-yellow-200 group-hover:translate-x-2 group-hover:scale-110 transition-all duration-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-3xl font-bold bg-gradient-to-r from-yellow-200 via-orange-200 to-yellow-200 bg-clip-text text-transparent group-hover:from-yellow-100 group-hover:to-orange-100 transition-all duration-500 mb-2 tracking-tight">
|
||||
Премиум товары
|
||||
</h3>
|
||||
<p className="text-white/70 group-hover:text-white/90 transition-colors duration-500 text-lg">
|
||||
Эксклюзивные и люксовые товары
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="flex -space-x-2">
|
||||
<div className="w-8 h-8 rounded-full bg-gradient-to-r from-yellow-500 to-orange-500 border-3 border-yellow-300/50 shadow-xl" />
|
||||
<div className="w-8 h-8 rounded-full bg-gradient-to-r from-orange-500 to-red-500 border-3 border-orange-300/50 shadow-xl" />
|
||||
<div className="w-8 h-8 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 border-3 border-red-300/50 shadow-xl" />
|
||||
</div>
|
||||
<span className="text-yellow-200/90 font-medium">156 товаров</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Crown className="w-4 h-4 text-yellow-400" />
|
||||
<span className="text-yellow-300 text-sm font-bold">EXCLUSIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Код использования */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Код использования карточек категорий</h4>
|
||||
<div className="p-4 rounded-lg bg-black/20 border border-white/5">
|
||||
<p className="text-white/60 text-sm mb-2">📝 Пример использования карточки категории:</p>
|
||||
<pre className="text-green-400 text-xs overflow-x-auto whitespace-pre-wrap">
|
||||
{`<Card
|
||||
onClick={() => 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"
|
||||
>
|
||||
<div className="p-6 h-32 flex flex-col justify-between">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="p-3 rounded-lg bg-gradient-to-r from-purple-500/20 to-pink-500/20 border border-purple-500/30">
|
||||
<Package2 className="h-6 w-6 text-purple-400" />
|
||||
</div>
|
||||
<ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">
|
||||
{category.name}
|
||||
</h3>
|
||||
<p className="text-white/60 text-sm">
|
||||
Товары категории
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Эффект при наведении */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-pink-500/10 to-red-500/10 opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
|
||||
</Card>`}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Карточки каталога товаров из Market */}
|
||||
<Card className="glass-card border-white/10">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Карточки товаров каталога (Market)</CardTitle>
|
||||
<CardDescription className="text-white/70">
|
||||
Клон карточек товаров из раздела /market с полным функционалом
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Основная карточка товара */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Полная карточка товара</h4>
|
||||
<div className="max-w-sm">
|
||||
<div className="glass-card p-3 hover:bg-white/10 transition-all duration-300 group">
|
||||
{/* Изображения товара */}
|
||||
<div className="relative mb-3 aspect-video bg-white/5 rounded-lg overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-blue-500/20 flex items-center justify-center">
|
||||
<Package className="h-12 w-12 text-white/40" />
|
||||
</div>
|
||||
|
||||
{/* Навигация по изображениям */}
|
||||
<button className="absolute left-2 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</button>
|
||||
<button className="absolute right-2 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
{/* Индикаторы изображений */}
|
||||
<div className="absolute bottom-2 left-1/2 -translate-x-1/2 flex space-x-1">
|
||||
{[0, 1, 2].map((index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`w-2 h-2 rounded-full transition-all ${
|
||||
index === currentImageIndex ? 'bg-white' : 'bg-white/50'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Кнопка увеличения */}
|
||||
<button className="absolute top-2 right-2 bg-black/50 hover:bg-black/70 text-white p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Eye className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Информация о товаре */}
|
||||
<div className="space-y-2">
|
||||
{/* Название и цена */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-white text-sm mb-1 line-clamp-1">{demoProduct.name}</h3>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-base font-bold text-purple-300">{displayPrice}</span>
|
||||
<Badge className={`${stockStatus.color} text-xs`}>
|
||||
{stockStatus.text}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Краткая информация */}
|
||||
<div className="flex items-center justify-between text-xs text-white/60">
|
||||
<span>Арт: {demoProduct.article}</span>
|
||||
<span className="bg-white/10 px-2 py-1 rounded text-xs">{demoProduct.category.name}</span>
|
||||
</div>
|
||||
|
||||
{/* Информация о продавце */}
|
||||
<div className="border-t border-white/10 pt-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<DemoOrganizationAvatar organizationName={demoProduct.organization.name} size="sm" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-white text-xs truncate">{demoProduct.organization.name}</p>
|
||||
<p className="text-xs text-white/50">ИНН: {demoProduct.organization.inn}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Выбор количества и добавление в заявки */}
|
||||
<div className="space-y-2">
|
||||
{/* Выбор количества */}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-white/70">Количество:</span>
|
||||
<Input
|
||||
type="number"
|
||||
min="1"
|
||||
max={demoProduct.quantity}
|
||||
value={quantity}
|
||||
onChange={(e) => {
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Кнопки действий */}
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Кнопка добавления в заявки */}
|
||||
<Button
|
||||
onClick={() => alert('Добавлено в заявки!')}
|
||||
className="flex-1 h-8 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white border-0 text-xs"
|
||||
>
|
||||
<ShoppingCart className="h-3 w-3 mr-1" />
|
||||
В заявки
|
||||
</Button>
|
||||
|
||||
{/* Кнопка избранного */}
|
||||
<Button
|
||||
onClick={() => setIsFavorite(!isFavorite)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className={`h-8 w-8 p-0 transition-all ${
|
||||
isFavorite
|
||||
? 'bg-red-500/20 border-red-500/30 text-red-400 hover:bg-red-500/30'
|
||||
: 'bg-white/5 border-white/20 text-white/60 hover:bg-red-500/20 hover:border-red-500/30 hover:text-red-400'
|
||||
}`}
|
||||
>
|
||||
<Heart className={`h-4 w-4 ${isFavorite ? 'fill-current' : ''}`} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Варианты карточек товаров */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Варианты состояний карточек</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* Товар в наличии */}
|
||||
<div className="glass-card p-3 hover:bg-white/10 transition-all duration-300 group">
|
||||
<div className="relative mb-3 aspect-video bg-white/5 rounded-lg overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center">
|
||||
<Package className="h-8 w-8 text-white/40" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<h3 className="font-semibold text-white text-sm mb-1">Товар в наличии</h3>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-base font-bold text-purple-300">1 599 ₽</span>
|
||||
<Badge className="bg-green-500/20 text-green-300 text-xs">В наличии</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs text-white/60">
|
||||
<span>Арт: DEMO-001</span>
|
||||
<span className="bg-white/10 px-2 py-1 rounded text-xs">Категория</span>
|
||||
</div>
|
||||
<div className="border-t border-white/10 pt-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<DemoOrganizationAvatar organizationName="Поставщик А" size="sm" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-white text-xs">Поставщик А</p>
|
||||
<p className="text-xs text-white/50">ИНН: 1234567890</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-full h-8 bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0 text-xs">
|
||||
<ShoppingCart className="h-3 w-3 mr-1" />
|
||||
В заявки
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Товар заканчивается */}
|
||||
<div className="glass-card p-3 hover:bg-white/10 transition-all duration-300 group">
|
||||
<div className="relative mb-3 aspect-video bg-white/5 rounded-lg overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-orange-500/20 to-yellow-500/20 flex items-center justify-center">
|
||||
<Package className="h-8 w-8 text-white/40" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<h3 className="font-semibold text-white text-sm mb-1">Товар заканчивается</h3>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-base font-bold text-purple-300">2 299 ₽</span>
|
||||
<Badge className="bg-orange-500/20 text-orange-300 text-xs">Мало</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs text-white/60">
|
||||
<span>Арт: DEMO-002</span>
|
||||
<span className="bg-white/10 px-2 py-1 rounded text-xs">Категория</span>
|
||||
</div>
|
||||
<div className="border-t border-white/10 pt-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<DemoOrganizationAvatar organizationName="Поставщик Б" size="sm" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-white text-xs">Поставщик Б</p>
|
||||
<p className="text-xs text-white/50">ИНН: 0987654321</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-full h-8 bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0 text-xs">
|
||||
<ShoppingCart className="h-3 w-3 mr-1" />
|
||||
В заявки
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Товар недоступен */}
|
||||
<div className="glass-card p-3 hover:bg-white/10 transition-all duration-300 group">
|
||||
<div className="relative mb-3 aspect-video bg-white/5 rounded-lg overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-red-500/20 to-pink-500/20 flex items-center justify-center">
|
||||
<Package className="h-8 w-8 text-white/40" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<h3 className="font-semibold text-white text-sm mb-1">Товар недоступен</h3>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-base font-bold text-purple-300">999 ₽</span>
|
||||
<Badge className="bg-red-500/20 text-red-300 text-xs">Нет в наличии</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs text-white/60">
|
||||
<span>Арт: DEMO-003</span>
|
||||
<span className="bg-white/10 px-2 py-1 rounded text-xs">Категория</span>
|
||||
</div>
|
||||
<div className="border-t border-white/10 pt-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<DemoOrganizationAvatar organizationName="Поставщик В" size="sm" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-white text-xs">Поставщик В</p>
|
||||
<p className="text-xs text-white/50">ИНН: 5678901234</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button disabled className="w-full h-8 bg-gray-500/20 text-gray-400 border-0 text-xs cursor-not-allowed">
|
||||
<ShoppingCart className="h-3 w-3 mr-1" />
|
||||
Недоступно
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Код использования */}
|
||||
<div>
|
||||
<h4 className="text-white/90 text-sm font-medium mb-3">Код использования</h4>
|
||||
<div className="p-4 rounded-lg bg-black/20 border border-white/5">
|
||||
<p className="text-white/60 text-sm mb-2">📝 Пример использования карточки товара:</p>
|
||||
<pre className="text-green-400 text-xs overflow-x-auto whitespace-pre-wrap">
|
||||
{`<ProductCard
|
||||
product={{
|
||||
id: "1",
|
||||
name: "Беспроводные наушники Sony WH-1000XM4",
|
||||
article: "SONY-WH1000XM4",
|
||||
price: 24990,
|
||||
quantity: 15,
|
||||
category: { name: "Электроника" },
|
||||
images: ["/image1.jpg", "/image2.jpg"],
|
||||
organization: {
|
||||
name: "ТехноМаркет",
|
||||
inn: "7708123456789"
|
||||
}
|
||||
}}
|
||||
/>`}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user