forked from jleibl/jleibl.net
57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import { useContext } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { ThemeContext } from '../../context/ThemeContext';
|
|
|
|
export const GermanyFlag = () => {
|
|
const { theme, setTheme } = useContext(ThemeContext);
|
|
|
|
return (
|
|
<motion.div
|
|
role="group"
|
|
aria-label="Theme switcher with German flag colors"
|
|
style={{
|
|
display: "inline-flex",
|
|
width: "3em",
|
|
height: "0.6em",
|
|
marginLeft: "0.1em",
|
|
verticalAlign: "middle",
|
|
borderRadius: "1px",
|
|
overflow: "hidden",
|
|
opacity: 0.6,
|
|
cursor: "pointer"
|
|
}}
|
|
whileHover={{
|
|
opacity: 0.8,
|
|
transition: { duration: 0.2 }
|
|
}}
|
|
>
|
|
<motion.button
|
|
aria-label="Switch to dark theme"
|
|
aria-pressed={theme === 'black'}
|
|
style={{ flex: 1, backgroundColor: "rgba(0, 0, 0, 0.5)", borderLeft: "2px solid rgba(255, 255, 255, 0.1)", borderTop: "2px solid rgba(255, 255, 255, 0.1)", borderBottom: "2px solid rgba(255, 255, 255, 0.1)" }}
|
|
onClick={() => setTheme('black')}
|
|
className={theme === 'black' ? 'ring-1 ring-white/20' : ''}
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
/>
|
|
<motion.button
|
|
aria-label="Switch to red theme"
|
|
aria-pressed={theme === 'red'}
|
|
style={{ flex: 1, backgroundColor: "rgba(255, 0, 0)" }}
|
|
onClick={() => setTheme('red')}
|
|
className={theme === 'red' ? 'ring-1 ring-white/20' : ''}
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
/>
|
|
<motion.button
|
|
aria-label="Switch to gold theme"
|
|
aria-pressed={theme === 'gold'}
|
|
style={{ flex: 1, backgroundColor: "rgba(255, 204, 0)" }}
|
|
onClick={() => setTheme('gold')}
|
|
className={theme === 'gold' ? 'ring-1 ring-white/20' : ''}
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
/>
|
|
</motion.div>
|
|
);
|
|
};
|