201 lines
9.2 KiB
TypeScript
201 lines
9.2 KiB
TypeScript
import React, { useState } from 'react';
|
||
import PageHeader from '../components/PageHeader';
|
||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||
|
||
const FleetPage: React.FC = () => {
|
||
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
||
|
||
// Список всех фотографий из папки cars
|
||
const carImages = [
|
||
'/media/cars/33725959_1920_q70.webp',
|
||
'/media/cars/33725960_1920_q70.webp',
|
||
'/media/cars/33725961_1920_q70.webp',
|
||
'/media/cars/33725962_1920_q70.webp',
|
||
'/media/cars/33725963_1920_q70.webp',
|
||
'/media/cars/33725964_1920_q70.webp',
|
||
'/media/cars/33725965_1920_q70.webp',
|
||
'/media/cars/33725966_1920_q70.webp',
|
||
'/media/cars/33725967_1920_q70.webp',
|
||
'/media/cars/33725968_1920_q70.webp',
|
||
'/media/cars/33725969_1920_q70.webp',
|
||
'/media/cars/33725970_1920_q70.webp',
|
||
'/media/cars/33725971_1920_q70.webp',
|
||
'/media/cars/33725972_1920_q70.webp',
|
||
'/media/cars/33725973_1920_q70.webp',
|
||
'/media/cars/33725974_1920_q70.webp',
|
||
'/media/cars/33725975_1920_q70.webp',
|
||
'/media/cars/33725976_1920_q70.webp',
|
||
'/media/cars/33725977_1920_q70.webp',
|
||
'/media/cars/33725978_1920_q70.webp',
|
||
'/media/cars/33725979_1920_q70.webp',
|
||
'/media/cars/33725980_1920_q70.webp',
|
||
'/media/cars/33725981_1920_q70.webp',
|
||
'/media/cars/33725982_1920_q70.webp',
|
||
'/media/cars/33725983_1920_q70.webp',
|
||
'/media/cars/33725984_1920_q70.webp',
|
||
'/media/cars/33725985_1920_q70.webp',
|
||
'/media/cars/33725986_1920_q70.webp',
|
||
];
|
||
|
||
// Список транспортных средств
|
||
const vehicles = [
|
||
{ type: 'Установка разведочного бурения', brand: 'КАМАЗ 5350-42 УРБ-2А-2' },
|
||
{ type: 'Установка разведочного бурения', brand: 'КАМАЗ 43118 013-10 УРБ-2А-2' },
|
||
{ type: 'Установка разведочного бурения', brand: 'КАМАЗ 5350-42 УРБ-2А-2' },
|
||
{ type: 'Специальное пассажирское ТС', brand: 'УАЗ-29892' },
|
||
{ type: 'Грузовой бортовой', brand: 'ГАЗ 33081' },
|
||
{ type: 'УБШМ 1.20', brand: 'ГАЗ 33081' },
|
||
{ type: 'УБШМ 1.20', brand: 'ГАЗ 33081' },
|
||
{ type: 'Специальное пассажирское ТС', brand: 'УАЗ-220695-04' },
|
||
{ type: 'Грузовое ТС, Фермер грузопассажирский УБШМ 1-13', brand: 'УАЗ-390945' },
|
||
{ type: 'Грузовой фургон', brand: 'УАЗ-390995-04' },
|
||
{ type: 'Установка разведочного бурения УРБ-2Д3', brand: 'МТЛБу (Снегоболотоход гусеничный ТГМ 21-04)' },
|
||
{ type: 'Седельный тягач', brand: 'УРАЛ 44202-0311-41' },
|
||
{ type: 'Полуприцеп низкорамный трал', brand: '993920' },
|
||
{ type: 'Снегоход', brand: 'YAMAHA VK540E' },
|
||
{ type: 'Прицеп для перевозки водной техники, грузов', brand: 'МЗСА, 81771С' },
|
||
{ type: 'Специальная установка каротажной станции СК 1-74-II', brand: 'ЗИЛ-131' },
|
||
{ type: 'Фермер грузопассажирский УБШМ 1-13', brand: 'УАЗ 390945' },
|
||
{ type: 'Болотовездеход', brand: 'Caiman' },
|
||
];
|
||
|
||
const nextImage = () => {
|
||
setCurrentImageIndex((prev) => (prev + 1) % carImages.length);
|
||
};
|
||
|
||
const prevImage = () => {
|
||
setCurrentImageIndex((prev) => (prev - 1 + carImages.length) % carImages.length);
|
||
};
|
||
|
||
return (
|
||
<div className="bg-white pb-20">
|
||
<PageHeader
|
||
title="Автопарк"
|
||
description="Современная техника для выполнения работ любой сложности"
|
||
image="/media/images/headers/header-fleet.png"
|
||
/>
|
||
|
||
<div className="container mx-auto px-6 py-20">
|
||
{/* Карусель фотографий */}
|
||
<div className="mb-20">
|
||
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||
Галерея техники
|
||
</h2>
|
||
|
||
<div className="relative max-w-5xl mx-auto">
|
||
{/* Главное изображение */}
|
||
<div className="relative aspect-[16/9] rounded-2xl overflow-hidden bg-gray-100">
|
||
<img
|
||
src={carImages[currentImageIndex]}
|
||
alt={`Транспортное средство ${currentImageIndex + 1}`}
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
|
||
{/* Кнопки навигации */}
|
||
<button
|
||
onClick={prevImage}
|
||
className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/90 hover:bg-white p-3 rounded-full shadow-lg transition-all duration-300 group"
|
||
aria-label="Предыдущее фото"
|
||
>
|
||
<ChevronLeft size={24} className="text-brand-orange" />
|
||
</button>
|
||
|
||
<button
|
||
onClick={nextImage}
|
||
className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/90 hover:bg-white p-3 rounded-full shadow-lg transition-all duration-300 group"
|
||
aria-label="Следующее фото"
|
||
>
|
||
<ChevronRight size={24} className="text-brand-orange" />
|
||
</button>
|
||
|
||
{/* Индикатор */}
|
||
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-black/50 text-white px-4 py-2 rounded-full text-sm">
|
||
{currentImageIndex + 1} / {carImages.length}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Миниатюры */}
|
||
<div className="mt-6 flex gap-3 overflow-x-auto pb-4">
|
||
{carImages.map((image, index) => (
|
||
<button
|
||
key={index}
|
||
onClick={() => setCurrentImageIndex(index)}
|
||
className={`flex-shrink-0 w-24 h-16 rounded-lg overflow-hidden transition-all duration-300 ${
|
||
index === currentImageIndex
|
||
? 'ring-4 ring-brand-orange scale-105'
|
||
: 'opacity-60 hover:opacity-100'
|
||
}`}
|
||
>
|
||
<img
|
||
src={image}
|
||
alt={`Миниатюра ${index + 1}`}
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Список транспортных средств */}
|
||
<div className="max-w-6xl mx-auto">
|
||
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||
Список транспортных средств ООО «ГЕОВЕКТОР»
|
||
</h2>
|
||
|
||
<div className="overflow-x-auto shadow-lg rounded-2xl">
|
||
<table className="w-full bg-white">
|
||
<thead>
|
||
<tr className="bg-brand-orange text-white">
|
||
<th className="px-6 py-4 text-left font-bold w-20">№</th>
|
||
<th className="px-6 py-4 text-left font-bold">Тип авто</th>
|
||
<th className="px-6 py-4 text-left font-bold">Марка машины</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{vehicles.map((vehicle, index) => (
|
||
<tr
|
||
key={index}
|
||
className={`border-b border-gray-200 hover:bg-gray-50 transition-colors ${
|
||
index % 2 === 0 ? 'bg-white' : 'bg-gray-50'
|
||
}`}
|
||
>
|
||
<td className="px-6 py-4 font-semibold text-brand-orange text-center">
|
||
{index + 1}
|
||
</td>
|
||
<td className="px-6 py-4 text-gray-700">
|
||
{vehicle.type || ''}
|
||
</td>
|
||
<td className="px-6 py-4 font-semibold text-gray-900">
|
||
{vehicle.brand}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{/* Статистика */}
|
||
<div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div className="bg-brand-orange text-white rounded-2xl p-6 text-center">
|
||
<div className="text-4xl font-bold mb-2">{vehicles.length}</div>
|
||
<div className="text-lg">Единиц техники</div>
|
||
</div>
|
||
<div className="bg-gray-900 text-white rounded-2xl p-6 text-center">
|
||
<div className="text-4xl font-bold mb-2">{carImages.length}</div>
|
||
<div className="text-lg">Фотографий</div>
|
||
</div>
|
||
<div className="bg-brand-orange text-white rounded-2xl p-6 text-center">
|
||
<div className="text-4xl font-bold mb-2">24/7</div>
|
||
<div className="text-lg">Готовность к работе</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default FleetPage;
|
||
|