Logo

1'use client';
2 
3import React, { useEffect, useState } from 'react';
4import { useTheme } from 'next-themes';
5import Image from 'next/image';
6import { cn } from '@/lib/utils/deso';
7 
8export interface LogoProps {
9  className?: string;
10  width?: number;
11  height?: number;
12}
13 
14export const Logo: React.FC<LogoProps> = ({
15  className,
16  width = 120,
17  height = 40,
18}) => {
19  const { theme, resolvedTheme } = useTheme();
20  const [mounted, setMounted] = useState(false);
21 
22  // Only render after mounting to avoid hydration mismatch
23  useEffect(() => {
24    setMounted(true);
25  }, []);
26 
27  // Determine if we're in dark mode
28  const getDarkMode = () => {
29    if (!mounted) {
30      // During SSR/initial render, check if document has dark class
31      if (typeof document !== 'undefined') {
32        return document.documentElement.classList.contains('dark');
33      }
34      return false;
35    }
36    
37    // Use resolvedTheme which handles system preference, fallback to theme
38    const currentTheme = resolvedTheme || theme;
39    return currentTheme === 'dark';
40  };
41 
42  const isDark = getDarkMode();
43 
44  // Show a placeholder during initial render to avoid hydration mismatch
45  if (!mounted) {
46    return (
47      <div 
48        className={cn('relative bg-muted animate-pulse rounded', className)} 
49        style={{ width, height }}
50      />
51    );
52  }
53 
54  return (
55    <div className={cn('relative', className)} style={{ width, height }}>
56      <Image
57        src={isDark ? '/logo-dark.svg' : '/logo-light.svg'}
58        alt="DeSo Logo"
59        fill
60        style={{ objectFit: 'contain' }}
61        priority
62      />
63    </div>
64  );
65};