72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
import React from "react";
|
||
import { useQuery } from '@apollo/client';
|
||
import { GET_PARTSINDEX_CATEGORIES } from '@/lib/graphql';
|
||
import { useRouter } from 'next/router';
|
||
|
||
interface CategoryNavItem {
|
||
id: string;
|
||
name: string;
|
||
image?: string;
|
||
}
|
||
|
||
const FALLBACK_CATEGORIES: CategoryNavItem[] = [
|
||
{ id: '1', name: 'Детали для ТО', image: '/images/catalog_item.png' },
|
||
{ id: '2', name: 'Шины', image: '/images/catalog_item2.png' },
|
||
{ id: '3', name: 'Диски', image: '/images/catalog_item3.png' },
|
||
{ id: '4', name: 'Масла и жидкости', image: '/images/catalog_item4.png' },
|
||
{ id: '5', name: 'Инструменты', image: '/images/catalog_item5.png' },
|
||
{ id: '6', name: 'Автохимия', image: '/images/catalog_item6.png' },
|
||
{ id: '7', name: 'Аксессуары', image: '/images/catalog_item7.png' },
|
||
{ id: '8', name: 'Электрика', image: '/images/catalog_item8.png' },
|
||
{ id: '9', name: 'АКБ', image: '/images/catalog_item9.png' },
|
||
];
|
||
|
||
const CategoryNavSection: React.FC = () => {
|
||
const router = useRouter();
|
||
|
||
const { data } = useQuery<{ partsIndexCategoriesWithGroups: CategoryNavItem[] }>(
|
||
GET_PARTSINDEX_CATEGORIES,
|
||
{
|
||
variables: { lang: 'ru' },
|
||
errorPolicy: 'all',
|
||
fetchPolicy: 'cache-first',
|
||
}
|
||
);
|
||
|
||
const categories = (data?.partsIndexCategoriesWithGroups && data.partsIndexCategoriesWithGroups.length > 0)
|
||
? data.partsIndexCategoriesWithGroups.slice(0, 9)
|
||
: FALLBACK_CATEGORIES;
|
||
|
||
const handleCategoryClick = (category: CategoryNavItem) => {
|
||
router.push({
|
||
pathname: '/catalog',
|
||
query: {
|
||
categoryId: category.id,
|
||
categoryName: encodeURIComponent(category.name)
|
||
}
|
||
});
|
||
};
|
||
|
||
return (
|
||
<section className="catnav">
|
||
<div className="w-layout-blockcontainer batd w-container">
|
||
<div className="w-layout-hflex flex-block-108-copy">
|
||
{categories.map((category, idx) => (
|
||
<div
|
||
key={category.id}
|
||
className={`ci${idx + 1}`}
|
||
style={category.image ? { cursor: 'pointer', backgroundImage: `url('${category.image}')`, backgroundSize: 'cover', backgroundPosition: 'center' } : { cursor: 'pointer' }}
|
||
onClick={() => handleCategoryClick(category)}
|
||
>
|
||
<div className={idx === 0 ? 'text-block-54-copy' : 'text-block-54'} style={{ textAlign: 'center' }}>
|
||
{category.name}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default CategoryNavSection;
|