danabra.mov
forked from
slices.network/slices
Highly ambitious ATProtocol AppView service and sdks
chadtmiller.com
1import { Dialog } from "./Dialog.tsx";
2import { Button } from "./Button.tsx";
3
4interface LexiconDependencyConfirmationDialogProps {
5 open: boolean;
6 mainLexiconNsid: string;
7 dependencies: string[];
8 onConfirm: () => void;
9 onCancel: () => void;
10}
11
12export function LexiconDependencyConfirmationDialog({
13 open,
14 mainLexiconNsid,
15 dependencies,
16 onConfirm,
17 onCancel,
18}: LexiconDependencyConfirmationDialogProps) {
19 const totalCount = 1 + dependencies.length;
20
21 return (
22 <Dialog
23 open={open}
24 onClose={onCancel}
25 title="Add Lexicon with Dependencies"
26 maxWidth="md"
27 >
28 <div className="space-y-4">
29 <p className="text-sm text-zinc-400">
30 This lexicon requires {dependencies.length} {dependencies.length === 1 ? "dependency" : "dependencies"}.
31 All {totalCount} lexicons will be added to your slice.
32 </p>
33
34 <div className="space-y-3">
35 <div>
36 <h3 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">
37 Selected Lexicon
38 </h3>
39 <div className="font-mono text-sm text-zinc-200">
40 {mainLexiconNsid}
41 </div>
42 </div>
43
44 {dependencies.length > 0 && (
45 <div>
46 <h3 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">
47 Dependencies ({dependencies.length})
48 </h3>
49 <div className="space-y-1">
50 {dependencies.map((nsid) => (
51 <div
52 key={nsid}
53 className="font-mono text-sm text-zinc-400 pl-4"
54 >
55 {nsid}
56 </div>
57 ))}
58 </div>
59 </div>
60 )}
61 </div>
62
63 <div className="flex justify-end gap-3 pt-4">
64 <Button type="button" variant="default" onClick={onCancel}>
65 Cancel
66 </Button>
67 <Button type="button" variant="primary" onClick={onConfirm}>
68 Add All ({totalCount})
69 </Button>
70 </div>
71 </div>
72 </Dialog>
73 );
74}