49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { MapPin } from 'lucide-react';
|
|
|
|
import { Stations } from '@/app/api-utlities/@types';
|
|
|
|
import { Point } from '@/features/map/model';
|
|
import { YandexMap } from '@/features/map/ui/yandex-map';
|
|
|
|
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
|
|
|
interface MapSectionProps {
|
|
stations: Stations;
|
|
}
|
|
|
|
export const MapSection = ({ stations }: MapSectionProps) => {
|
|
const { t } = useTextController();
|
|
|
|
const points = stations.map((st) => ({
|
|
id: st.id,
|
|
coordinates: [st.latitude, st.longitude],
|
|
})) as Point[];
|
|
|
|
return (
|
|
<section id='stations' className='bg-gray-50 px-2 py-8 sm:py-16'>
|
|
<div className='container mx-auto'>
|
|
<YandexMap points={points} />
|
|
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
|
<MapPin className='h-6 w-6 text-red-600' />
|
|
</div>
|
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
{t('home.stations.title')}
|
|
</h2>
|
|
<p className='max-w-2xl text-gray-600'>
|
|
{t('home.stations.description')}
|
|
</p>
|
|
</div>
|
|
<div
|
|
className='h-[500px] overflow-hidden rounded-xl border shadow-lg'
|
|
data-aos='fade-up'
|
|
>
|
|
{/* <GasStationMap stations={stations} /> */}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|