update: update map section

src/features/map/ui/gas-station-map.tsx

@@ -1,10 +1,231 @@
 'use client';
 
-import { MapPin } from 'lucide-react';
-import { useEffect, useRef } from 'react';
+import {
+  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() {
+  const { t } = useLanguage();
   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(() => {
     // This is a placeholder for a real map implementation
@@ -42,24 +263,15 @@ export default function GasStationMap() {
         }
 
         // 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) => {
+        filteredStations.forEach((station) => {
+          const isSelected = selectedStation === station.id;
           // Draw marker
-          ctx.fillStyle = '#ef4444';
+          ctx.fillStyle = isSelected ? '#3b82f6' : '#ef4444';
           ctx.beginPath();
           ctx.arc(
-            station.x * canvas.width,
-            station.y * canvas.height,
-            10,
+            station.coordinates.x * canvas.width,
+            station.coordinates.y * canvas.height,
+            isSelected ? 12 : 10,
             0,
             2 * Math.PI,
           );
@@ -70,9 +282,9 @@ export default function GasStationMap() {
           ctx.lineWidth = 2;
           ctx.beginPath();
           ctx.arc(
-            station.x * canvas.width,
-            station.y * canvas.height,
-            10,
+            station.coordinates.x * canvas.width,
+            station.coordinates.y * canvas.height,
+            isSelected ? 12 : 10,
             0,
             2 * Math.PI,
           );
@@ -99,17 +311,257 @@ export default function GasStationMap() {
         }
       }
     };
-  }, []);
+  }, [filteredStations, selectedStation]);
 
   return (
     <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 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'>
           <MapPin className='h-5 w-5 text-red-600' />
-          <span>Наши заправки</span>
+          <span>{t('map.ourStations')}</span>
         </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>
   );

src/shared/shadcn-ui/badge.tsx

@@ -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 };

src/widgets/map-section.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import { ChevronRight, MapPin } from 'lucide-react';
+import { MapPin } from 'lucide-react';
 
 import { GasStationMap } from '@/features/map';
 
 import { useLanguage } from '@/shared/language';
-import { Button } from '@/shared/shadcn-ui/button';
 
 export const MapSection = () => {
   const { t } = useLanguage();
@@ -30,12 +29,6 @@ export const MapSection = () => {
         >
           <GasStationMap />
         </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>
     </section>
   );