tynanpurdy.com
Fork of atp.tools as a universal profile for people on the ATmosphere
1import {
2 Dialog,
3 DialogContent,
4 DialogHeader,
5 DialogTitle,
6} from "@/components/ui/dialog";
7import { ArrowUp, ChevronUp, Command } from "lucide-react";
8
9export function HelpModal({
10 isOpen,
11 onClose,
12}: {
13 isOpen: boolean;
14 onClose: () => void;
15}) {
16 return (
17 <Dialog open={isOpen} onOpenChange={onClose}>
18 <DialogContent className="sm:max-w-md">
19 <DialogHeader>
20 <DialogTitle>type@tools help</DialogTitle>
21 </DialogHeader>
22 <div className="space-y-2">
23 <div className="flex justify-between">
24 <span>reset test</span>
25 <kbd className="px-2 py-1 bg-muted rounded">
26 <ArrowUp className="inline mb-0.5" height={16} width={16} /> + esc
27 </kbd>
28 </div>
29 <div className="flex justify-between">
30 <span>rotate cursor style</span>
31 <kbd className="px-2 py-1 bg-muted rounded">
32 <ArrowUp className="inline mb-0.5" height={16} width={16} /> + -
33 </kbd>
34 </div>
35 <div className="flex justify-between">
36 <span>help menu (this page)</span>
37 <kbd className="px-2 py-1 bg-gray-100 dark:bg-muted rounded">
38 <ChevronUp className="inline mb-2" height={16} width={16} /> /{" "}
39 <Command className="inline mb-0.5" height={16} width={16} /> + h
40 </kbd>
41 </div>
42 </div>
43 </DialogContent>
44 </Dialog>
45 );
46}