Initial commit - frontend

src/components/ThemeToggle.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Tooltip, IconButton } from '@mui/material';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import { useThemeMode } from '@/context/ThemeContext';
+
+export default function ThemeToggle({ className = '' }: { className?: string }) {
+  const { darkMode, toggle } = useThemeMode(); 
+
+  return (
+    <Tooltip title={`Switch to ${darkMode ? 'light' : 'dark'} mode`}>
+      <IconButton onClick={toggle} color="inherit" className={className}>
+        {darkMode ? <LightModeIcon /> : <DarkModeIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+}