ThemeIndicator.tsx

Go to the documentation of this file.

"use client";
 
import { useTheme } from '@/contexts/ThemeContext';
import { useIcon } from '@/contexts/IconContext';
import Link from 'next/link';
 
export default function ThemeIndicator() {
  const { theme, themeId } = useTheme();
  const { iconTheme } = useIcon();
 
  return (
    <Link 
      href="/pages/settings"
      className="fixed bottom-4 right-4 z-50 group"
      title={`Theme: ${theme.name} | Icons: ${iconTheme.name}`}
    >
      <div 
        className="p-3 rounded-full shadow-lg transition-all duration-300 group-hover:scale-110 cursor-pointer"
        style={{ 
          background: theme.colors.brand,
          boxShadow: `0 8px 24px ${theme.colors.brand}40, 0 0 0 0 ${theme.colors.brand}20`,
        }}
      >
        <div className="flex items-center gap-2">
          <div className="flex gap-1">
            <div 
              className="w-4 h-4 rounded-full"
              style={{ background: theme.colors.brand }}
            />
            <div 
              className="w-4 h-4 rounded-full"
              style={{ background: theme.colors.brand2 }}
            />
          </div>
          <span className="text-white font-semibold text-sm hidden group-hover:inline-block transition-all">
            {theme.name}
          </span>
        </div>
      </div>
      
      {/* Tooltip */}
      <div className="absolute bottom-full right-0 mb-2 px-3 py-2 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap"
        style={{ 
          background: theme.colors.surface,
          border: `2px solid ${theme.colors.brand}`,
          color: theme.colors.text,
        }}
      >
        <p className="text-sm font-semibold">🎨 {theme.name}</p>
        <p className="text-xs mb-1" style={{ color: theme.colors.muted }}>
          Theme
        </p>
        <p className="text-sm font-semibold">🎭 {iconTheme.name}</p>
        <p className="text-xs" style={{ color: theme.colors.muted }}>
          Click to change
        </p>
      </div>
    </Link>
  );
}