65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { ArrowRight, Folder } from 'lucide-react';
|
|
import { catalogService, CategoryResponse } from '@/services/api/catalogService';
|
|
|
|
export function CategoryGrid() {
|
|
const [categories, setCategories] = useState<CategoryResponse[]>([]);
|
|
|
|
useEffect(() => {
|
|
catalogService.getCategories().then((res) => {
|
|
if (Array.isArray(res)) setCategories(res.slice(0, 6));
|
|
});
|
|
}, []);
|
|
|
|
if (categories.length === 0) return null;
|
|
|
|
return (
|
|
<section className="w-full max-w-7xl mx-auto px-4 py-8">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-bold text-gray-900">Shop By Categories</h2>
|
|
<Link
|
|
href="/shop"
|
|
className="text-xs font-semibold text-gray-700 hover:text-[#1877f2] flex items-center gap-1 transition-colors"
|
|
>
|
|
<span>View All</span>
|
|
<ArrowRight className="w-3.5 h-3.5" />
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Category Cards Grid */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
|
|
{categories.map((cat) => (
|
|
<Link
|
|
key={cat.category_id}
|
|
href={`/shop?category=${encodeURIComponent(cat.slug)}`}
|
|
className="group bg-[#f5f6f8] rounded-xl p-4 flex flex-col items-center text-center hover:shadow-md transition-all border border-gray-100"
|
|
>
|
|
<div className="relative w-24 h-24 mb-3 flex items-center justify-center bg-white rounded-lg p-2">
|
|
{cat.image_url ? (
|
|
<Image
|
|
src={cat.image_url}
|
|
alt={cat.name}
|
|
fill
|
|
className="object-contain group-hover:scale-105 transition-transform duration-200"
|
|
/>
|
|
) : (
|
|
<Folder className="w-10 h-10 text-[#1877f2]/60 group-hover:scale-110 transition-transform" />
|
|
)}
|
|
</div>
|
|
<h3 className="text-xs font-bold text-gray-900 group-hover:text-[#1877f2] transition-colors line-clamp-1">
|
|
{cat.name}
|
|
</h3>
|
|
<span className="text-[10px] text-gray-400 font-medium mt-0.5">
|
|
{cat.product_count ? `${cat.product_count} Products` : 'Explore Category'}
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|