update: update map section
This commit is contained in:
BunyodL
parent
50e777b2a4
commit
8c2ad18450
@ -1,10 +1,231 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { MapPin } from 'lucide-react';
|
import {
|
||||||
import { useEffect, useRef } from 'react';
|
Check,
|
||||||
|
ChevronLeft,
|
||||||
|
ChevronRight,
|
||||||
|
Filter,
|
||||||
|
List,
|
||||||
|
MapPin,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
|
||||||
|
import { useLanguage } from '@/shared/language';
|
||||||
|
import { Badge } from '@/shared/shadcn-ui/badge';
|
||||||
|
import { Button } from '@/shared/shadcn-ui/button';
|
||||||
|
import {
|
||||||
|
Tabs,
|
||||||
|
TabsContent,
|
||||||
|
TabsList,
|
||||||
|
TabsTrigger,
|
||||||
|
} from '@/shared/shadcn-ui/tabs';
|
||||||
|
|
||||||
|
// Sample data for gas stations
|
||||||
|
const stations = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'АЗС Душанбе-Центр',
|
||||||
|
address: 'ул. Рудаки 150, Душанбе',
|
||||||
|
city: 'Душанбе',
|
||||||
|
coordinates: { x: 0.2, y: 0.3 },
|
||||||
|
services: ['ДТ', 'АИ-92', 'АИ-95', 'Z-100 Power', 'Минимаркет', 'Туалет'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'АЗС Худжанд',
|
||||||
|
address: 'ул. Ленина 45, Худжанд',
|
||||||
|
city: 'Худжанд',
|
||||||
|
coordinates: { x: 0.5, y: 0.2 },
|
||||||
|
services: [
|
||||||
|
'ДТ',
|
||||||
|
'АИ-92',
|
||||||
|
'АИ-95',
|
||||||
|
'Пропан',
|
||||||
|
'Минимаркет',
|
||||||
|
'Автомойка',
|
||||||
|
'Туалет',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: 'АЗС Куляб',
|
||||||
|
address: 'ул. Сомони 78, Куляб',
|
||||||
|
city: 'Куляб',
|
||||||
|
coordinates: { x: 0.7, y: 0.4 },
|
||||||
|
services: ['ДТ', 'АИ-92', 'Пропан', 'Туалет'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: 'АЗС Бохтар',
|
||||||
|
address: 'ул. Айни 23, Бохтар',
|
||||||
|
city: 'Бохтар',
|
||||||
|
coordinates: { x: 0.3, y: 0.6 },
|
||||||
|
services: [
|
||||||
|
'ДТ',
|
||||||
|
'АИ-92',
|
||||||
|
'АИ-95',
|
||||||
|
'Z-100 Power',
|
||||||
|
'Минимаркет',
|
||||||
|
'Зарядная станция',
|
||||||
|
'Туалет',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: 'АЗС Хорог',
|
||||||
|
address: 'ул. Горная 12, Хорог',
|
||||||
|
city: 'Хорог',
|
||||||
|
coordinates: { x: 0.6, y: 0.7 },
|
||||||
|
services: ['ДТ', 'АИ-92', 'Автомойка', 'Туалет'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: 'АЗС Истаравшан',
|
||||||
|
address: 'ул. Исмоили Сомони 34, Истаравшан',
|
||||||
|
city: 'Истаравшан',
|
||||||
|
coordinates: { x: 0.8, y: 0.8 },
|
||||||
|
services: ['ДТ', 'АИ-92', 'АИ-95', 'Минимаркет', 'Туалет'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
name: 'АЗС Пенджикент',
|
||||||
|
address: 'ул. Рудаки 56, Пенджикент',
|
||||||
|
city: 'Пенджикент',
|
||||||
|
coordinates: { x: 0.1, y: 0.9 },
|
||||||
|
services: ['ДТ', 'АИ-92', 'АИ-95', 'Пропан', 'Минимаркет', 'Туалет'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
name: 'АЗС Душанбе-Запад',
|
||||||
|
address: 'ул. Джами 23, Душанбе',
|
||||||
|
city: 'Душанбе',
|
||||||
|
coordinates: { x: 0.25, y: 0.35 },
|
||||||
|
services: [
|
||||||
|
'ДТ',
|
||||||
|
'АИ-92',
|
||||||
|
'АИ-95',
|
||||||
|
'Z-100 Power',
|
||||||
|
'Пропан',
|
||||||
|
'Минимаркет',
|
||||||
|
'Автомойка',
|
||||||
|
'Туалет',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
name: 'АЗС Душанбе-Восток',
|
||||||
|
address: 'ул. Айни 78, Душанбе',
|
||||||
|
city: 'Душанбе',
|
||||||
|
coordinates: { x: 0.15, y: 0.25 },
|
||||||
|
services: [
|
||||||
|
'ДТ',
|
||||||
|
'АИ-92',
|
||||||
|
'АИ-95',
|
||||||
|
'Зарядная станция',
|
||||||
|
'Минимаркет',
|
||||||
|
'Туалет',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
name: 'АЗС Гиссар',
|
||||||
|
address: 'ул. Центральная 12, Гиссар',
|
||||||
|
city: 'Гиссар',
|
||||||
|
coordinates: { x: 0.4, y: 0.4 },
|
||||||
|
services: ['ДТ', 'АИ-92', 'Пропан', 'Туалет'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
name: 'АЗС Вахдат',
|
||||||
|
address: 'ул. Сомони 45, Вахдат',
|
||||||
|
city: 'Вахдат',
|
||||||
|
coordinates: { x: 0.55, y: 0.45 },
|
||||||
|
services: ['ДТ', 'АИ-92', 'АИ-95', 'Минимаркет', 'Туалет'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
name: 'АЗС Турсунзаде',
|
||||||
|
address: 'ул. Ленина 34, Турсунзаде',
|
||||||
|
city: 'Турсунзаде',
|
||||||
|
coordinates: { x: 0.65, y: 0.55 },
|
||||||
|
services: ['ДТ', 'АИ-92', 'АИ-95', 'Z-100 Power', 'Автомойка', 'Туалет'],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// All available filters
|
||||||
|
const allFilters = [
|
||||||
|
'ДТ',
|
||||||
|
'АИ-92',
|
||||||
|
'АИ-95',
|
||||||
|
'Z-100 Power',
|
||||||
|
'Пропан',
|
||||||
|
'Зарядная станция',
|
||||||
|
'Минимаркет',
|
||||||
|
'Автомойка',
|
||||||
|
'Туалет',
|
||||||
|
];
|
||||||
|
|
||||||
|
// Extract unique cities from stations
|
||||||
|
const allCities = [...new Set(stations.map((station) => station.city))].sort();
|
||||||
|
|
||||||
export default function GasStationMap() {
|
export default function GasStationMap() {
|
||||||
|
const { t } = useLanguage();
|
||||||
const mapRef = useRef<HTMLDivElement>(null);
|
const mapRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [activeFilters, setActiveFilters] = useState<string[]>([]);
|
||||||
|
const [activeCities, setActiveCities] = useState<string[]>([]);
|
||||||
|
const [filteredStations, setFilteredStations] = useState(stations);
|
||||||
|
const [selectedStation, setSelectedStation] = useState<number | null>(null);
|
||||||
|
const [isFilterOpen, setIsFilterOpen] = useState(false);
|
||||||
|
const [isStationListOpen, setIsStationListOpen] = useState(false);
|
||||||
|
const [activeFilterTab, setActiveFilterTab] = useState('cities');
|
||||||
|
|
||||||
|
// Toggle service filter
|
||||||
|
const toggleFilter = (filter: string) => {
|
||||||
|
if (activeFilters.includes(filter)) {
|
||||||
|
setActiveFilters(activeFilters.filter((f) => f !== filter));
|
||||||
|
} else {
|
||||||
|
setActiveFilters([...activeFilters, filter]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Toggle city filter
|
||||||
|
const toggleCity = (city: string) => {
|
||||||
|
if (activeCities.includes(city)) {
|
||||||
|
setActiveCities(activeCities.filter((c) => c !== city));
|
||||||
|
} else {
|
||||||
|
setActiveCities([...activeCities, city]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Select all cities
|
||||||
|
const selectAllCities = () => {
|
||||||
|
if (activeCities.length === allCities.length) {
|
||||||
|
setActiveCities([]);
|
||||||
|
} else {
|
||||||
|
setActiveCities([...allCities]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Filter stations based on active filters and cities
|
||||||
|
useEffect(() => {
|
||||||
|
let filtered = stations;
|
||||||
|
|
||||||
|
// Filter by services
|
||||||
|
if (activeFilters.length > 0) {
|
||||||
|
filtered = filtered.filter((station) =>
|
||||||
|
activeFilters.every((filter) => station.services.includes(filter)),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter by cities
|
||||||
|
if (activeCities.length > 0) {
|
||||||
|
filtered = filtered.filter((station) =>
|
||||||
|
activeCities.includes(station.city),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
setFilteredStations(filtered);
|
||||||
|
}, [activeFilters, activeCities]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// This is a placeholder for a real map implementation
|
// This is a placeholder for a real map implementation
|
||||||
@ -42,24 +263,15 @@ export default function GasStationMap() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Draw gas station markers
|
// Draw gas station markers
|
||||||
const stations = [
|
filteredStations.forEach((station) => {
|
||||||
{ x: 0.2, y: 0.3 },
|
const isSelected = selectedStation === station.id;
|
||||||
{ 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
|
// Draw marker
|
||||||
ctx.fillStyle = '#ef4444';
|
ctx.fillStyle = isSelected ? '#3b82f6' : '#ef4444';
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.arc(
|
ctx.arc(
|
||||||
station.x * canvas.width,
|
station.coordinates.x * canvas.width,
|
||||||
station.y * canvas.height,
|
station.coordinates.y * canvas.height,
|
||||||
10,
|
isSelected ? 12 : 10,
|
||||||
0,
|
0,
|
||||||
2 * Math.PI,
|
2 * Math.PI,
|
||||||
);
|
);
|
||||||
@ -70,9 +282,9 @@ export default function GasStationMap() {
|
|||||||
ctx.lineWidth = 2;
|
ctx.lineWidth = 2;
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.arc(
|
ctx.arc(
|
||||||
station.x * canvas.width,
|
station.coordinates.x * canvas.width,
|
||||||
station.y * canvas.height,
|
station.coordinates.y * canvas.height,
|
||||||
10,
|
isSelected ? 12 : 10,
|
||||||
0,
|
0,
|
||||||
2 * Math.PI,
|
2 * Math.PI,
|
||||||
);
|
);
|
||||||
@ -99,17 +311,257 @@ export default function GasStationMap() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}, []);
|
}, [filteredStations, selectedStation]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='relative h-full w-full'>
|
<div className='relative h-full w-full'>
|
||||||
|
{/* Filter panel - slides from left */}
|
||||||
|
<div
|
||||||
|
className={`absolute top-0 bottom-0 left-0 z-20 transform bg-white shadow-lg transition-transform duration-300 ${
|
||||||
|
isFilterOpen ? 'translate-x-0' : '-translate-x-full'
|
||||||
|
}`}
|
||||||
|
style={{ width: '300px' }}
|
||||||
|
>
|
||||||
|
<div className='flex items-center justify-between border-b border-gray-200 p-4'>
|
||||||
|
<div className='flex items-center gap-2'>
|
||||||
|
<Filter className='h-5 w-5 text-red-600' />
|
||||||
|
<span className='font-medium'>{t('map.filters')}</span>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant='ghost'
|
||||||
|
size='sm'
|
||||||
|
onClick={() => setIsFilterOpen(false)}
|
||||||
|
>
|
||||||
|
<ChevronLeft className='h-5 w-5' />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='p-4'>
|
||||||
|
<Tabs
|
||||||
|
value={activeFilterTab}
|
||||||
|
onValueChange={setActiveFilterTab}
|
||||||
|
className='w-full'
|
||||||
|
>
|
||||||
|
<TabsList className='mb-4 grid w-full grid-cols-2'>
|
||||||
|
<TabsTrigger value='cities'>{t('map.cities')}</TabsTrigger>
|
||||||
|
<TabsTrigger value='services'>{t('map.services')}</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
<TabsContent value='cities' className='mt-0'>
|
||||||
|
<Button
|
||||||
|
variant='outline'
|
||||||
|
size='sm'
|
||||||
|
className='mb-3 flex w-full items-center justify-between'
|
||||||
|
onClick={selectAllCities}
|
||||||
|
>
|
||||||
|
<span>{t('map.allCities')}</span>
|
||||||
|
{activeCities.length === allCities.length && (
|
||||||
|
<Check className='h-4 w-4 text-green-600' />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div className='flex max-h-[calc(100vh-250px)] flex-col gap-2 overflow-y-auto'>
|
||||||
|
{allCities.map((city) => (
|
||||||
|
<Button
|
||||||
|
key={city}
|
||||||
|
variant={
|
||||||
|
activeCities.includes(city) ? 'default' : 'outline'
|
||||||
|
}
|
||||||
|
size='sm'
|
||||||
|
className={`justify-between ${activeCities.includes(city) ? 'bg-red-600 hover:bg-red-700' : ''}`}
|
||||||
|
onClick={() => toggleCity(city)}
|
||||||
|
>
|
||||||
|
<span>{city}</span>
|
||||||
|
{activeCities.includes(city) && (
|
||||||
|
<Check className='ml-2 h-4 w-4' />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{activeCities.length > 0 && (
|
||||||
|
<Button
|
||||||
|
variant='link'
|
||||||
|
className='mt-4 p-0 text-red-600'
|
||||||
|
onClick={() => setActiveCities([])}
|
||||||
|
>
|
||||||
|
{t('common.buttons.resetFilters')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value='services' className='mt-0'>
|
||||||
|
<div className='flex flex-wrap gap-2'>
|
||||||
|
{allFilters.map((filter) => (
|
||||||
|
<Button
|
||||||
|
key={filter}
|
||||||
|
variant={
|
||||||
|
activeFilters.includes(filter) ? 'default' : 'outline'
|
||||||
|
}
|
||||||
|
size='sm'
|
||||||
|
className={
|
||||||
|
activeFilters.includes(filter)
|
||||||
|
? 'bg-red-600 hover:bg-red-700'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
onClick={() => toggleFilter(filter)}
|
||||||
|
>
|
||||||
|
{filter}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{activeFilters.length > 0 && (
|
||||||
|
<Button
|
||||||
|
variant='link'
|
||||||
|
className='mt-4 p-0 text-red-600'
|
||||||
|
onClick={() => setActiveFilters([])}
|
||||||
|
>
|
||||||
|
{t('common.buttons.resetFilters')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Station list panel - slides from right */}
|
||||||
|
<div
|
||||||
|
className={`absolute top-0 right-0 bottom-0 z-20 transform bg-white shadow-lg transition-transform duration-300 ${
|
||||||
|
isStationListOpen ? 'translate-x-0' : 'translate-x-full'
|
||||||
|
}`}
|
||||||
|
style={{ width: '350px' }}
|
||||||
|
>
|
||||||
|
<div className='flex items-center justify-between border-b border-gray-200 p-4'>
|
||||||
|
<Button
|
||||||
|
variant='ghost'
|
||||||
|
size='sm'
|
||||||
|
onClick={() => setIsStationListOpen(false)}
|
||||||
|
>
|
||||||
|
<ChevronRight className='h-5 w-5' />
|
||||||
|
</Button>
|
||||||
|
<div className='flex items-center gap-2'>
|
||||||
|
<span className='font-medium'>{t('map.stationsList')}</span>
|
||||||
|
<Badge>{filteredStations.length}</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className='overflow-y-auto'
|
||||||
|
style={{ height: 'calc(100% - 60px)' }}
|
||||||
|
>
|
||||||
|
{filteredStations.length > 0 ? (
|
||||||
|
<div className='p-2'>
|
||||||
|
{filteredStations.map((station) => (
|
||||||
|
<div
|
||||||
|
key={station.id}
|
||||||
|
className={`mb-2 cursor-pointer rounded-lg border p-3 transition-colors ${
|
||||||
|
selectedStation === station.id
|
||||||
|
? 'border-blue-500 bg-blue-50'
|
||||||
|
: 'border-gray-200 hover:bg-gray-50'
|
||||||
|
}`}
|
||||||
|
onClick={() => setSelectedStation(station.id)}
|
||||||
|
>
|
||||||
|
<div className='flex items-start justify-between'>
|
||||||
|
<h4 className='font-medium'>{station.name}</h4>
|
||||||
|
<ChevronRight className='h-4 w-4 text-gray-400' />
|
||||||
|
</div>
|
||||||
|
<p className='mb-2 text-sm text-gray-500'>
|
||||||
|
{station.address}
|
||||||
|
</p>
|
||||||
|
<div className='flex flex-wrap gap-1'>
|
||||||
|
<Badge className='mb-1 border-blue-200 bg-blue-100 text-blue-800'>
|
||||||
|
{station.city}
|
||||||
|
</Badge>
|
||||||
|
{station.services.map((service) => (
|
||||||
|
<Badge
|
||||||
|
key={service}
|
||||||
|
variant='outline'
|
||||||
|
className={
|
||||||
|
activeFilters.includes(service)
|
||||||
|
? 'border-red-200 bg-red-100 text-red-800'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{service}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className='p-4 text-center text-gray-500'>
|
||||||
|
<p>{t('map.noStations')}</p>
|
||||||
|
<div className='mt-2 flex justify-center gap-2'>
|
||||||
|
{activeFilters.length > 0 && (
|
||||||
|
<Button
|
||||||
|
variant='link'
|
||||||
|
className='text-red-600'
|
||||||
|
onClick={() => setActiveFilters([])}
|
||||||
|
>
|
||||||
|
{t('common.buttons.resetFilters')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{activeCities.length > 0 && (
|
||||||
|
<Button
|
||||||
|
variant='link'
|
||||||
|
className='text-red-600'
|
||||||
|
onClick={() => setActiveCities([])}
|
||||||
|
>
|
||||||
|
{t('map.allCities')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Map */}
|
||||||
|
<div className='h-full w-full'>
|
||||||
<div ref={mapRef} className='h-full w-full'></div>
|
<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>
|
||||||
|
|
||||||
|
{/* Control buttons */}
|
||||||
|
<div className='absolute top-4 left-4 z-10'>
|
||||||
|
<Button
|
||||||
|
variant='default'
|
||||||
|
size='sm'
|
||||||
|
className='border border-gray-200 bg-white text-gray-800 shadow-md hover:bg-gray-100'
|
||||||
|
onClick={() => setIsFilterOpen(true)}
|
||||||
|
>
|
||||||
|
<Filter className='mr-2 h-4 w-4 text-red-600' />
|
||||||
|
{t('map.filters')}
|
||||||
|
{(activeFilters.length > 0 || activeCities.length > 0) && (
|
||||||
|
<Badge className='ml-2 bg-red-600' variant='default'>
|
||||||
|
{activeFilters.length + activeCities.length}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='absolute top-4 right-4 z-10'>
|
||||||
|
<Button
|
||||||
|
variant='default'
|
||||||
|
size='sm'
|
||||||
|
className='border border-gray-200 bg-white text-gray-800 shadow-md hover:bg-gray-100'
|
||||||
|
onClick={() => setIsStationListOpen(true)}
|
||||||
|
>
|
||||||
|
<List className='mr-2 h-4 w-4 text-red-600' />
|
||||||
|
{t('map.stationsList')}
|
||||||
|
<Badge className='ml-2 bg-red-600' variant='default'>
|
||||||
|
{filteredStations.length}
|
||||||
|
</Badge>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='absolute bottom-4 left-4 rounded-lg bg-white p-3 shadow-lg'>
|
||||||
<div className='flex items-center gap-2 text-sm font-medium'>
|
<div className='flex items-center gap-2 text-sm font-medium'>
|
||||||
<MapPin className='h-5 w-5 text-red-600' />
|
<MapPin className='h-5 w-5 text-red-600' />
|
||||||
<span>Наши заправки</span>
|
<span>{t('map.ourStations')}</span>
|
||||||
</div>
|
</div>
|
||||||
<p className='mt-1 text-xs text-gray-500'>Всего станций: 25</p>
|
<p className='mt-1 text-xs text-gray-500'>
|
||||||
|
{t('map.totalStations')}: {stations.length}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
36
src/shared/shadcn-ui/badge.tsx
Normal file
36
src/shared/shadcn-ui/badge.tsx
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import { cva, type VariantProps } from 'class-variance-authority';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { cn } from '@/shared/lib/utils';
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
'focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none',
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent',
|
||||||
|
secondary:
|
||||||
|
'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent',
|
||||||
|
destructive:
|
||||||
|
'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent',
|
||||||
|
outline: 'text-foreground',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export interface BadgeProps
|
||||||
|
extends React.HTMLAttributes<HTMLDivElement>,
|
||||||
|
VariantProps<typeof badgeVariants> {}
|
||||||
|
|
||||||
|
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||||
|
return (
|
||||||
|
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants };
|
||||||
@ -1,11 +1,10 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { ChevronRight, MapPin } from 'lucide-react';
|
import { MapPin } from 'lucide-react';
|
||||||
|
|
||||||
import { GasStationMap } from '@/features/map';
|
import { GasStationMap } from '@/features/map';
|
||||||
|
|
||||||
import { useLanguage } from '@/shared/language';
|
import { useLanguage } from '@/shared/language';
|
||||||
import { Button } from '@/shared/shadcn-ui/button';
|
|
||||||
|
|
||||||
export const MapSection = () => {
|
export const MapSection = () => {
|
||||||
const { t } = useLanguage();
|
const { t } = useLanguage();
|
||||||
@ -30,12 +29,6 @@ export const MapSection = () => {
|
|||||||
>
|
>
|
||||||
<GasStationMap />
|
<GasStationMap />
|
||||||
</div>
|
</div>
|
||||||
<div className='mt-8 flex justify-center'>
|
|
||||||
<Button className='bg-red-600 hover:bg-red-700'>
|
|
||||||
{t('common.buttons.viewAll')}{' '}
|
|
||||||
<ChevronRight className='ml-2 h-4 w-4' />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user