refactor: organized component folder structure

fix: scrolling in login page

src/components/misc/logo.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import Image, { ImageProps } from 'next/image';
+
+import * as logoAssets from '@/assets/logo/logo-export';
+import { useTheme } from 'next-themes';
+
+type ColorType = 'colored' | 'monochrome';
+type LogoType = 'combo' | 'primary' | 'secondary' | 'submark';
+type Theme = 'light' | 'dark';
+
+interface LogoProps extends Omit<ImageProps, 'src' | 'alt'> {
+  colorType: ColorType;
+  logoType: LogoType;
+  overrideTheme?: Theme;
+  alt?: string;
+}
+
+const LOGO_BASE_PATH = '/assets/logo/';
+const IMAGE_EXTENSION = 'svg';
+
+export default function Logo({
+  colorType,
+  logoType,
+  overrideTheme,
+  alt,
+  className = '',
+  width,
+  height,
+  // onError,
+  ...imageProps
+}: LogoProps) {
+  const [mounted, setMounted] = useState(false);
+  let { resolvedTheme: theme } = useTheme() as {
+    resolvedTheme?: Theme;
+  };
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (overrideTheme) {
+    theme = overrideTheme;
+  }
+
+  // Prevent rendering until mounted (theme is available)
+  if (!mounted && !overrideTheme) {
+    return null;
+  }
+
+  if (!colorType || !logoType || !theme) {
+    const errorMessage =
+      'Logo: colorType, logoType, and theme props are required.';
+    console.error(errorMessage);
+    return (
+      <div
+        role='alert'
+        className='p-2 text-red-700 bg-red-100 border border-red-500 rounded-md text-xs'
+      >
+        Error: Missing required logo props. Check console.
+      </div>
+    );
+  }
+
+  if (width === undefined || height === undefined) {
+    console.warn(
+      `Logo: 'width' and 'height' props are required by next/image for ${logoType} logo. Path: ${LOGO_BASE_PATH}logo_${colorType}_${logoType}_${theme}.${IMAGE_EXTENSION}`,
+    );
+  }
+
+  const colorTypeInFilename = colorType === 'monochrome' ? 'mono' : colorType;
+  const defaultAltText = `Logo: ${colorType} ${logoType} ${theme}`;
+  const varName = `logo_${colorTypeInFilename}_${logoType}_${theme}` as const;
+
+  // Match the varName with the Logo-Asset name and store it in "logoVar"
+  const logoVar = logoAssets[varName];
+
+  if (!logoVar) {
+    console.error(`Logo: Could not find logo asset for ${varName}`);
+    return (
+      <div
+        role='alert'
+        className='p-2 text-red-700 bg-red-100 border border-red-500 rounded-md text-xs'
+      >
+        Error: Logo asset not found. Check console.
+      </div>
+    );
+  }
+
+  return (
+    <Image
+      src={logoVar}
+      alt={alt || defaultAltText}
+      className={className}
+      width={width}
+      height={height}
+      {...imageProps}
+    />
+  );
+}

src/components/misc/theme-picker.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import * as React from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+export function ThemePicker() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant='outline_primary' size='icon'>
+          <Sun className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
+          <Moon className='absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
+          <span className='sr-only'>Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end'>
+        <DropdownMenuItem onClick={() => setTheme('light')}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}