117 lines
5.0 KiB
TypeScript
117 lines
5.0 KiB
TypeScript
import { useState } from 'react';
|
||
import Head from 'next/head';
|
||
import Link from 'next/link';
|
||
import Image from 'next/image';
|
||
import { motion } from 'framer-motion';
|
||
import { Heart } from 'lucide-react';
|
||
import Header from '../../components/Header';
|
||
import Footer from '../../components/Footer';
|
||
import { Product, products } from '../../data/products';
|
||
|
||
export default function NewArrivals() {
|
||
const [hoveredProduct, setHoveredProduct] = useState<number | null>(null);
|
||
const [favorites, setFavorites] = useState<number[]>([]);
|
||
|
||
// Фильтруем только новые товары
|
||
const newProducts = products.filter(product => product.isNew);
|
||
|
||
// Функция для добавления/удаления товара из избранного
|
||
const toggleFavorite = (id: number, e: React.MouseEvent) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setFavorites(prev =>
|
||
prev.includes(id)
|
||
? prev.filter(itemId => itemId !== id)
|
||
: [...prev, id]
|
||
);
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[#E2E2C1] font-['Arimo']">
|
||
<Head>
|
||
<title>Новинки | Brand Store</title>
|
||
<link rel="icon" href="/favicon.ico" />
|
||
<link href="https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
</Head>
|
||
|
||
<Header />
|
||
|
||
<main className="pt-24 pb-16 px-4 md:px-8">
|
||
<div className="container mx-auto">
|
||
<motion.h1
|
||
initial={{ opacity: 0, y: -20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
className="text-3xl md:text-4xl font-bold mb-8 text-[#2B5F47] text-center"
|
||
>
|
||
Новые поступления
|
||
</motion.h1>
|
||
|
||
{newProducts.length > 0 ? (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.5, delay: 0.2 }}
|
||
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
|
||
>
|
||
{newProducts.map((product, index) => (
|
||
<motion.div
|
||
key={product.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: 0.1 * index }}
|
||
className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow"
|
||
onMouseEnter={() => setHoveredProduct(product.id)}
|
||
onMouseLeave={() => setHoveredProduct(null)}
|
||
>
|
||
<Link href={`/product/${product.slug}`}>
|
||
<div className="relative h-64 w-full overflow-hidden">
|
||
<Image
|
||
src={hoveredProduct === product.id && product.images.length > 1
|
||
? product.images[1]
|
||
: product.images[0]}
|
||
alt={product.name}
|
||
fill
|
||
className="object-cover transition-transform duration-500 ease-in-out"
|
||
/>
|
||
<div className="absolute top-3 left-3 bg-[#63823B] text-white text-xs py-1 px-3 rounded-md">
|
||
Новинка
|
||
</div>
|
||
<button
|
||
onClick={(e) => toggleFavorite(product.id, e)}
|
||
className="absolute top-3 right-3 p-2 rounded-full bg-white/80 hover:bg-white transition-colors z-10"
|
||
>
|
||
<Heart
|
||
className={`w-5 h-5 ${favorites.includes(product.id) ? 'fill-[#63823B] text-[#63823B]' : 'text-gray-600'}`}
|
||
/>
|
||
</button>
|
||
</div>
|
||
<div className="p-4">
|
||
<h3 className="text-lg font-medium text-[#2B5F47] mb-1">{product.name}</h3>
|
||
<p className="text-sm text-gray-600 mb-2 line-clamp-2">{product.description}</p>
|
||
<div className="flex justify-between items-center">
|
||
<span className="font-bold text-[#2B5F47]">{product.price} ₽</span>
|
||
<span className="text-sm text-[#63823B]">
|
||
{product.inStock ? 'В наличии' : 'Нет в наличии'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
) : (
|
||
<div className="text-center py-12">
|
||
<p className="text-xl text-[#2B5F47] mb-4">Новинок пока нет</p>
|
||
<Link href="/" className="inline-block px-6 py-3 bg-[#63823B] text-white rounded-md hover:bg-[#2B5F47] transition-colors">
|
||
Вернуться на главную
|
||
</Link>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</main>
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|