Footer.jsx

1import styles from './Footer.module.css';
2import { useEffect, useState } from 'react';
3import { FiSun, FiMoon, FiMonitor } from 'react-icons/fi';
4
5export default function Footer() {
6  const [theme, setTheme] = useState('system');
7
8  const applyTheme = (selected) => {
9    if (selected === 'system') {
10      const prefersDark = window.matchMedia(
11        '(prefers-color-scheme: dark)',
12      ).matches;
13      document.documentElement.setAttribute(
14        'data-theme',
15        prefersDark ? 'dark' : 'light',
16      );
17    } else {
18      document.documentElement.setAttribute('data-theme', selected);
19    }
20  };
21
22  useEffect(() => {
23    const stored = localStorage.getItem('theme');
24    const initialTheme =
25      stored === 'light' || stored === 'dark' ? stored : 'system';
26    setTheme(initialTheme);
27    applyTheme(initialTheme);
28
29    const media = window.matchMedia('(prefers-color-scheme: dark)');
30    const listener = () => {
31      if (theme === 'system') applyTheme('system');
32    };
33    media.addEventListener('change', listener);
34    return () => media.removeEventListener('change', listener);
35  }, [theme]);
36
37  const setAndStoreTheme = (selected) => {
38    setTheme(selected);
39    localStorage.setItem('theme', selected);
40    applyTheme(selected);
41  };
42
43  return (
44    <footer className={styles.footer}>
45      <p>&copy; 2025 | Learning React</p>
46      <div className={styles.themeIcons}>
47        <button
48          onClick={() => setAndStoreTheme('light')}
49          className={`${styles.iconButton} ${
50            theme === 'light' ? styles.active : ''
51          }`}
52          aria-label="Set light theme"
53        >
54          <FiSun />
55        </button>
56        <button
57          onClick={() => setAndStoreTheme('dark')}
58          className={`${styles.iconButton} ${
59            theme === 'dark' ? styles.active : ''
60          }`}
61          aria-label="Set dark theme"
62        >
63          <FiMoon />
64        </button>
65        <button
66          onClick={() => setAndStoreTheme('system')}
67          className={`${styles.iconButton} ${
68            theme === 'system' ? styles.active : ''
69          }`}
70          aria-label="Use system theme"
71        >
72          <FiMonitor />
73        </button>
74      </div>
75    </footer>
76  );
77}