ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
byarielm.fyi
atproto
1import { Sun, Moon, Pause, Play } from "lucide-react";
2
3interface ThemeControlsProps {
4 isDark: boolean;
5 reducedMotion: boolean;
6 onToggleTheme: () => void;
7 onToggleMotion: () => void;
8}
9
10export default function ThemeControls({
11 isDark,
12 reducedMotion,
13 onToggleTheme,
14 onToggleMotion,
15}: ThemeControlsProps) {
16 return (
17 <div className="flex items-center space-x-2">
18 <button
19 onClick={onToggleMotion}
20 className="p-2 bg-white/90 dark:bg-slate-800/90 backdrop-blur-sm rounded-lg border border-slate-200 dark:border-slate-700 hover:bg-white dark:hover:bg-slate-700 transition-colors shadow-lg"
21 aria-label={reducedMotion ? "Enable animations" : "Reduce motion"}
22 title={reducedMotion ? "Enable animations" : "Reduce motion"}
23 >
24 {reducedMotion ? (
25 <Play className="w-5 h-5 text-slate-700 dark:text-slate-300" />
26 ) : (
27 <Pause className="w-5 h-5 text-slate-700 dark:text-slate-300" />
28 )}
29 </button>
30 <button
31 onClick={onToggleTheme}
32 className="p-2 bg-white/90 dark:bg-slate-800/90 backdrop-blur-sm rounded-lg border border-slate-200 dark:border-slate-700 hover:bg-white dark:hover:bg-slate-700 transition-colors shadow-lg"
33 aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
34 >
35 {isDark ? (
36 <Sun className="w-5 h-5 text-firefly-amber" />
37 ) : (
38 <Moon className="w-5 h-5 text-slate-700" />
39 )}
40 </button>
41 </div>
42 );
43}