static

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;