151 lines
5.5 KiB
TypeScript
151 lines
5.5 KiB
TypeScript
import React, { useState } 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 VehicleSearchSection from '../../components/VehicleSearchSection';
|
||
import { GET_LAXIMO_CATALOG_INFO } from '@/lib/graphql';
|
||
import { LaximoCatalogInfo } from '@/types/laximo';
|
||
import MetaTags from '@/components/MetaTags';
|
||
import { getMetaByPath } from '@/lib/meta-config';
|
||
|
||
const VehicleSearchPage = () => {
|
||
const router = useRouter();
|
||
const { brand } = router.query;
|
||
const [searchType, setSearchType] = useState<'vin' | 'wizard' | 'parts' | 'plate'>('vin');
|
||
|
||
// Получаем информацию о каталоге
|
||
const { data: catalogData, loading: catalogLoading } = useQuery<{ laximoCatalogInfo: LaximoCatalogInfo }>(
|
||
GET_LAXIMO_CATALOG_INFO,
|
||
{
|
||
variables: { catalogCode: brand },
|
||
skip: !brand,
|
||
errorPolicy: 'all'
|
||
}
|
||
);
|
||
|
||
|
||
|
||
if (catalogLoading) {
|
||
return (
|
||
<>
|
||
<Head>
|
||
<title>Поиск автомобиля - {brand}</title>
|
||
</Head>
|
||
<Header />
|
||
<main className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||
<div className="text-center">
|
||
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-red-600 mx-auto"></div>
|
||
<p className="mt-4 text-lg text-gray-600">Загружаем информацию о каталоге...</p>
|
||
</div>
|
||
</main>
|
||
<Footer />
|
||
</>
|
||
);
|
||
}
|
||
|
||
if (!catalogData?.laximoCatalogInfo) {
|
||
return (
|
||
<>
|
||
<Head>
|
||
<title>Каталог не найден - {brand}</title>
|
||
</Head>
|
||
<Header />
|
||
<main className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||
<div className="text-center">
|
||
<h1 className="text-2xl font-bold text-gray-900 mb-4">Каталог не найден</h1>
|
||
<p className="text-gray-600 mb-8">Каталог "{brand}" не существует или временно недоступен</p>
|
||
<button
|
||
onClick={() => router.push('/')}
|
||
className="bg-red-600 text-white px-6 py-3 rounded-lg hover:bg-red-700 transition-colors"
|
||
>
|
||
Вернуться на главную
|
||
</button>
|
||
</div>
|
||
</main>
|
||
<Footer />
|
||
</>
|
||
);
|
||
}
|
||
|
||
const catalogInfo = catalogData.laximoCatalogInfo;
|
||
|
||
const metaData = getMetaByPath('/vehicle-search');
|
||
|
||
return (
|
||
<>
|
||
<MetaTags {...metaData} />
|
||
<Header />
|
||
|
||
<main className="min-h-screen bg-gray-50">
|
||
{/* Навигация */}
|
||
<nav className="bg-white border-b">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="flex items-center justify-between h-16">
|
||
<div className="flex items-center space-x-4">
|
||
<button
|
||
onClick={() => router.back()}
|
||
className="text-gray-500 hover:text-gray-700 flex items-center space-x-2"
|
||
>
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||
</svg>
|
||
<span>Назад</span>
|
||
</button>
|
||
<div className="text-sm text-gray-500">
|
||
<span>Главная</span>
|
||
<span className="mx-2">/</span>
|
||
<span>Каталог</span>
|
||
<span className="mx-2">/</span>
|
||
<span className="text-gray-900 font-medium">{catalogInfo.name}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* Заголовок */}
|
||
<div className="bg-white">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||
<div className="flex items-center space-x-4">
|
||
{catalogInfo.icon && (
|
||
<img
|
||
src={`/images/brands/${catalogInfo.icon}`}
|
||
alt={catalogInfo.name}
|
||
className="w-16 h-16 object-contain"
|
||
onError={(e) => {
|
||
e.currentTarget.style.display = 'none';
|
||
}}
|
||
/>
|
||
)}
|
||
<div>
|
||
<h1 className="text-3xl font-bold text-gray-900">{catalogInfo.name}</h1>
|
||
<p className="text-lg text-gray-600 mt-2">
|
||
Поиск автомобиля для начала подбора запчастей
|
||
</p>
|
||
<p className="text-sm text-gray-500 mt-1">
|
||
Поиск автомобиля может осуществляться по различным уникальным идентификаторам,
|
||
таким как VIN/Frame, специальным параметрам производителя или по артикулу оригинальной детали.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Основное содержимое */}
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||
<VehicleSearchSection
|
||
catalogInfo={catalogInfo}
|
||
searchType={searchType}
|
||
onSearchTypeChange={setSearchType}
|
||
/>
|
||
</div>
|
||
</main>
|
||
|
||
<Footer />
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default VehicleSearchPage;
|