Keyboard Keys

1'use client';
2import React, { type ReactNode } from 'react';
3import Link from 'next/link';
4import { Code2, Command } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function KeyboardKeysSection() {
29  const shortcuts = [
30    { keys: ['Ctrl', 'K'], desc: 'Command palette' },
31    { keys: ['Ctrl', 'S'], desc: 'Save document' },
32    { keys: ['Ctrl', 'Shift', 'N'], desc: 'New project' },
33    { keys: ['Ctrl', '/'], desc: 'Toggle comments' },
34    { keys: ['Esc'], desc: 'Close modal' },
35  ];
36
37  return (
38    <SectionCard title="Keyboard Keys" sourceSlug="/ui/source/ui-elements/keyboard-keys">
39      <div className="space-y-4">
40        {/* Inline Keys */}
41        <div className="flex flex-wrap gap-3">
42          {['Shift', 'Ctrl', 'Alt', 'Cmd', 'Tab', 'Esc', 'Enter'].map((key) => (
43            <kbd key={key} className="inline-flex items-center rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-1 text-xs font-semibold text-gray-700 shadow-sm dark:border-white/10 dark:bg-white/5 dark:text-gray-300">
44              {key}
45            </kbd>
46          ))}
47        </div>
48        {/* Shortcuts */}
49        <div className="space-y-2">
50          {shortcuts.map((s) => (
51            <div key={s.desc} className="flex items-center justify-between rounded-lg border border-gray-100 px-3 py-2 dark:border-white/5">
52              <span className="text-sm text-gray-600 dark:text-gray-400">{s.desc}</span>
53              <div className="flex items-center gap-1">
54                {s.keys.map((key, i) => (
55                  <React.Fragment key={key}>
56                    {i > 0 && <span className="text-xs text-gray-400">+</span>}
57                    <kbd className="inline-flex items-center rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs font-semibold text-gray-700 shadow-sm dark:border-white/10 dark:bg-white/5 dark:text-gray-300">{key}</kbd>
58                  </React.Fragment>
59                ))}
60              </div>
61            </div>
62          ))}
63        </div>
64      </div>
65    </SectionCard>
66  );
67}