44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
/**
|
|
* @component BrandsCarousel
|
|
* @purpose Brand showcase list loaded from `catalogService.getBrands()` filtering products by brand.
|
|
* @dependencies catalogService
|
|
*/
|
|
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { catalogService, BrandResponse } from '@/services/api/catalogService';
|
|
|
|
export function BrandsCarousel() {
|
|
const [brands, setBrands] = useState<BrandResponse[]>([]);
|
|
|
|
useEffect(() => {
|
|
catalogService.getBrands().then(setBrands);
|
|
}, []);
|
|
|
|
return (
|
|
<section className="w-full max-w-7xl mx-auto px-4 py-8">
|
|
<div className="text-center mb-6">
|
|
<span className="text-[10px] font-bold text-[#e4382f] uppercase tracking-wider">
|
|
Authorized Partners
|
|
</span>
|
|
<h2 className="text-xl font-extrabold text-[#1b2559]">Official Tech Brands</h2>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
|
|
{brands.map((brand) => (
|
|
<Link
|
|
key={brand.brand_id}
|
|
href={`/products?brand=${brand.slug}`}
|
|
className="group bg-white border border-gray-200 rounded-xl p-4 flex items-center justify-center shadow-xs hover:border-[#e4382f] hover:shadow-md transition-all h-20"
|
|
>
|
|
<span className="text-sm font-extrabold text-gray-700 group-hover:text-[#e4382f] transition-colors tracking-wide">
|
|
{brand.name}
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|