update: open station-list on-marker-click and add unselect opportunity

refactor: use container component
2025-05-03 02:50:07 +05:00 · 2025-05-03 02:33:06 +05:00
19 changed files with 879 additions and 939 deletions
--- a/src/features/map/ui/gas-station-map.tsx
+++ b/src/features/map/ui/gas-station-map.tsx
@ -56,7 +56,7 @@ interface StationListPanelProps {
  selectedStation: number | null;
  activeFilters: string[];
  activeCities: string[];
-  setSelectedStation: (id: number | null) => void;
+  handleMapStationClick: (id: number) => void;
  filterToFieldMap: { [key: string]: keyof Stations[number] };
  allFilters: string[];
  resetFilters: () => void;
@ -205,7 +205,7 @@ function StationListPanel({
  selectedStation,
  activeFilters,
  activeCities,
-  setSelectedStation,
+  handleMapStationClick,
  filterToFieldMap,
  allFilters,
  resetCities,
@ -275,7 +275,7 @@ function StationListPanel({
                      ? 'border-blue-500 bg-blue-50'
                      : 'border-gray-200 hover:bg-gray-50'
                  }`}
-                  onClick={() => setSelectedStation(station.id)}
+                  onClick={() => handleMapStationClick(station.id)}
                >
                  <div className='flex items-start justify-between'>
                    <h4 className='font-medium'>{station.name}</h4>
@ -365,6 +365,11 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
  const [isStationListOpen, setIsStationListOpen] = useState(false);
  const [activeFilterTab, setActiveFilterTab] = useState('cities');

+  useEffect(() => {
+    if (selectedStation === null) return;
+    setIsStationListOpen(true);
+  }, [selectedStation]);
+
  // Все доступные фильтры
  const allFilters = [
    // 'ДТ', -> нет значения в интерфейсе - TODO: поправить
@ -434,6 +439,16 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
    [filteredStations],
  );

+  const handleMapStationClick = (stationId: number) => {
+    setSelectedStation(() => {
+      if (selectedStation !== null && selectedStation === stationId) {
+        return null;
+      }
+
+      return stationId;
+    });
+  };
+
  // Переключение фильтра услуг
  const toggleFilter = (filter: string) => {
    setActiveFilters((prev) =>
@ -494,7 +509,7 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
        selectedStation={selectedStation}
        activeFilters={activeFilters}
        activeCities={activeCities}
-        setSelectedStation={setSelectedStation}
+        handleMapStationClick={handleMapStationClick}
        filterToFieldMap={filterToFieldMap}
        allFilters={allFilters}
        resetFilters={resetFilters}
@ -506,7 +521,7 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
        <YandexMap
          points={points}
          selectedStation={selectedStation}
-          setSelectedStation={setSelectedStation}
+          handleMapStationClick={handleMapStationClick}
        />
      </div>

--- a/src/features/map/ui/yandex-map.tsx
+++ b/src/features/map/ui/yandex-map.tsx
@ -7,7 +7,7 @@ import { Point } from '../model';
 type YandexMapProps = {
  points: Point[];
  selectedStation: number | null;
-  setSelectedStation: Dispatch<SetStateAction<number | null>>;
+  handleMapStationClick: (id: number) => void;
 };

 const mapCenter = [38.53575, 68.77905];
@ -15,7 +15,7 @@ const mapCenter = [38.53575, 68.77905];
 export const YandexMap = ({
  points,
  selectedStation,
-  setSelectedStation,
+  handleMapStationClick,
 }: YandexMapProps) => {
  return (
    <YMaps
@ -39,30 +39,25 @@ export const YandexMap = ({
        }}
        className='h-full max-h-[500px] w-full overflow-hidden rounded-md shadow-lg'
      >
-        {points.map((point) => (
+        {points.map((point) => {
+          const isSelectedStation = selectedStation === point.id;
+          return (
            <Placemark
              key={point.id}
              geometry={point.coordinates}
              options={{
                iconLayout: 'default#image',
                iconImageHref:
-                !selectedStation || selectedStation === point.id
+                  !selectedStation || isSelectedStation
                    ? '/map/oriyo-marker.png'
                    : '/map/oriyo-inactive-marker.png',
-              iconImageSize: selectedStation === point.id ? [70, 70] : [64, 64],
-              iconImageOffset: [-24, -36],
+                iconImageSize: isSelectedStation ? [70, 70] : [64, 64],
+                iconImageOffset: isSelectedStation ? [-28, -40] : [-24, -36],
              }}
-            onClick={() =>
-              setSelectedStation(() => {
-                if (selectedStation !== null && selectedStation === point.id) {
-                  return null;
-                }
-
-                return point.id;
-              })
-            }
+              onClick={() => handleMapStationClick(point.id)}
            />
-        ))}
+          );
+        })}
      </Map>
    </YMaps>
  );
--- a/src/pages-templates/about/index.tsx
+++ b/src/pages-templates/about/index.tsx
@ -6,10 +6,9 @@ import Image from 'next/image';
 import { AboutUsPageData } from '@/app/api-utlities/@types/about-us';

 import AnimatedCounter from '@/shared/components/animated-counter';
+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
-import { Button } from '@/shared/shadcn-ui/button';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';
-import Container from '@/shared/shadcn-ui/conteiner';

 import { CompanyTimeline } from '@/widgets/about-page/company-timeline';
 import { StationGallery } from '@/widgets/about-page/station-gallery';
@ -62,8 +61,6 @@ export default function AboutPage({ content }: AboutPageProps) {

        {/* Company Overview */}
        <Container>
-          <section className='py-16'>
-            <div className='container mx-auto'>
          <div className='grid items-center gap-12 md:grid-cols-2'>
            <div data-aos='fade-right'>
              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
@ -112,13 +109,11 @@ export default function AboutPage({ content }: AboutPageProps) {
              />
            </div>
          </div>
-            </div>
-          </section>
        </Container>

        {/* Stats Section */}
-        <section className='bg-red-600 py-16 text-white'>
-          <div className='container mx-auto'>
+        <section className='bg-red-600 text-white'>
+          <Container>
            <div className='mb-12 text-center'>
              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
                {t('about.stats.title')}
@ -147,12 +142,10 @@ export default function AboutPage({ content }: AboutPageProps) {
                </div>
              ))}
            </div>
-          </div>
+          </Container>
        </section>

        {/* Our History */}
-        <section className='py-16'>
-          <div className='container mx-auto'>
        <Container>
          <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'>
@ -170,13 +163,10 @@ export default function AboutPage({ content }: AboutPageProps) {
        <Container>
          <CompanyTimeline timeline={content.history} />
        </Container>
-          </div>
-        </section>

        {/* Our Stations */}
+        <section className='bg-gray-50'>
          <Container>
-          <section className='bg-gray-50 py-16'>
-            <div className='container mx-auto'>
            <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' />
@ -188,26 +178,21 @@ export default function AboutPage({ content }: AboutPageProps) {
                {t('about.stations.subtitle')}
              </p>
            </div>
-
            <StationGallery stations={content.stations} />
-
            <div className='mt-12 text-center'>
              <p className='mx-auto mb-6 max-w-2xl text-gray-600'>
                {t('about.stations.description')}
              </p>
-                <Button className='bg-red-600 hover:bg-red-700'>
+              {/* <Button className='bg-red-600 hover:bg-red-700'>
                    {t('about.stations.buttonText')}{' '}
                    <MapPin className='ml-2 h-4 w-4' />
-                </Button>
+                  </Button> */}
            </div>
-            </div>
-          </section>
          </Container>
+        </section>

        {/* Our Values */}
        <Container>
-          <section className='py-16'>
-            <div className='container mx-auto'>
          <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'>
              <Target className='h-6 w-6 text-red-600' />
@ -244,14 +229,11 @@ export default function AboutPage({ content }: AboutPageProps) {
              </Card>
            ))}
          </div>
-            </div>
-          </section>
        </Container>

        {/* Our Team */}
+        <section className='bg-gray-50'>
          <Container>
-          <section className='bg-gray-50 py-16'>
-            <div className='container mx-auto px-2'>
            <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'>
                <Users className='h-6 w-6 text-red-600' />
@ -263,7 +245,6 @@ export default function AboutPage({ content }: AboutPageProps) {
                {t('about.team.subtitle')}
              </p>
            </div>
-
            <div
              data-aos='flip-down'
              data-aos-duration='600'
@ -291,14 +272,11 @@ export default function AboutPage({ content }: AboutPageProps) {
                </div>
              ))}
            </div>
-            </div>
-          </section>
          </Container>
+        </section>

        {/* Testimonials */}
        <Container>
-          <section className='py-16'>
-            <div className='container mx-auto'>
          <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'>
              <Star className='h-6 w-6 text-red-600' />
@ -311,10 +289,7 @@ export default function AboutPage({ content }: AboutPageProps) {
            </p>
          </div>

-              <div
-                data-aos='zoom-out-right'
-                className='grid gap-8 md:grid-cols-3'
-              >
+          <div data-aos='zoom-out-right' className='grid gap-8 md:grid-cols-3'>
            {content.reviews.map((review, index) => (
              <Card
                key={index}
@ -331,16 +306,12 @@ export default function AboutPage({ content }: AboutPageProps) {
                        />
                      ))}
                  </div>
-                      <p className='mb-4 text-gray-600 italic'>
-                        "{review.review}"
-                      </p>
+                  <p className='mb-4 text-gray-600 italic'>"{review.review}"</p>
                  <p className='font-semibold'>{review.fullname}</p>
                </CardContent>
              </Card>
            ))}
          </div>
-            </div>
-          </section>
        </Container>

        <CtaSection />
--- a/src/pages-templates/charity/index.tsx
+++ b/src/pages-templates/charity/index.tsx
@ -10,16 +10,14 @@ import {
 } from 'lucide-react';
 import Image from 'next/image';

+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
-import { Button } from '@/shared/shadcn-ui/button';
 import {
  Card,
  CardContent,
-  CardFooter,
  CardHeader,
  CardTitle,
 } from '@/shared/shadcn-ui/card';
-import Container from '@/shared/shadcn-ui/conteiner';

 import { CtaSection } from '@/widgets/cta-section';

@ -29,6 +27,32 @@ export const metadata = {
    'Благотворительные проекты и инициативы GasNetwork. Мы помогаем обществу и заботимся о будущем.',
 };

+const events = [
+  {
+    title: 'Благотворительный марафон',
+    description:
+      'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
+    date: '15 июня 2023',
+    location: 'Парк Рудаки, Душанбе',
+    image: '/placeholder.svg?height=200&width=300&text=Марафон',
+  },
+  {
+    title: 'Экологическая акция',
+    description: 'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
+    date: '22 июля 2023',
+    location: 'Река Варзоб, Душанбе',
+    image: '/placeholder.svg?height=200&width=300&text=Экологическая+акция',
+  },
+  {
+    title: 'Сбор школьных принадлежностей',
+    description:
+      'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
+    date: '1-20 августа 2023',
+    location: 'Все заправки GasNetwork',
+    image: '/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
+  },
+];
+
 export function CharityPage() {
  const { t } = useTextController();

@ -47,12 +71,7 @@ export function CharityPage() {
              priority
            />
            <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
-              <Container>
-                <div
-                  data-aos='fade-down'
-                  data-aos-duration='800'
-                  className='container mx-auto'
-                >
+              <Container data-aos='fade-down' data-aos-duration='800'>
                <div className='max-w-2xl space-y-6 text-white'>
                  <div className='inline-flex items-center justify-center rounded-full bg-red-600/20 p-2'>
                    <Heart className='size-6 text-red-500' />
@ -64,7 +83,6 @@ export function CharityPage() {
                    {t('charity.hero.subtitle')}
                  </p>
                </div>
-                </div>
              </Container>
            </div>
          </div>
@ -72,8 +90,6 @@ export function CharityPage() {

        {/* Mission Section */}
        <Container>
-          <section className='py-16'>
-            <div className='container mx-auto'>
          <div className='grid items-center gap-12 md:grid-cols-2'>
            <div>
              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
@ -102,9 +118,7 @@ export function CharityPage() {
                        {t(`charity.mission.principles.${index}.title`)}
                      </h3>
                      <p className='text-gray-600'>
-                            {t(
-                              `charity.mission.principles.${index}.description`,
-                            )}
+                        {t(`charity.mission.principles.${index}.description`)}
                      </p>
                    </div>
                  </div>
@ -123,13 +137,10 @@ export function CharityPage() {
              />
            </div>
          </div>
-            </div>
-          </section>
        </Container>

        {/* Key Figures */}
-        <section className='bg-red-600 py-16 text-white'>
-          <div className='container mx-auto'>
+        <Container className='bg-red-600 text-white'>
          <div className='mb-12 text-center'>
            <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
              {t('charity.stats.title')}
@ -150,13 +161,10 @@ export function CharityPage() {
              </div>
            ))}
          </div>
-          </div>
-        </section>
+        </Container>

        {/* Upcoming Events */}
-        <Container>
-          <section className='bg-gray-50 py-16'>
-            <div className='container mx-auto'>
+        <Container className='bg-gray-50'>
          <div className='mb-12 text-center'>
            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
              <Calendar className='h-6 w-6 text-red-600' />
@ -170,34 +178,7 @@ export function CharityPage() {
          </div>

          <div className='grid gap-6 md:grid-cols-3'>
-                {[
-                  {
-                    title: 'Благотворительный марафон',
-                    description:
-                      'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
-                    date: '15 июня 2023',
-                    location: 'Парк Рудаки, Душанбе',
-                    image: '/placeholder.svg?height=200&width=300&text=Марафон',
-                  },
-                  {
-                    title: 'Экологическая акция',
-                    description:
-                      'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
-                    date: '22 июля 2023',
-                    location: 'Река Варзоб, Душанбе',
-                    image:
-                      '/placeholder.svg?height=200&width=300&text=Экологическая+акция',
-                  },
-                  {
-                    title: 'Сбор школьных принадлежностей',
-                    description:
-                      'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
-                    date: '1-20 августа 2023',
-                    location: 'Все заправки GasNetwork',
-                    image:
-                      '/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
-                  },
-                ].map((event, index) => (
+            {events.map((event, index) => (
              <Card
                data-aos='zoom-in-up'
                key={index}
@ -229,22 +210,18 @@ export function CharityPage() {
                    </div>
                  </CardContent>
                </div>
-                    <CardFooter>
+                {/* <CardFooter>
                  <Button className='w-full bg-red-600 hover:bg-red-700'>
                    {t(`charity.events.button`)}
                  </Button>
-                    </CardFooter>
+                </CardFooter> */}
              </Card>
            ))}
          </div>
-            </div>
-          </section>
        </Container>

        {/* How to Help */}
        <Container>
-          <section className='py-16'>
-            <div className='container mx-auto'>
          <div className='mb-12 text-center'>
            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
              <Users className='h-6 w-6 text-red-600' />
@ -286,9 +263,7 @@ export function CharityPage() {
            ].map((item, index) => (
              <Card data-aos='zoom-in' key={index} className='text-center'>
                <CardHeader>
-                      <div className='mb-4 flex justify-center'>
-                        {item.icon}
-                      </div>
+                  <div className='mb-4 flex justify-center'>{item.icon}</div>
                  <CardTitle className='break-words hyphens-auto'>
                    {item.title}
                  </CardTitle>
@ -299,8 +274,6 @@ export function CharityPage() {
              </Card>
            ))}
          </div>
-            </div>
-          </section>
        </Container>
        <CtaSection />
      </main>
--- a/src/pages-templates/clients/certificates/index.tsx
+++ b/src/pages-templates/clients/certificates/index.tsx
@ -3,10 +3,10 @@
 import { Download, Eye } from 'lucide-react';
 import Image from 'next/image';

+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';
-import Container from '@/shared/shadcn-ui/conteiner';

 export function CertificatesPage() {
  const { t } = useTextController();
@ -67,8 +67,8 @@ export function CertificatesPage() {
  certificates.length = 0;

  return (
+    <main>
      <Container>
-      <main className='container mx-auto py-10'>
        <div className='mb-10 text-center'>
          <h1 className='mb-4 text-4xl font-bold'>{t('certificates.title')}</h1>
          <p className='mx-auto max-w-2xl text-lg text-gray-600'>
@ -125,7 +125,7 @@ export function CertificatesPage() {
            </Card>
          ))}
        </div>
-      </main>
      </Container>
+    </main>
  );
 }
--- a/src/pages-templates/clients/index.tsx
+++ b/src/pages-templates/clients/index.tsx
@ -2,8 +2,8 @@

 import Image from 'next/image';

+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
-import Container from '@/shared/shadcn-ui/conteiner';

 import { BenefitsSection } from '@/widgets/clients/ui/benefits-section';
 import { ServicesOverviewSection } from '@/widgets/clients/ui/services-overview-section';
@ -33,7 +33,7 @@ export function ClientsPage() {
              priority
            />
            <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
-              <Container>
+              <Container className='py-0'>
                <div
                  data-aos='fade-down'
                  data-aos-duration='1000'
--- a/src/pages-templates/clients/loyalty/index.tsx
+++ b/src/pages-templates/clients/loyalty/index.tsx
@ -3,9 +3,9 @@
 import { Check, Percent } from 'lucide-react';
 import Image from 'next/image';

+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';
-import Container from '@/shared/shadcn-ui/conteiner';

 import { CtaSection } from '@/widgets/cta-section';

@ -35,12 +35,7 @@ export function LoyaltyPage() {
              priority
            />
            <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
-              <Container>
-                <div
-                  data-aos='fade-down'
-                  data-aos-duration='800'
-                  className='container mx-auto'
-                >
+              <Container data-aos='fade-down' data-aos-duration='800'>
                <div className='max-w-2xl space-y-4 text-white'>
                  <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
                    {t('clients.loyalty.title')}
@ -49,16 +44,13 @@ export function LoyaltyPage() {
                    {t('clients.loyalty.description')}
                  </p>
                </div>
-                </div>
              </Container>
            </div>
          </div>
        </section>

-        <Container>
        {/* Program Overview */}
-          <section className='py-16'>
-            <div className='container mx-auto'>
+        <Container>
          <div className='grid items-center gap-12 md:grid-cols-2'>
            <div data-aos='fade-right'>
              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
@ -84,9 +76,7 @@ export function LoyaltyPage() {
                      {t('clients.loyalty.programm.conditions-1')}
                    </h3>
                    <p className='text-gray-600'>
-                          {t(
-                            'clients.loyalty.programm.conditions.description-1',
-                          )}
+                      {t('clients.loyalty.programm.conditions.description-1')}
                    </p>
                  </div>
                </div>
@ -99,9 +89,7 @@ export function LoyaltyPage() {
                      {t('clients.loyalty.programm.conditions-2')}
                    </h3>
                    <p className='text-gray-600'>
-                          {t(
-                            'clients.loyalty.programm.conditions.description-2',
-                          )}
+                      {t('clients.loyalty.programm.conditions.description-2')}
                    </p>
                  </div>
                </div>
@ -114,9 +102,7 @@ export function LoyaltyPage() {
                      {t('clients.loyalty.programm.conditions-3')}
                    </h3>
                    <p className='text-gray-600'>
-                          {t(
-                            'clients.loyalty.programm.conditions.description-3',
-                          )}
+                      {t('clients.loyalty.programm.conditions.description-3')}
                    </p>
                  </div>
                </div>
@ -135,12 +121,11 @@ export function LoyaltyPage() {
              />
            </div>
          </div>
-            </div>
-          </section>
+        </Container>

        {/* How It Works */}
-          <section className='bg-gray-50 px-2 py-16'>
-            <div className='container mx-auto'>
+        <section className='bg-gray-50'>
+          <Container>
            <div className='mb-12 text-center'>
              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
                {t('clients.loyalty.works.title')}
@ -149,7 +134,6 @@ export function LoyaltyPage() {
                {t('clients.loyalty.works.description')}
              </p>
            </div>
-
            <div className='grid gap-8 sm:grid-cols-2 lg:grid-cols-4'>
              <div data-aos='zoom-in-up' className='text-center'>
                <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
@ -196,12 +180,11 @@ export function LoyaltyPage() {
                </p>
              </div>
            </div>
-            </div>
+          </Container>
        </section>

        {/* Loyalty Levels */}
-          <section className='py-16'>
-            <div className='container mx-auto'>
+        <Container>
          <div className='mb-12 text-center'>
            <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
              {t('clients.loyalty.works.levels.title')}
@ -350,8 +333,6 @@ export function LoyaltyPage() {
              </CardContent>
            </Card>
          </div>
-            </div>
-          </section>
        </Container>

        <CtaSection />
--- a/src/pages-templates/login/index.tsx
+++ b/src/pages-templates/login/index.tsx
@ -8,6 +8,7 @@ import { Suspense } from 'react';

 import { LoginForm } from '@/features/auth/login-form';

+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import {
@ -17,7 +18,6 @@ import {
  CardHeader,
  CardTitle,
 } from '@/shared/shadcn-ui/card';
-import Container from '@/shared/shadcn-ui/conteiner';
 import {
  Tabs,
  TabsContent,
@ -134,10 +134,9 @@ export default function LoginPage() {
  const { t } = useTextController();

  return (
-    <Container>
-      <div className='flex min-h-screen flex-col items-center justify-center'>
-        <main className='flex-1'>
-          <div className='container max-w-6xl py-16'>
+    <main className='flex min-h-screen flex-col items-center justify-center'>
+      <div className='flex-1'>
+        <Container className='max-w-6xl'>
          <div className='mb-12 flex flex-col items-center text-center'>
            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
              <Fuel className='h-6 w-6 text-red-600' />
@ -156,18 +155,14 @@ export default function LoginPage() {
            <div className='mt-8 text-center text-sm text-gray-500'>
              <p>
                {t('auth.loginIssues')}{' '}
-                  <Link
-                    href='/contact'
-                    className='text-red-600 hover:underline'
-                  >
+                <Link href='/contact' className='text-red-600 hover:underline'>
                  {t('auth.contactLink')}
                </Link>
              </p>
            </div>
          </div>
+        </Container>
      </div>
    </main>
-      </div>
-    </Container>
  );
 }
--- a/src/shared/components/container.tsx
+++ b/src/shared/components/container.tsx
@ -0,0 +1,18 @@
+'use client';
+
+import { ComponentProps } from 'react';
+
+import { cn } from '../lib/utils';
+
+interface ContainerProps extends ComponentProps<'div'> {}
+
+export function Container({ children, className, ...props }: ContainerProps) {
+  return (
+    <div
+      className={cn('container mx-auto px-2.5 py-8 sm:py-16', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
--- a/src/shared/shadcn-ui/conteiner.tsx
+++ b/src/shared/shadcn-ui/conteiner.tsx
@ -1,10 +0,0 @@
-"use client"
-
-interface ContainerProps {
-    children: React.ReactNode
-}
-export default function Container({children}: ContainerProps) {
-    return (
-        <div className="container mx-auto px-2.5 py-1">{children}</div>
-    )
-}
--- a/src/widgets/about-section.tsx
+++ b/src/widgets/about-section.tsx
@ -4,14 +4,15 @@ import { Users } from 'lucide-react';
 import Image from 'next/image';

 import AboutCounter from '@/shared/components/about-counter';
+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';

 export const AboutSection = () => {
  const { t } = useTextController();

  return (
-    <section id='about' className='px-2 py-8 sm:py-16'>
-      <div className='container mx-auto'>
+    <section id='about'>
+      <Container>
        <div className='grid items-center gap-12 md:grid-cols-2'>
          <div>
            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
@ -38,7 +39,7 @@ export const AboutSection = () => {
            />
          </div>
        </div>
-      </div>
+      </Container>
    </section>
  );
 };
--- a/src/widgets/charity-section.tsx
+++ b/src/widgets/charity-section.tsx
@ -4,6 +4,7 @@ import { ChevronRight, Heart } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';

+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';

@ -11,8 +12,8 @@ export const CharitySection = () => {
  const { t } = useTextController();

  return (
-    <section id='charity' className='px-2 py-8 sm:py-16'>
-      <div className='container mx-auto'>
+    <section id='charity'>
+      <Container>
        <div className='grid items-center gap-12 md:grid-cols-2'>
          <div
            className='relative order-2 h-[400px] w-full overflow-hidden rounded-xl shadow-xl md:order-1'
@ -59,7 +60,7 @@ export const CharitySection = () => {
            </Link>
          </div>
        </div>
-      </div>
+      </Container>
    </section>
  );
 };
--- a/src/widgets/clients/ui/benefits-section.tsx
+++ b/src/widgets/clients/ui/benefits-section.tsx
@ -3,8 +3,8 @@
 import { Percent } from 'lucide-react';
 import Image from 'next/image';

+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
-import Container from '@/shared/shadcn-ui/conteiner';

 interface Benefit {
  title: string;
@ -34,9 +34,8 @@ export const BenefitsSection = () => {
  const { t } = useTextController();

  return (
+    <section className='bg-gray-50'>
      <Container>
-      <section className='bg-gray-50 py-16'>
-        <div className='container mx-auto'>
        <div className='grid items-center gap-12 md:grid-cols-2'>
          <div
            data-aos='fade-right'
@ -52,7 +51,6 @@ export const BenefitsSection = () => {
            <p className='mb-6 text-gray-600'>
              {t('clients.benefits.subtitle')}
            </p>
-
            <div className='space-y-4'>
              {benefits.map(({ title, description }) => {
                return (
@ -81,8 +79,7 @@ export const BenefitsSection = () => {
            />
          </div>
        </div>
-        </div>
-      </section>
      </Container>
+    </section>
  );
 };
--- a/src/widgets/clients/ui/services-overview-section.tsx
+++ b/src/widgets/clients/ui/services-overview-section.tsx
@ -3,6 +3,7 @@
 import { CreditCard, type LucideProps, Percent, Wallet } from 'lucide-react';
 import { type ForwardRefExoticComponent, type RefAttributes } from 'react';

+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import {
  Card,
@ -11,7 +12,6 @@ import {
  CardHeader,
  CardTitle,
 } from '@/shared/shadcn-ui/card';
-import Container from '@/shared/shadcn-ui/conteiner';

 interface ServiceOverview {
  title: string;
@ -50,9 +50,8 @@ export const ServicesOverviewSection = () => {
  const { t } = useTextController();

  return (
+    <section>
      <Container>
-      <section className='py-16'>
-        <div className='container mx-auto'>
        <div className='mb-12 text-center'>
          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
            {t('clients.services.title')}
@ -61,8 +60,11 @@ export const ServicesOverviewSection = () => {
            {t('clients.services.subtitle')}
          </p>
        </div>
-
-          <div data-aos='flip-up' data-aos-duration='600' className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
+        <div
+          data-aos='flip-up'
+          data-aos-duration='600'
+          className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3'
+        >
          {servicesOverview.map(({ description, Icon, contentText, title }) => {
            return (
              <Card
@ -83,8 +85,7 @@ export const ServicesOverviewSection = () => {
            );
          })}
        </div>
-        </div>
-      </section>
      </Container>
+    </section>
  );
 };
--- a/src/widgets/cta-section.tsx
+++ b/src/widgets/cta-section.tsx
@ -2,6 +2,7 @@

 import Link from 'next/link';

+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';

@ -9,8 +10,8 @@ export const CtaSection = () => {
  const { t } = useTextController();

  return (
-    <section className='bg-red-600 px-2 py-8 text-white sm:py-16'>
-      <div className='container mx-auto'>
+    <section className='bg-red-600 text-white'>
+      <Container>
        <div className='flex flex-col items-center text-center'>
          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
            {t('home.cta.title')}
@ -24,7 +25,7 @@ export const CtaSection = () => {
            </Link>
          </div>
        </div>
-      </div>
+      </Container>
    </section>
  );
 };
--- a/src/widgets/map-section.tsx
+++ b/src/widgets/map-section.tsx
@ -6,6 +6,7 @@ import { Stations } from '@/app/api-utlities/@types';

 import { GasStationMap } from '@/features/map';

+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';

 interface MapSectionProps {
@ -16,8 +17,8 @@ export const MapSection = ({ stations }: MapSectionProps) => {
  const { t } = useTextController();

  return (
-    <section id='stations' className='bg-gray-50 px-2 py-8 sm:py-16'>
-      <div className='container mx-auto'>
+    <section id='stations' className='bg-gray-50'>
+      <Container>
        <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' />
@ -35,7 +36,7 @@ export const MapSection = ({ stations }: MapSectionProps) => {
        >
          <GasStationMap stations={stations} />
        </div>
-      </div>
+      </Container>
    </section>
  );
 };
--- a/src/widgets/promotions-section.tsx
+++ b/src/widgets/promotions-section.tsx
@ -4,6 +4,7 @@ import { Gift } from 'lucide-react';

 import { Discounts } from '@/app/api-utlities/@types/index';

+import { Container } from '@/shared/components/container';
 import PromotionSlider from '@/shared/components/promotion-slider';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';

@ -15,8 +16,8 @@ export const PromotionsSection = ({ discounts }: PromotionsSectionProps) => {
  const { t } = useTextController();

  return (
-    <section id='promotions' className='bg-gray-50 px-2 py-8 sm:py-16'>
-      <div className='container mx-auto'>
+    <section id='promotions' className='bg-gray-50'>
+      <Container>
        <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'>
            <Gift className='h-6 w-6 text-red-600' />
@ -29,7 +30,7 @@ export const PromotionsSection = ({ discounts }: PromotionsSectionProps) => {
          </p>
        </div>
        <PromotionSlider discounts={discounts} />
-      </div>
+      </Container>
    </section>
  );
 };
--- a/src/widgets/stats-section.tsx
+++ b/src/widgets/stats-section.tsx
@ -2,6 +2,7 @@

 import { useEffect, useRef, useState } from 'react';

+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';

 import AnimatedCounter from '../shared/components/animated-counter';
@ -36,11 +37,8 @@ export function StatsSection() {
  }, []);

  return (
-    <section
-      ref={sectionRef}
-      className='bg-red-600 px-2 py-6 text-white sm:py-12'
-    >
-      <div className='container mx-auto'>
+    <section ref={sectionRef} className='bg-red-600 text-white'>
+      <Container>
        <div className='grid grid-cols-2 gap-4 text-center sm:gap-8 md:grid-cols-4'>
          <div className='space-y-2'>
            <h3 className='text-3xl font-bold'>
@ -67,7 +65,7 @@ export function StatsSection() {
            <p className='text-sm text-white/80'>{t('home.stats.mode')}</p>
          </div>
        </div>
-      </div>
+      </Container>
    </section>
  );
 }
--- a/src/widgets/vacancies-section.tsx
+++ b/src/widgets/vacancies-section.tsx
@ -4,6 +4,7 @@ import { Briefcase } from 'lucide-react';

 import { Jobs } from '@/app/api-utlities/@types/index';

+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { cn } from '@/shared/lib/utils';
 import { Badge } from '@/shared/shadcn-ui/badge';
@ -37,8 +38,8 @@ export const VacanciesSection = ({ jobs }: VacanciesSectionProps) => {
  const jobsTabsTitle = [allVacancies, ...Array.from(jobsByType.keys())];

  return (
-    <section id='vacancies' className='px-2 py-8 sm:py-16'>
-      <div className='container mx-auto'>
+    <section id='vacancies'>
+      <Container>
        <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'>
            <Briefcase className='h-6 w-6 text-red-600' />
@ -88,7 +89,7 @@ export const VacanciesSection = ({ jobs }: VacanciesSectionProps) => {
            </TabsContent>
          ))}
        </Tabs>
-      </div>
+      </Container>
    </section>
  );
 };
Author	SHA1	Message	Date
BunyodL	e8bb8a7830	update: open station-list on-marker-click and add unselect opportunity	2025-05-03 02:50:07 +05:00
BunyodL	9fc4b2018e	refactor: use container component	2025-05-03 02:33:06 +05:00