117 lines
3.6 KiB
TypeScript
117 lines
3.6 KiB
TypeScript
'use client';
|
||
|
||
import { MapPin } from 'lucide-react';
|
||
import { useEffect, useRef } from 'react';
|
||
|
||
export default function GasStationMap() {
|
||
const mapRef = useRef<HTMLDivElement>(null);
|
||
|
||
useEffect(() => {
|
||
// This is a placeholder for a real map implementation
|
||
// In a real application, you would use a mapping library like Mapbox, Google Maps, or Leaflet
|
||
if (mapRef.current) {
|
||
const canvas = document.createElement('canvas');
|
||
canvas.width = mapRef.current.clientWidth;
|
||
canvas.height = mapRef.current.clientHeight;
|
||
mapRef.current.appendChild(canvas);
|
||
|
||
const ctx = canvas.getContext('2d');
|
||
if (ctx) {
|
||
// Draw a simple map placeholder
|
||
ctx.fillStyle = '#f3f4f6';
|
||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||
|
||
// Draw some roads
|
||
ctx.strokeStyle = '#d1d5db';
|
||
ctx.lineWidth = 5;
|
||
|
||
// Horizontal roads
|
||
for (let i = 1; i < 5; i++) {
|
||
ctx.beginPath();
|
||
ctx.moveTo(0, canvas.height * (i / 5));
|
||
ctx.lineTo(canvas.width, canvas.height * (i / 5));
|
||
ctx.stroke();
|
||
}
|
||
|
||
// Vertical roads
|
||
for (let i = 1; i < 8; i++) {
|
||
ctx.beginPath();
|
||
ctx.moveTo(canvas.width * (i / 8), 0);
|
||
ctx.lineTo(canvas.width * (i / 8), canvas.height);
|
||
ctx.stroke();
|
||
}
|
||
|
||
// Draw gas station markers
|
||
const stations = [
|
||
{ x: 0.2, y: 0.3 },
|
||
{ x: 0.5, y: 0.2 },
|
||
{ x: 0.7, y: 0.4 },
|
||
{ x: 0.3, y: 0.6 },
|
||
{ x: 0.6, y: 0.7 },
|
||
{ x: 0.8, y: 0.8 },
|
||
{ x: 0.1, y: 0.9 },
|
||
];
|
||
|
||
stations.forEach((station) => {
|
||
// Draw marker
|
||
ctx.fillStyle = '#ef4444';
|
||
ctx.beginPath();
|
||
ctx.arc(
|
||
station.x * canvas.width,
|
||
station.y * canvas.height,
|
||
10,
|
||
0,
|
||
2 * Math.PI,
|
||
);
|
||
ctx.fill();
|
||
|
||
// Draw white border
|
||
ctx.strokeStyle = 'white';
|
||
ctx.lineWidth = 2;
|
||
ctx.beginPath();
|
||
ctx.arc(
|
||
station.x * canvas.width,
|
||
station.y * canvas.height,
|
||
10,
|
||
0,
|
||
2 * Math.PI,
|
||
);
|
||
ctx.stroke();
|
||
});
|
||
|
||
// Add city names
|
||
ctx.fillStyle = '#1f2937';
|
||
ctx.font = 'bold 16px Arial';
|
||
ctx.fillText('Душанбе', canvas.width * 0.45, canvas.height * 0.15);
|
||
ctx.fillText('Худжанд', canvas.width * 0.2, canvas.height * 0.25);
|
||
ctx.fillText('Куляб', canvas.width * 0.7, canvas.height * 0.35);
|
||
ctx.fillText('Бохтар', canvas.width * 0.3, canvas.height * 0.55);
|
||
ctx.fillText('Хорог', canvas.width * 0.6, canvas.height * 0.65);
|
||
ctx.fillText('Истаравшан', canvas.width * 0.8, canvas.height * 0.75);
|
||
ctx.fillText('Пенджикент', canvas.width * 0.1, canvas.height * 0.85);
|
||
}
|
||
}
|
||
|
||
return () => {
|
||
if (mapRef.current) {
|
||
while (mapRef.current.firstChild) {
|
||
mapRef.current.removeChild(mapRef.current.firstChild);
|
||
}
|
||
}
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<div className='relative h-full w-full'>
|
||
<div ref={mapRef} className='h-full w-full'></div>
|
||
<div className='absolute right-4 bottom-4 rounded-lg bg-white p-3 shadow-lg'>
|
||
<div className='flex items-center gap-2 text-sm font-medium'>
|
||
<MapPin className='h-5 w-5 text-red-600' />
|
||
<span>Наши заправки</span>
|
||
</div>
|
||
<p className='mt-1 text-xs text-gray-500'>Всего станций: 25</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|