117 lines
4.1 KiB
TypeScript
117 lines
4.1 KiB
TypeScript
import React, { useState, useMemo } from "react";
|
||
import { useRouter } from "next/router";
|
||
import { useQuery } from "@apollo/client";
|
||
import Head from "next/head";
|
||
import Header from "@/components/Header";
|
||
import Footer from "@/components/Footer";
|
||
import MobileMenuBottomSection from "@/components/MobileMenuBottomSection";
|
||
import { GET_LAXIMO_BRANDS } from "@/lib/graphql";
|
||
import { LaximoBrand } from "@/types/laximo";
|
||
import BrandWizardSearchSection from "@/components/BrandWizardSearchSection";
|
||
import MetaTags from "@/components/MetaTags";
|
||
import { getMetaByPath } from "@/lib/meta-config";
|
||
|
||
const InfoBrands = () => (
|
||
<section className="section-info">
|
||
<div className="w-layout-blockcontainer container info w-container">
|
||
<div className="w-layout-vflex flex-block-9">
|
||
<div className="w-layout-hflex flex-block-7">
|
||
<a href="/" className="link-block w-inline-block">
|
||
<div>Главная</div>
|
||
</a>
|
||
<div className="text-block-3">→</div>
|
||
<a href="#" className="link-block-2 w-inline-block">
|
||
<div>Все марки</div>
|
||
</a>
|
||
</div>
|
||
<div className="w-layout-hflex flex-block-8">
|
||
<div className="w-layout-hflex flex-block-10">
|
||
<h1 className="heading">Все марки автомобилей</h1>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
|
||
const BrandsPage = () => {
|
||
const router = useRouter();
|
||
const [selectedLetter, setSelectedLetter] = useState<string>('');
|
||
const { data, loading, error } = useQuery<{ laximoBrands: LaximoBrand[] }>(GET_LAXIMO_BRANDS, { errorPolicy: 'all' });
|
||
|
||
const staticBrands = [
|
||
{ name: "Audi", code: "audi" },
|
||
{ name: "BMW", code: "bmw" },
|
||
{ name: "Cadillac", code: "cadillac" },
|
||
{ name: "Chevrolet", code: "chevrolet" },
|
||
{ name: "Citroen", code: "citroen" },
|
||
{ name: "Fiat", code: "fiat" },
|
||
{ name: "Mazda", code: "mazda" },
|
||
{ name: "Mercedes-Benz", code: "mercedes" },
|
||
{ name: "Nissan", code: "nissan" },
|
||
{ name: "Opel", code: "opel" },
|
||
{ name: "Peugeot", code: "peugeot" },
|
||
{ name: "Renault", code: "renault" },
|
||
{ name: "Toyota", code: "toyota" },
|
||
{ name: "Volkswagen", code: "volkswagen" },
|
||
{ name: "Volvo", code: "volvo" }
|
||
];
|
||
|
||
let brands = staticBrands;
|
||
if (data?.laximoBrands && data.laximoBrands.length > 0) {
|
||
brands = data.laximoBrands.map(brand => ({ name: brand.name, code: brand.code }));
|
||
} else if (error) {
|
||
console.warn('Laximo API недоступен, используются статические данные:', error.message);
|
||
}
|
||
|
||
const brandsByLetter = useMemo(() => {
|
||
const grouped: { [key: string]: typeof brands } = {};
|
||
brands.forEach(brand => {
|
||
const firstLetter = brand.name.charAt(0).toUpperCase();
|
||
if (!grouped[firstLetter]) grouped[firstLetter] = [];
|
||
grouped[firstLetter].push(brand);
|
||
});
|
||
Object.keys(grouped).forEach(letter => {
|
||
grouped[letter].sort((a, b) => a.name.localeCompare(b.name));
|
||
});
|
||
return grouped;
|
||
}, [brands]);
|
||
|
||
const letters = Object.keys(brandsByLetter).sort();
|
||
|
||
const handleBrandClick = (brand: { name: string; code?: string }) => {
|
||
if (brand.code) router.push(`/brands?selected=${brand.code}`);
|
||
};
|
||
|
||
const handleLetterClick = (letter: string) => {
|
||
setSelectedLetter(selectedLetter === letter ? '' : letter);
|
||
};
|
||
|
||
const metaData = getMetaByPath('/brands');
|
||
|
||
return (
|
||
<>
|
||
<MetaTags {...metaData} />
|
||
<InfoBrands />
|
||
<BrandWizardSearchSection />
|
||
<Footer />
|
||
<MobileMenuBottomSection />
|
||
</>
|
||
);
|
||
};
|
||
|
||
const BrandGrid = ({ brands, onBrandClick }: { brands: { name: string; code?: string }[]; onBrandClick: (brand: { name: string; code?: string }) => void }) => (
|
||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
|
||
{brands.map((brand, idx) => (
|
||
<button
|
||
key={idx}
|
||
onClick={() => onBrandClick(brand)}
|
||
className="bg-[#F5F8FB] hover:bg-white border border-gray-200 hover:border-[#EC1C24] rounded-xl p-4 text-left font-medium text-[#000814] shadow-sm transition-all duration-200"
|
||
>
|
||
{brand.name}
|
||
</button>
|
||
))}
|
||
</div>
|
||
);
|
||
|
||
export default BrandsPage;
|