Keybindings

'use client';

import { parseKeybindingsConfig } from '@kit/keybindings/config';
import { LocalStorageKeybindingsStorage } from '@kit/keybindings/storage/local-storage';
import { KeybindingDisplay, KeybindingsProvider, KeybindingsTable, useKeybinding } from '@kit/keybindings/ui';
import { Muted } from '@kit/ui/text';
import { useTheme } from 'next-themes';

function KeybindingsHandlers() {
    const { theme, setTheme } = useTheme();

    useKeybinding('ui.toggleTheme', () => {
        const newTheme = theme === 'dark' ? 'light' : 'dark';
        setTheme(newTheme);
    });

    useKeybinding('ui.alert', () => {
        alert('Alert');
    });

    return null;
}

const keybindingsModel = parseKeybindingsConfig({
    'ui.toggleTheme': {
        name: 'Toggle Theme',
        description: 'Switch between light and dark theme',
        defaultShortcut: 'ctrl+g',
        context: 'global',
    },
    'ui.alert': {
        name: 'Alert',
        description: 'Show an alert',
        defaultShortcut: 'cmd+a',
        context: 'global',
    },
});

const keybindingsStorage = new LocalStorageKeybindingsStorage();

export function KeybindingsDemo() {
    return (
        <KeybindingsProvider model={keybindingsModel} storage={keybindingsStorage}>
            <KeybindingsHandlers />
            <div className="flex flex-col items-center">
                <div className="mt-4 mb-12 flex flex-col items-center gap-2">
                    <Muted>
                        Press{' '}
                        <span className="text-black capitalize dark:text-white">
                            <KeybindingDisplay actionSlug="ui.toggleTheme" />
                        </span>{' '}
                        to toggle theme
                    </Muted>
                    <Muted>
                        Press{' '}
                        <span className="text-black capitalize dark:text-white">
                            <KeybindingDisplay actionSlug="ui.alert" />
                        </span>{' '}
                        to alert
                    </Muted>
                </div>
                <div className="h-[294px] overflow-hidden">
                    <KeybindingsTable />
                </div>
            </div>
        </KeybindingsProvider>
    );
}