add types for language

Author: davemooreuws

src/components/guides/GuideItem.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { cn } from '@/lib/utils'
 import Link from 'next/link'
 import { LanguageIcon } from '../icons/LanguageIcon'
+import { Language } from '@/lib/constants'
 
 interface Props {
   guide: Doc
@@ -53,7 +54,11 @@ export const GuideItem: React.FC<Props> = ({ guide, featured }) => {
           {guide.languages?.length ? (
             <div className="ml-auto flex items-center gap-x-2">
               {guide.languages.map((lang) => (
-                <LanguageIcon key={lang} name={lang} className="size-6" />
+                <LanguageIcon
+                  key={lang}
+                  name={lang as Language}
+                  className="size-6"
+                />
               ))}
             </div>
           ) : null}

src/components/icons/LanguageIcon.tsx

@@ -5,13 +5,14 @@ import PythonColorLogo from './PythonLogoColour'
 import GoColorLogo from './GoLogoColour'
 import DartLogoNoTextColour from './DartLogoNoTextColour'
 import { cn } from '@/lib/utils'
+import type { Language } from '@/lib/constants'
 
 interface LanguageIconProps {
-  name: string
+  name: Language
   className?: string
 }
 
-const icons: Record<string, React.FC<{ className: string }>> = {
+const icons: Record<Language, React.FC<{ className: string }>> = {
   javascript: JavaScriptLogoColour,
   typescript: TypeScriptLogoColour,
   python: PythonColorLogo,
@@ -25,9 +26,5 @@ export const LanguageIcon: React.FC<LanguageIconProps> = ({
 }) => {
   const IconComponent = icons[name]
 
-  if (!IconComponent) {
-    return <span>Unknown language</span>
-  }
-
   return <IconComponent className={cn(`size-8`, className)} />
 }

src/lib/constants.ts

@@ -9,7 +9,15 @@ export const LANGUAGE_LABEL_MAP: Record<string, string> = {
   csharp: 'C#',
 }
 
-export const languages = ['javascript', 'typescript', 'python', 'go', 'dart']
+export const languages = [
+  'javascript',
+  'typescript',
+  'python',
+  'go',
+  'dart',
+] as const
+
+export type Language = (typeof languages)[number]
 
 export const isMobile =
   typeof navigator !== 'undefined' &&