diff --git a/public/logo192.png b/public/logo192.png index fc44b0a..5d36546 100644 Binary files a/public/logo192.png and b/public/logo192.png differ diff --git a/public/logo512.png b/public/logo512.png index a4e47a6..5d36546 100644 Binary files a/public/logo512.png and b/public/logo512.png differ diff --git a/public/tanstack-circle-logo.png b/public/tanstack-circle-logo.png deleted file mode 100644 index 9db3e67..0000000 Binary files a/public/tanstack-circle-logo.png and /dev/null differ diff --git a/public/tanstack-word-logo-white.svg b/public/tanstack-word-logo-white.svg deleted file mode 100644 index b6ec508..0000000 --- a/public/tanstack-word-logo-white.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Trackpad/ExtraKeys.tsx b/src/components/Trackpad/ExtraKeys.tsx index 9395afc..c39fda7 100644 --- a/src/components/Trackpad/ExtraKeys.tsx +++ b/src/components/Trackpad/ExtraKeys.tsx @@ -1,30 +1,40 @@ -import React from 'react'; +import React from "react"; interface ExtraKeysProps { - sendKey: (key: string) => void; - onInputFocus: () => void; + sendKey: (key: string) => void; + onInputFocus: () => void; } -const KEYS = ['Esc', 'Tab', 'Ctrl', 'Alt', 'Shift', 'Meta', 'Home', 'End', 'PgUp', 'PgDn', 'Del']; +const ROWS = [ + ["Esc", "Tab", "Backspace", "Delete"], + ["Ctrl", "Alt", "Shift", "Meta", "Fn"], + ["↑", "←", "↓", "→"], + ["Play", "Prev", "Next", "Vol-", "Vol+"], +]; export const ExtraKeys: React.FC = ({ sendKey, onInputFocus }) => { - const handleInteract = (e: React.PointerEvent, key: string) => { - e.preventDefault(); - sendKey(key.toLowerCase()); - onInputFocus(); - }; + const press = (e: React.PointerEvent, k: string) => { + e.preventDefault(); + sendKey(k.toLowerCase()); + onInputFocus(); + }; - return ( -
- {KEYS.map(k => ( - - ))} + return ( +
+ {ROWS.map((row, i) => ( +
+ {row.map(k => ( + + ))}
- ); + ))} +
+ ); };