/* Hero — the menu-bar popover mockup is the showpiece */ const MenuBarPopover = ({ active = 'A' }) => { const slots = [ { id: 'A', shortcut: ['⌘', 'C'], paste: ['⌘', 'V'], preview: 'github.com/RAKKUNN/DualClip', kind: 'link' }, { id: 'B', shortcut: ['⌥', '⌘', 'C'], paste: ['⌥', '⌘', 'V'], preview: 'const handlePaste = async () => {\n const text = await navigator.clipboard.readText()', kind: 'code' }, { id: 'C', shortcut: ['⌃', '⌘', 'C'], paste: ['⌃', '⌘', 'V'], preview: '— image —', kind: 'image' }, ]; return (
DualClip
RAM-only · idle
{slots.map(s => (
{s.id}
Slot {s.id}
{s.kind === 'image' ? (
PNG · 1.2 MB
) : ( {s.preview} )}
))}
Press to stash · to recall
); }; const HEADLINE_VARIANTS = { "zero-history": <>Three clipboards.
Zero history., "where-not-when": <>Where, not when., "by-the-letter": <>Stash by the letter.
A, B, or C., }; const Hero = ({ headlineVariant = 'zero-history', showShortcuts = true }) => { const [activeSlot, setActiveSlot] = React.useState('A'); React.useEffect(() => { const i = setInterval(() => { setActiveSlot(s => (s === 'A' ? 'B' : s === 'B' ? 'C' : 'A')); }, 2400); return () => clearInterval(i); }, []); return (
); }; const Nav = () => { const [theme, setTheme] = React.useState('dark'); React.useEffect(() => { document.documentElement.setAttribute('data-theme', theme); }, [theme]); return ( ); }; Object.assign(window, { Hero, Nav, MenuBarPopover });