feat: refactor logo component to use dynamic imports for assets and remove theme prop

src/app/login/page.tsx

@@ -35,7 +35,6 @@ export default async function LoginPage() {
               <Logo
                 colorType='colored'
                 logoType='secondary'
-                theme='light'
                 width={200}
                 height={200}
               ></Logo>

src/components/logo.tsx

@@ -1,8 +1,26 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Image, { ImageProps } from 'next/image';
 
+import logo_colored_combo_light from '@/assets/logo/logo_colored_combo_light.svg';
+import logo_colored_combo_dark from '@/assets/logo/logo_colored_combo_dark.svg';
+import logo_colored_primary_light from '@/assets/logo/logo_colored_primary_light.svg';
+import logo_colored_primary_dark from '@/assets/logo/logo_colored_primary_dark.svg';
+import logo_colored_secondary_light from '@/assets/logo/logo_colored_secondary_light.svg';
+import logo_colored_secondary_dark from '@/assets/logo/logo_colored_secondary_dark.svg';
+import logo_mono_combo_light from '@/assets/logo/logo_mono_combo_light.svg';
+import logo_mono_combo_dark from '@/assets/logo/logo_mono_combo_dark.svg';
+import logo_mono_primary_light from '@/assets/logo/logo_mono_primary_light.svg';
+import logo_mono_primary_dark from '@/assets/logo/logo_mono_primary_dark.svg';
+import logo_mono_secondary_light from '@/assets/logo/logo_mono_secondary_light.svg';
+import logo_mono_secondary_dark from '@/assets/logo/logo_mono_secondary_dark.svg';
+import logo_mono_submark_light from '@/assets/logo/logo_mono_submark_light.svg';
+import logo_mono_submark_dark from '@/assets/logo/logo_mono_submark_dark.svg';
+import logo_colored_submark_light from '@/assets/logo/logo_colored_submark_light.svg';
+import logo_colored_submark_dark from '@/assets/logo/logo_colored_submark_dark.svg';
+import { useTheme } from 'next-themes';
+
 type ColorType = 'colored' | 'monochrome';
 type LogoType = 'combo' | 'primary' | 'secondary' | 'submark';
 type Theme = 'light' | 'dark';
@@ -10,7 +28,7 @@ type Theme = 'light' | 'dark';
 interface LogoProps extends Omit<ImageProps, 'src' | 'alt'> {
   colorType: ColorType;
   logoType: LogoType;
-  theme: Theme;
+  overrideTheme?: Theme;
   alt?: string;
 }
 
@@ -20,14 +38,32 @@ const IMAGE_EXTENSION = 'svg';
 export default function Logo({
   colorType,
   logoType,
-  theme,
+  overrideTheme,
   alt,
   className = '',
   width,
   height,
-  onError,
+  // onError,
   ...imageProps
 }: LogoProps) {
+  const [mounted, setMounted] = useState(false);
+  let { resolvedTheme: theme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (overrideTheme) {
+    theme = overrideTheme;
+  }
+
+  // Prevent rendering until mounted (theme is available)
+  if (!mounted && !overrideTheme) {
+    return null;
+  }
+
+  console.log(colorType, logoType, theme);
+
   if (!colorType || !logoType || !theme) {
     const errorMessage =
       'Logo: colorType, logoType, and theme props are required.';
@@ -49,25 +85,39 @@ export default function Logo({
   }
 
   const colorTypeInFilename = colorType === 'monochrome' ? 'mono' : colorType;
-  const filename = `logo_${colorTypeInFilename}_${logoType}_${theme}.${IMAGE_EXTENSION}`;
-  const logoUrl = `${LOGO_BASE_PATH}${filename}`;
   const defaultAltText = `Logo: ${colorType} ${logoType} ${theme}`;
+  const varName = `logo_${colorTypeInFilename}_${logoType}_${theme}`;
 
-  const handleImageError: ImageProps['onError'] = (e) => {
+  const logoAssets = {
-    console.error(`Error loading logo via next/image: ${logoUrl}`, e);
+    logo_colored_combo_light,
-    if (onError) {
+    logo_colored_combo_dark,
-      onError(e);
+    logo_colored_primary_light,
-    }
+    logo_colored_primary_dark,
+    logo_colored_secondary_light,
+    logo_colored_secondary_dark,
+    logo_mono_combo_light,
+    logo_mono_combo_dark,
+    logo_mono_primary_light,
+    logo_mono_primary_dark,
+    logo_mono_secondary_light,
+    logo_mono_secondary_dark,
+    logo_mono_submark_light,
+    logo_mono_submark_dark,
+    logo_colored_submark_light,
+    logo_colored_submark_dark,
   };
 
+  // Match the varName with the Logo-Asset name and store it in "logoVar"
+  const logoVar = logoAssets[varName as keyof typeof logoAssets];
+
   return (
     <Image
-      src={logoUrl}
+      src={logoVar}
       alt={alt || defaultAltText}
       className={className}
       width={width}
       height={height}
-      onError={handleImageError}
+      // onError={handleImageError}
       {...imageProps}
     />
   );