update: render main-page data

2025-04-30 17:34:33 +05:00 · 2025-04-30 17:34:33 +05:00 · 2810c6b9fb
commit 2810c6b9fb
parent 240aaa81ae
13 changed files with 217 additions and 91 deletions
--- a/next.config.ts
+++ b/next.config.ts
@ -1,7 +1,15 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';

 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'media.bambooapp.ai',
+        pathname: '/files/**',
+      },
+    ],
+  },
 };

 export default nextConfig;
--- a/package.json
+++ b/package.json
@ -11,6 +11,7 @@
  },
  "dependencies": {
    "@hookform/resolvers": "^5.0.1",
+    "@pbe/react-yandex-maps": "^1.2.5",
    "@radix-ui/react-collapsible": "^1.1.8",
    "@radix-ui/react-dialog": "^1.1.11",
    "@radix-ui/react-dropdown-menu": "^2.1.11",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -11,6 +11,9 @@ importers:
      '@hookform/resolvers':
        specifier: ^5.0.1
        version: 5.0.1(react-hook-form@7.56.1(react@19.1.0))
+      '@pbe/react-yandex-maps':
+        specifier: ^1.2.5
+        version: 1.2.5(react@19.1.0)
      '@radix-ui/react-collapsible':
        specifier: ^1.1.8
        version: 1.1.8(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@ -517,6 +520,12 @@ packages:
    resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
    engines: {node: '>=12.4.0'}

+  '@pbe/react-yandex-maps@1.2.5':
+    resolution: {integrity: sha512-cBojin5e1fPx9XVCAqHQJsCnHGMeBNsP0TrNfpWCrPFfxb30ye+JgcGr2mn767Gbr1d+RufBLRiUcX2kaiAwjQ==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      react: ^16.x || ^17.x || ^18.x
+
  '@pkgr/core@0.2.4':
    resolution: {integrity: sha512-ROFF39F6ZrnzSUEmQQZUar0Jt4xVoP9WnDRdWwF4NNcXs3xBTLgBUDoOwW141y1jP+S8nahIbdxbFC7IShw9Iw==}
    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@ -1106,6 +1115,9 @@ packages:
  '@types/use-sync-external-store@0.0.6':
    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}

+  '@types/yandex-maps@2.1.29':
+    resolution: {integrity: sha512-nuibRWj3RU/9KXlCzTrRtDE+n6V9l7NbT9JakicqZ5OXIdwyb6blvV2Uwn6lB58WYm3DSUDP2I2AWlnWMc8z2w==}
+
  '@typescript-eslint/eslint-plugin@8.30.1':
    resolution: {integrity: sha512-v+VWphxMjn+1t48/jO4t950D6KR8JaJuNXzi33Ve6P8sEmPr5k6CEXjdGwT6+LodVnEa91EQCtwjWNUCPweo+Q==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@ -2983,6 +2995,11 @@ snapshots:

  '@nolyfill/is-core-module@1.0.39': {}

+  '@pbe/react-yandex-maps@1.2.5(react@19.1.0)':
+    dependencies:
+      '@types/yandex-maps': 2.1.29
+      react: 19.1.0
+
  '@pkgr/core@0.2.4': {}

  '@radix-ui/number@1.1.1': {}
@ -3555,6 +3572,8 @@ snapshots:

  '@types/use-sync-external-store@0.0.6': {}

+  '@types/yandex-maps@2.1.29': {}
+
  '@typescript-eslint/eslint-plugin@8.30.1(@typescript-eslint/parser@8.30.1(eslint@9.25.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.25.0(jiti@2.4.2))(typescript@5.8.3)':
    dependencies:
      '@eslint-community/regexpp': 4.12.1
@ -4106,7 +4125,7 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.30.1(eslint@9.25.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import-x@4.10.6(eslint@9.25.0(jiti@2.4.2))(typescript@5.8.3))(eslint-plugin-import@2.31.0)(eslint@9.25.0(jiti@2.4.2)))(eslint@9.25.0(jiti@2.4.2)):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.30.1(eslint@9.25.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.0)(eslint@9.25.0(jiti@2.4.2)):
    dependencies:
      debug: 3.2.7
    optionalDependencies:
@ -4148,7 +4167,7 @@ snapshots:
      doctrine: 2.1.0
      eslint: 9.25.0(jiti@2.4.2)
      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.30.1(eslint@9.25.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import-x@4.10.6(eslint@9.25.0(jiti@2.4.2))(typescript@5.8.3))(eslint-plugin-import@2.31.0)(eslint@9.25.0(jiti@2.4.2)))(eslint@9.25.0(jiti@2.4.2))
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.30.1(eslint@9.25.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.0)(eslint@9.25.0(jiti@2.4.2))
      hasown: 2.0.2
      is-core-module: 2.16.1
      is-glob: 4.0.3
--- a/src/app/api-utlities/presenters/index.ts
+++ b/src/app/api-utlities/presenters/index.ts
@ -6,13 +6,15 @@ export const presentImage = (images: Image[]) =>
  isEmpty(images) ? null : `${process.env.TAYLOR_MEDIA_URL}/${images[0].url}`;

 export const presentPartners = (partners: Partner) =>
-  partners.records.map((record) => ({
+  partners.records.map((record, index) => ({
+    id: index + 1,
    name: record._name,
    poster: presentImage(record._image),
  }));

 export const presentJobs = (jobs: Job) =>
-  jobs.records.map((job) => ({
+  jobs.records.map((job, index) => ({
+    id: index + 1,
    name: job._name,
    tags: job._tags.map((tag) => tag.name),
    location: !isEmpty(job._localtio) ? job._localtio[0].name : null,
@ -20,7 +22,8 @@ export const presentJobs = (jobs: Job) =>
  }));

 export const presentDiscounts = (discounts: Discount) =>
-  discounts.records.map((discount) => ({
+  discounts.records.map((discount, index) => ({
+    id: index + 1,
    name: discount._name,
    description: discount._opisanie,
    expiresAt: discount._do,
@ -28,7 +31,8 @@ export const presentDiscounts = (discounts: Discount) =>
  }));

 export const presentStations = (stations: Station) =>
-  stations.records.map((station) => ({
+  stations.records.map((station, index) => ({
+    id: index + 1,
    name: station._name,
    description: station._opisanie,
    address: station._adress,
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -20,11 +20,11 @@ export default async function Home() {
    <main>
      <HeroSection />
      <StatsSection />
-      <MapSection />
+      <MapSection stations={mainPageData.stations} />
      <AboutSection />
-      <PromotionsSection />
-      <VacanciesSection />
-      <PartnersSection />
+      <PromotionsSection discounts={mainPageData.discounts} />
+      <VacanciesSection jobs={mainPageData.jobs} />
+      <PartnersSection partners={mainPageData.partners} />
      <CharitySection />
      <CtaSection />
    </main>
--- a/src/features/map/model/index.ts
+++ b/src/features/map/model/index.ts
@ -0,0 +1,4 @@
+export type Point = {
+  id: number;
+  coordinates: [number, number];
+};
--- a/src/features/map/ui/gas-station-map.tsx
+++ b/src/features/map/ui/gas-station-map.tsx
@ -10,6 +10,8 @@ import {
 } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';

+import { Stations } from '@/app/api-utlities/@types/main';
+
 import { useLanguage } from '@/shared/language';
 import { Badge } from '@/shared/shadcn-ui/badge';
 import { Button } from '@/shared/shadcn-ui/button';
@ -168,7 +170,13 @@ const allFilters = [
 // Extract unique cities from stations
 const allCities = [...new Set(stations.map((station) => station.city))].sort();

-export default function GasStationMap() {
+interface GasStationMapProps {
+  stations: Stations;
+}
+
+export default function GasStationMap({
+  stations: _stations,
+}: GasStationMapProps) {
  const { t } = useLanguage();
  const mapRef = useRef<HTMLDivElement>(null);
  const [activeFilters, setActiveFilters] = useState<string[]>([]);
--- a/src/features/map/ui/yandex-map.tsx
+++ b/src/features/map/ui/yandex-map.tsx
@ -0,0 +1,38 @@
+'use client';
+
+import { Map, Placemark, YMaps } from '@pbe/react-yandex-maps';
+
+import { Point } from '../model';
+
+type YandexMapProps = {
+  points: Point[];
+};
+
+export const YandexMap = ({ points }: YandexMapProps) => {
+  return (
+    <YMaps
+      query={{
+        apikey: process.env.YANDEX_MAP_API_KEY,
+        lang: 'ru_RU',
+      }}
+    >
+      <Map
+        defaultState={{
+          center: points[0].coordinates || [55.751574, 37.573856], // центр карты,
+          zoom: 11,
+        }}
+        className='rounded-md shadow-lg'
+        options={{
+          suppressMapOpenBlock: true,
+          suppressObsoleteBrowserNotifier: true,
+        }}
+        width={'100%'}
+        height={'500px'}
+      >
+        {points.map((point) => (
+          <Placemark key={point.id} geometry={point.coordinates} />
+        ))}
+      </Map>
+    </YMaps>
+  );
+};
--- a/src/shared/components/promotion-slider.tsx
+++ b/src/shared/components/promotion-slider.tsx
@ -1,12 +1,15 @@
 'use client';

-import { ChevronLeft, ChevronRight} from 'lucide-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import Image from 'next/image';
+import Link from 'next/link';
 import { useEffect, useState } from 'react';

+import { Discounts } from '@/app/api-utlities/@types/main';
+
 import { Button } from '@/shared/shadcn-ui/button';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';
-import Link from 'next/link';
+
 import { useLanguage } from '../language';

 const promotions = [
@ -41,11 +44,15 @@ const promotions = [
  },
 ];

-export default function PromotionSlider() {
+interface PromotionSliderProps {
+  discounts: Discounts;
+}
+
+export default function PromotionSlider({ discounts }: PromotionSliderProps) {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [visibleItems, setVisibleItems] = useState(3);

-  const { t } = useLanguage()
+  const { t } = useLanguage();

  useEffect(() => {
    const handleResize = () => {
@ -85,7 +92,7 @@ export default function PromotionSlider() {
          transform: `translateX(-${currentIndex * (100 / visibleItems)}%)`,
        }}
      >
-        {promotions.map((promo) => (
+        {discounts.map((promo) => (
          <div
            key={promo.id}
            className='w-full flex-none p-2 sm:w-1/2 lg:w-1/3'
@ -96,53 +103,59 @@ export default function PromotionSlider() {
              <div className='relative h-48'>
                <Image
                  src={promo.image || '/placeholder.svg'}
-                  alt={promo.title}
+                  alt={promo.name}
                  fill
                  className='object-cover'
                />
              </div>
              <CardContent className='p-4'>
-                <h3 className='mb-2 text-lg font-bold'>{promo.title}</h3>
+                <h3 className='mb-2 text-lg font-bold'>{promo.name}</h3>
                <p className='mb-3 text-sm text-gray-600'>
                  {promo.description}
                </p>
                <div className='flex items-center justify-between'>
                  <span className='text-xs text-gray-500'>
-                    Действует до: {promo.validUntil}
+                    {promo.expiresAt
+                      ? `Действует до: ${promo.expiresAt}`
+                      : null}
                  </span>
-                <Link href='#'>
-                  <Button
+                  <Link href='#'>
+                    <Button
                      variant='outline'
                      size='sm'
                      className='border-red-600 text-red-600 hover:bg-red-50'
                    >
                      {t('common.buttons.readMore')}
                    </Button>
-                </Link>
+                  </Link>
                </div>
              </CardContent>
            </Card>
          </div>
        ))}
      </div>
-      <Button
-        variant='outline'
-        size='icon'
-        className='absolute top-1/2 left-0 z-10 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
-        onClick={prevSlide}
-      >
-        <ChevronLeft className='h-4 w-4' />
-        <span className='sr-only'>Предыдущий</span>
-      </Button>
-      <Button
-        variant='outline'
-        size='icon'
-        className='absolute top-1/2 right-0 z-10 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
-        onClick={nextSlide}
-      >
-        <ChevronRight className='h-4 w-4' />
-        <span className='sr-only'>Следующий</span>
-      </Button>
+      {discounts.length > 3 && (
+        <>
+          <Button
+            variant='outline'
+            size='icon'
+            className='absolute top-1/2 left-0 z-10 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
+            onClick={prevSlide}
+          >
+            <ChevronLeft className='h-4 w-4' />
+            <span className='sr-only'>Предыдущий</span>
+          </Button>
+          <Button
+            variant='outline'
+            size='icon'
+            className='absolute top-1/2 right-0 z-10 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
+            onClick={nextSlide}
+          >
+            <ChevronRight className='h-4 w-4' />
+            <span className='sr-only'>Следующий</span>
+          </Button>
+        </>
+      )}
    </div>
  );
 }
--- a/src/widgets/map-section.tsx
+++ b/src/widgets/map-section.tsx
@ -2,13 +2,26 @@

 import { MapPin } from 'lucide-react';

+import { Stations } from '@/app/api-utlities/@types/main';
+
 import { GasStationMap } from '@/features/map';
+import { Point } from '@/features/map/model';
+import { YandexMap } from '@/features/map/ui/yandex-map';

 import { useLanguage } from '@/shared/language';

-export const MapSection = () => {
+interface MapSectionProps {
+  stations: Stations;
+}
+
+export const MapSection = ({ stations }: MapSectionProps) => {
  const { t } = useLanguage();

+  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'>
@ -27,7 +40,8 @@ export const MapSection = () => {
          className='h-[500px] overflow-hidden rounded-xl border shadow-lg'
          data-aos='fade-up'
        >
-          <GasStationMap />
+          <GasStationMap stations={stations} />
+          {/* <YandexMap points={points} /> */}
        </div>
      </div>
    </section>
--- a/src/widgets/partners-section.tsx
+++ b/src/widgets/partners-section.tsx
@ -4,10 +4,16 @@ import { Handshake } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';

+import { Partners } from '@/app/api-utlities/@types/main';
+
 import { useLanguage } from '@/shared/language';
 import { Button } from '@/shared/shadcn-ui/button';

-export const PartnersSection = () => {
+interface PartnersSectionProps {
+  partners: Partners;
+}
+
+export const PartnersSection = ({ partners }: PartnersSectionProps) => {
  const { t } = useLanguage();

  return (
@ -26,20 +32,23 @@ export const PartnersSection = () => {
        </div>

        <div className='grid grid-cols-2 gap-4 sm:gap-8 md:grid-cols-4'>
-          {[1, 2, 3, 4, 5, 6, 7, 8].map((partner) => (
+          {partners.map(({ id, name, poster }) => (
            <div
-              key={partner}
+              key={id}
              className='flex h-32 flex-col items-center justify-center gap-0.5 rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'
              data-aos='flip-left'
            >
              <Image
-                src={`/placeholder.svg?height=80&width=160&text=Partner ${partner}`}
-                alt={`Partner ${partner}`}
+                src={
+                  poster ??
+                  `/placeholder.svg?height=80&width=160&text=Partner ${id}`
+                }
+                alt={`Partner ${id}`}
                width={160}
                height={80}
                className='max-h-16 w-auto'
              />
-              <h4 className='font-extralight'>Название</h4>
+              <h4 className='font-extralight'>{name}</h4>
            </div>
          ))}
        </div>
--- a/src/widgets/promotions-section.tsx
+++ b/src/widgets/promotions-section.tsx
@ -2,14 +2,20 @@

 import { Gift } from 'lucide-react';

+import { Discounts } from '@/app/api-utlities/@types/main';
+
 import PromotionSlider from '@/shared/components/promotion-slider';
 import { useLanguage } from '@/shared/language';

-export const PromotionsSection = () => {
+interface PromotionsSectionProps {
+  discounts: Discounts;
+}
+
+export const PromotionsSection = ({ discounts }: PromotionsSectionProps) => {
  const { t } = useLanguage();

  return (
-    <section id='promotions' className='bg-gray-50 py-8 px-2 sm:py-16'>
+    <section id='promotions' className='bg-gray-50 px-2 py-8 sm: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'>
@ -22,7 +28,7 @@ export const PromotionsSection = () => {
            {t('home.promotions.description')}
          </p>
        </div>
-        <PromotionSlider />
+        <PromotionSlider discounts={discounts} />
      </div>
    </section>
  );
--- a/src/widgets/vacancies-section.tsx
+++ b/src/widgets/vacancies-section.tsx
@ -2,6 +2,8 @@

 import { Briefcase } from 'lucide-react';

+import { Jobs } from '@/app/api-utlities/@types/main';
+
 import { useLanguage } from '@/shared/language';
 import { cn } from '@/shared/lib/utils';
 import { Badge } from '@/shared/shadcn-ui/badge';
@ -14,9 +16,24 @@ import {
  TabsTrigger,
 } from '@/shared/shadcn-ui/tabs';

-export const VacanciesSection = () => {
+interface VacanciesSectionProps {
+  jobs: Jobs;
+}
+
+export const VacanciesSection = ({ jobs }: VacanciesSectionProps) => {
  const { t } = useLanguage();

+  const jobsByType = new Map();
+
+  jobs.forEach((job) => {
+    const existing = jobsByType.get(job.type) || [];
+    jobsByType.set(job.type, [...existing, job]);
+  });
+
+  const allVacancies = t('home.vacancies.all');
+
+  const jobsTabsTitle = [allVacancies, ...Array.from(jobsByType.keys())];
+
  return (
    <section id='vacancies' className='px-2 py-8 sm:py-16'>
      <div className='container mx-auto'>
@ -32,53 +49,38 @@ export const VacanciesSection = () => {
          </p>
        </div>

-        <Tabs defaultValue='all' className='mx-auto w-full max-w-3xl'>
+        <Tabs defaultValue={allVacancies} className='mx-auto w-full max-w-3xl'>
          <TabsList className='mb-8 grid grid-cols-3'>
-            <TabsTrigger value='all'>{t('home.vacancies.all')}</TabsTrigger>
-            <TabsTrigger value='office'>{t('home.vacancies.office')}</TabsTrigger>
-            <TabsTrigger value='stations'>{t('home.vacancies.stations')}</TabsTrigger>
+            {jobsTabsTitle.map((type) => (
+              <TabsTrigger key={type} value={type}>
+                {type}
+              </TabsTrigger>
+            ))}
          </TabsList>
-          <TabsContent value='all' className='space-y-4'>
-            {[
-              'Оператор АЗС',
-              'Менеджер по продажам',
-              'Бухгалтер',
-              'Специалист по логистике',
-            ].map((job, index) => (
+
+          <TabsContent value={allVacancies} className='space-y-4'>
+            {jobs.map((job, index) => (
              <Vacancy
                key={index}
-                jobTitle={job}
-                location='Душанбе, Таджикистан'
-                tags={['Полный день', 'Опыт от 1 года']}
+                jobTitle={job.name}
+                location={job.location ?? ''}
+                tags={job.tags}
              />
            ))}
          </TabsContent>
-          <TabsContent value='office' className='space-y-4'>
-            {[
-              'Менеджер по продажам',
-              'Бухгалтер',
-              'Специалист по логистике',
-            ].map((job, index) => (
-              <Vacancy
-                key={index}
-                jobTitle={job}
-                location='Душанбе, Таджикистан'
-                tags={['Полный день', 'Опыт от 1 года']}
-              />
-            ))}
-          </TabsContent>
-          <TabsContent value='stations' className='space-y-4'>
-            {['Оператор АЗС', 'Заправщик', 'Менеджер станции'].map(
-              (job, index) => (
+
+          {Array.from(jobsByType.entries()).map(([type, jobs]) => (
+            <TabsContent key={type} value={type} className='space-y-4'>
+              {jobs.map((job: Jobs[number], index: number) => (
                <Vacancy
                  key={index}
-                  jobTitle={job}
-                  location='Душанбе, Таджикистан'
-                  tags={['Сменный график', 'Обучение']}
+                  jobTitle={job.name}
+                  location={job.location ?? ''}
+                  tags={job.tags}
                />
-              ),
-            )}
-          </TabsContent>
+              ))}
+            </TabsContent>
+          ))}
        </Tabs>
      </div>
    </section>