75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import { springs, staggerContainer, fadeSlideUp } from "@/lib/motion";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
} from "@/components/ui/dialog";
|
|
|
|
interface ShortcutHelpModalProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
}
|
|
|
|
const SHORTCUT_GROUPS = [
|
|
{
|
|
category: "Navigation",
|
|
shortcuts: [
|
|
{ key: "Ctrl+K", description: "Open command palette" },
|
|
{ key: "?", description: "Show keyboard shortcuts" },
|
|
{ key: "Escape", description: "Close modal / cancel" },
|
|
],
|
|
},
|
|
{
|
|
category: "Board",
|
|
shortcuts: [
|
|
{ key: "Ctrl+Z", description: "Undo" },
|
|
{ key: "Ctrl+Shift+Z", description: "Redo" },
|
|
],
|
|
},
|
|
];
|
|
|
|
export function ShortcutHelpModal({ open, onOpenChange }: ShortcutHelpModalProps) {
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="bg-pylon-surface sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle className="font-heading text-pylon-text">
|
|
Keyboard Shortcuts
|
|
</DialogTitle>
|
|
<DialogDescription className="text-pylon-text-secondary">
|
|
Quick reference for all keyboard shortcuts.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<motion.div
|
|
className="flex flex-col gap-4"
|
|
variants={staggerContainer(0.06)}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
{SHORTCUT_GROUPS.map((group) => (
|
|
<motion.div key={group.category} variants={fadeSlideUp} transition={springs.bouncy}>
|
|
<h4 className="mb-2 font-mono text-xs font-semibold uppercase tracking-widest text-pylon-text-secondary">
|
|
{group.category}
|
|
</h4>
|
|
<div className="flex flex-col gap-1">
|
|
{group.shortcuts.map(({ key, description }) => (
|
|
<div key={key} className="flex items-center justify-between py-1">
|
|
<span className="text-sm text-pylon-text">{description}</span>
|
|
<kbd className="rounded bg-pylon-column px-2 py-0.5 font-mono text-xs text-pylon-text-secondary">
|
|
{key}
|
|
</kbd>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|