diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx new file mode 100644 index 0000000..d469608 --- /dev/null +++ b/src/components/Navbar/Navbar.tsx @@ -0,0 +1,132 @@ +import { useState } from 'react'; +import { useTheme } from '../../context/ThemeContext'; +import { BatchModal } from '../BatchModal'; + +function QRIcon() { + return ( + + + + + + + + + + + + + ); +} + +function SunIcon() { + return ( + + + + + + + + + + + + ); +} + +function MoonIcon() { + return ( + + + + ); +} + +const navBtnBase: React.CSSProperties = { + background: 'var(--bg-elevated)', + border: '1px solid var(--border-sub)', + color: 'var(--text-secondary)', + cursor: 'pointer', +}; + +export function Navbar() { + const { isDark, toggle } = useTheme(); + const [batchOpen, setBatchOpen] = useState(false); + + const onHover = (e: React.MouseEvent) => { + (e.currentTarget as HTMLElement).style.borderColor = 'rgba(124,111,224,0.5)'; + (e.currentTarget as HTMLElement).style.color = '#7C6FE0'; + }; + const onLeave = (e: React.MouseEvent) => { + (e.currentTarget as HTMLElement).style.borderColor = 'var(--border-sub)'; + (e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'; + }; + + return ( + <> + + + setBatchOpen(false)} /> + + ); +}