fix: marquee (use client)

iv-stpn · May 23, 2024 · 4090217 · 4090217
1 parent 8b2d526
commit 4090217
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 16 deletions.
diff --git a/app/[locale]/_elements/LogoMarquee.tsx b/app/[locale]/_elements/LogoMarquee.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import Marquee from "react-fast-marquee";
 import ApacheSparkLogo from "../../../public/logos/apache-spark.svg";
 import AzureLogo from "../../../public/logos/azure.svg";
@@ -9,26 +11,20 @@ import PandasLogo from "../../../public/logos/pandas.svg";
 import ScalaLogo from "../../../public/logos/scala.svg";
 import TypeScriptLogo from "../../../public/logos/typescript.svg";
 
-const logos = [
-    ApacheSparkLogo,
-    KubernetesLogo,
-    NextJSLogo,
-    NestJSLogo,
-    PandasLogo,
-    ScalaLogo,
-    TypeScriptLogo,
-    AzureLogo,
-    HadoopLogo,
-];
-
 export type LogoMarqueeProps = { className?: string };
 export default function LogoMarquee({ className }: Readonly<LogoMarqueeProps>) {
     return (
         <div className={className}>
             <Marquee direction="left" gradient speed={40} gradientWidth={48}>
-                {logos.map((Svg, idx) => (
-                    <Svg key={idx} className="h-10 px-2 mx-6" />
-                ))}
+                <ApacheSparkLogo className="h-10 px-2 mx-6" />
+                <KubernetesLogo className="h-10 px-2 mx-6" />
+                <NextJSLogo className="h-10 px-2 mx-6" />
+                <NestJSLogo className="h-10 px-2 mx-6" />
+                <PandasLogo className="h-10 px-2 mx-6" />
+                <ScalaLogo className="h-10 px-2 mx-6" />
+                <TypeScriptLogo className="h-10 px-2 mx-6" />
+                <AzureLogo className="h-10 px-2 mx-6" />
+                <HadoopLogo className="h-10 px-2 mx-6" />
             </Marquee>
         </div>
     );

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -3,7 +3,7 @@ import { SpeedInsights } from "@vercel/speed-insights/next";
 import Footer from "app/components/Footer";
 import Header from "app/components/Header";
 import { baseUrl } from "app/utils/constants";
-import { clsx } from "clsx";
+import clsx from "clsx";
 import { NextIntlClientProvider } from "next-intl";
 import { getLocale, getMessages, getTranslations } from "next-intl/server";
 import { ThemeProvider } from "next-themes";