fix build

Author: davemooreuws

src/components/LanguageSwitch/LanguageSwitch.client.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import useLang, { LanguageId } from '@/hooks/useLang'
+import { cn } from '@/lib/utils'
+import React from 'react'
+import { Button } from '../ui/button'
+
+export const LanguageSwitchClient = ({
+  languages,
+}: {
+  languages: { name: string; icon: React.ReactNode }[]
+}) => {
+  const { currentLanguage, setCurrentLanguage } = useLang()
+
+  return (
+    <ul className="flex gap-x-4">
+      {languages.map(({ name, icon }) => (
+        <li
+          key={name}
+          className={cn(
+            'cursor-pointer transition-all',
+            currentLanguage !== name ? 'grayscale hover:grayscale-0' : '',
+          )}
+        >
+          <Button
+            variant="unstyled"
+            onClick={() => setCurrentLanguage(name as LanguageId)}
+          >
+            {icon}
+            <span className="sr-only">set language to {name}</span>
+          </Button>
+        </li>
+      ))}
+    </ul>
+  )
+}

src/components/LanguageSwitch.tsx renamed to src/components/LanguageSwitch/LanguageSwitch.tsx

@@ -1,16 +1,13 @@
-'use client'
-
-import useLang, { LanguageId } from '@/hooks/useLang'
-import { cn } from '@/lib/utils'
-import React from 'react'
-import { Button } from './ui/button'
+import React, { Suspense } from 'react'
 import JavaScriptLogoColour from '@/components/icons/JavaScriptLogoColour'
 import TypeScriptLogoColour from '@/components/icons/TypeScriptLogoColour'
 import PythonColorLogo from '@/components/icons/PythonLogoColour'
 import GoColorLogo from '@/components/icons/GoLogoColour'
 import DartLogoNoTextColour from '@/components/icons/DartLogoNoTextColour'
+import { LanguageSwitchClient } from './LanguageSwitch.client'
+import { Button } from '../ui/button'
 
-const languages = [
+const languages: { name: string; icon: React.ReactNode }[] = [
   {
     name: 'javascript',
     icon: <JavaScriptLogoColour className={'size-8'} />,
@@ -34,27 +31,27 @@ const languages = [
 ]
 
 export const LanguageSwitch = () => {
-  const { currentLanguage, setCurrentLanguage } = useLang()
-
   return (
-    <ul className="flex gap-x-4">
-      {languages.map(({ name, icon }) => (
-        <li
-          key={name}
-          className={cn(
-            'cursor-pointer transition-all',
-            currentLanguage !== name ? 'grayscale hover:grayscale-0' : '',
-          )}
-        >
-          <Button
-            variant="unstyled"
-            onClick={() => setCurrentLanguage(name as LanguageId)}
-          >
-            {icon}
-            <span className="sr-only">set language to {name}</span>
-          </Button>
-        </li>
-      ))}
-    </ul>
+    <Suspense
+      fallback={
+        <ul className="flex gap-x-4">
+          {languages.map(({ name, icon }) => (
+            <li
+              key={name}
+              className={
+                'cursor-pointer grayscale transition-all hover:grayscale-0'
+              }
+            >
+              <Button variant="unstyled">
+                {icon}
+                <span className="sr-only">set language to {name}</span>
+              </Button>
+            </li>
+          ))}
+        </ul>
+      }
+    >
+      <LanguageSwitchClient languages={languages} />
+    </Suspense>
   )
 }

src/components/LanguageSwitch/index.ts

@@ -0,0 +1 @@
+export { LanguageSwitch } from './LanguageSwitch'

src/components/guides/GuideFilters.tsx

@@ -18,9 +18,7 @@ export const GuideFilters: React.FC<Props> = ({ allTags }) => {
           </li>
         ))}
       </ul>
-      <Suspense>
-        <LanguageSwitch />
-      </Suspense>
+      <LanguageSwitch />
     </>
   )
 }