static

app/events/[slug]/page.tsx

@@ -1,39 +1,24 @@
-"use client";
+import React from 'react';
-import React, { useState, useEffect } from 'react';
 import Breadcrumbs from "@/components/breadcrumb";
 import InfoBlock from "@/components/info-block";
 import NavSection from "@/components/nav-section";
-import InfoItem from "@/components/info-item";
-import HumanCard from "@/components/human-card";
 import SocialItem from "@/components/social-item";
+import ClientComponent from "@/components/client-component";
 
-// export async function generateStaticParams() {
+export async function generateStaticParams() {
-//     // Моканные данные мероприятий
+    // Моканные данные мероприятий
-//     const events = [
+    const events = [
-//         { slug: 'event-1' },
+        { slug: 'event-1' },
-//         { slug: 'event-2' },
+        { slug: 'event-2' },
-//         { slug: 'event-3' },
+        { slug: 'event-3' },
-//     ];
+    ];
-//
+
-//     return events.map(event => ({
+    return events.map(event => ({
-//         slug: event.slug,
+        slug: event.slug,
-//     }));
+    }));
-// }
+}
 
 export default function Page() {
-    const [isLg, setIsLg] = useState(false);
-
-    useEffect(() => {
-        const handleResize = () => {
-            setIsLg(window.innerWidth >= 1024);
-        };
-
-        // Устанавливаем значение при первом рендере
-        handleResize();
-
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, []);
 
     const infoItems = [
         {
@@ -73,17 +58,7 @@ export default function Page() {
                 <p className="text-white text-[40px] text-center uppercase leading-[48px]">Базовая программа подготовки гештальт-терапевтов — добор</p>
             </div>
             <div className="flex flex-col m-auto max-w-[1083px] px-[25px] gap-[50px] mb-[80px]">
-                <div className="flex gap-[10px] flex-wrap lg:gap-[23px] lg:justify-between">
+                <ClientComponent infoItems={infoItems} humanCards={humanCards} />
-                    {infoItems.map((item, index) => {
-                        return <InfoItem variable="secondary" name={item.name} pathImg={item?.img} key={index}/>
-                    })}
-                </div>
-                <div className="flex justify-center flex-wrap lg:flex-nowrap lg:justify-between gap-[18px]">
-                    {humanCards.map((card, index) => {
-                        return <HumanCard name={card.name} post={card.post} skills={card.skills} key={index}
-                                          variant={isLg ? "secondary" : undefined}/>
-                    })}
-                </div>
                 <div className="flex-wrap xl:flex-nowrap flex gap-[21px]">
                     <div
                         className="order-2 xl:order-1 items-center xl:items-start flex flex-col border-white border-[1px] rounded-[6px] w-full xl:min-w-[780px] min-h-[200px] px-[32px] justify-center gap-[12px]">

app/participants/[slug]/page.tsx

@@ -5,18 +5,18 @@ import InfoItem from "@/components/info-item";
 import Image from "next/image";
 import SocialItem from "@/components/social-item";
 
-// export async function generateStaticParams() {
+export async function generateStaticParams() {
-//     // Моканные данные участников
+    // Моканные данные участников
-//     const participants = [
+    const participants = [
-//         { slug: '1' },
+        { slug: '1' },
-//         { slug: '2' },
+        { slug: '2' },
-//         { slug: '3' },
+        { slug: '3' },
-//     ];
+    ];
-//
+
-//     return participants.map(participant => ({
+    return participants.map(participant => ({
-//         slug: participant.slug,
+        slug: participant.slug,
-//     }));
+    }));
-// }
+}
 
 export default function Page() {
     return(

components/client-component.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import InfoItem from "@/components/info-item";
+import HumanCard from "@/components/human-card";
+
+interface InfoItemProps {
+    name: string;
+    img?: string;
+}
+
+interface HumanCardProps {
+    name: string;
+    post: string;
+    skills: string[];
+}
+
+interface ClientComponentProps {
+    infoItems: InfoItemProps[];
+    humanCards: HumanCardProps[];
+}
+
+const ClientComponent: React.FC<ClientComponentProps> = ({ infoItems, humanCards }) => {
+    const [isLg, setIsLg] = useState(false);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setIsLg(window.innerWidth >= 1024);
+        };
+        // Устанавливаем значение при первом рендере
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return (
+        <>
+            <div className="flex gap-[10px] flex-wrap lg:gap-[23px] lg:justify-between">
+                {infoItems.map((item, index) => (
+                    <InfoItem key={index} variable="secondary" name={item.name} pathImg={item.img} />
+                ))}
+            </div>
+            <div className="flex justify-center flex-wrap lg:flex-nowrap lg:justify-between gap-[18px]">
+                {humanCards.map((card, index) => (
+                    <HumanCard
+                        key={index}
+                        name={card.name}
+                        post={card.post}
+                        skills={card.skills}
+                        variant={isLg ? "secondary" : undefined}
+                    />
+                ))}
+            </div>
+        </>
+    );
+};
+
+export default ClientComponent;

next.config.ts

@@ -1,7 +1,13 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-    // output: 'export'
+    output: 'export'
+};
+
+module.exports = {
+    images: {
+        unoptimized: true,
+    },
 };
 
 export default nextConfig;