import React from 'react' import Link from 'next/link' import Head from 'next/head' import 'tailwindcss/tailwind.css' import { useDisposables } from '../src/hooks/use-disposables' import { PropsOf } from '../src/types' function NextLink(props: PropsOf<'a'>) { const { href, children, ...rest } = props return ( {children} ) } enum KeyDisplayMac { ArrowUp = '↑', ArrowDown = '↓', ArrowLeft = '←', ArrowRight = '→', Home = '↖', End = '↘', Alt = '⌥', CapsLock = '⇪', Meta = '⌘', Shift = '⇧', Control = '⌃', Backspace = '⌫', Delete = '⌦', Enter = '↵', Escape = '⎋', Tab = '↹', PageUp = '⇞', PageDown = '⇟', ' ' = '␣', } enum KeyDisplayWindows { ArrowUp = '↑', ArrowDown = '↓', ArrowLeft = '←', ArrowRight = '→', Meta = 'Win', Control = 'Ctrl', Backspace = '⌫', Delete = 'Del', Escape = 'Esc', PageUp = 'PgUp', PageDown = 'PgDn', ' ' = '␣', } function tap(value: T, cb: (value: T) => void) { cb(value) return value } function useKeyDisplay() { const [mounted, setMounted] = React.useState(false) React.useEffect(() => { setMounted(true) }, []) if (!mounted) return {} const isMac = navigator.userAgent.indexOf('Mac OS X') !== -1 return isMac ? KeyDisplayMac : KeyDisplayWindows } function KeyCaster() { const [keys, setKeys] = React.useState([]) const d = useDisposables() const KeyDisplay = useKeyDisplay() React.useEffect(() => { function handler(event: KeyboardEvent) { setKeys(current => [ event.shiftKey && event.key !== 'Shift' ? KeyDisplay[`Shift${event.key}`] ?? event.key : KeyDisplay[event.key] ?? event.key, ...current, ]) d.setTimeout(() => setKeys(current => tap(current.slice(), clone => clone.pop())), 2000) } window.addEventListener('keydown', handler) return () => window.removeEventListener('keydown', handler) }, [d, KeyDisplay]) if (keys.length <= 0) return null return (
{keys .slice() .reverse() .join(' ')}
) } function MyApp({ Component, pageProps }) { return ( <>
) } function Logo({ className }) { return ( ) } export default MyApp