bashamole Public

Watch 0 Fork 0 Star 0
TypeScript · 7862 bytes Raw Blame History
1 import React from 'react';
2 import { FHSDirectory, CommandReferenceResponse } from '@/lib/api';
3
4 interface HelpModalsProps {
5 // Hints Modal
6 showHints: boolean;
7 setShowHints: (val: boolean) => void;
8 hints: string[];
9
10 // FHS Modal
11 showFHS: boolean;
12 setShowFHS: (val: boolean) => void;
13 fhsDirs: FHSDirectory[];
14
15 // Commands Modal
16 showCommands: boolean;
17 setShowCommands: (val: boolean) => void;
18 commandRef: CommandReferenceResponse | null;
19 }
20
21 const HelpModals: React.FC<HelpModalsProps> = ({
22 showHints,
23 setShowHints,
24 hints,
25 showFHS,
26 setShowFHS,
27 fhsDirs,
28 showCommands,
29 setShowCommands,
30 commandRef,
31 }) => {
32 return (
33 <>
34 {/* Hints Popup */}
35 {showHints && hints.length > 0 && (
36 <div className="absolute top-16 left-4 bg-yellow-900/95 backdrop-blur-sm border border-yellow-600 rounded-lg p-4 max-w-md z-40 shadow-2xl">
37 <button
38 onClick={() => setShowHints(false)}
39 className="absolute top-2 right-2 text-yellow-400 hover:text-yellow-300"
40 >
41 ✕
42 </button>
43 <h3 className="text-yellow-400 font-bold mb-2">Hints:</h3>
44 {hints.map((hint, index) => (
45 <p key={index} className="text-yellow-200 text-sm">{hint}</p>
46 ))}
47 </div>
48 )}
49
50 {/* FHS Reference Modal */}
51 {showFHS && (
52 <div className="absolute top-16 left-4 bg-green-900/95 backdrop-blur-sm border border-green-600 rounded-lg p-6 max-w-2xl z-40 shadow-2xl">
53 <button
54 onClick={() => setShowFHS(false)}
55 className="absolute top-3 right-3 text-green-400 hover:text-green-300"
56 >
57 ✕
58 </button>
59 <h3 className="text-green-400 font-bold mb-4 text-lg">Filesystem Hierarchy Standard (FHS)</h3>
60 <div className="grid grid-cols-1 gap-2 max-h-96 overflow-y-auto">
61 {fhsDirs.map((dir, index) => (
62 <div key={index} className="flex items-start gap-3">
63 <code className="text-green-300 font-terminal text-sm font-bold min-w-[80px]">{dir.path}</code>
64 <span className="text-green-200 text-sm">{dir.desc}</span>
65 </div>
66 ))}
67 </div>
68 </div>
69 )}
70
71 {/* Command Reference Modal */}
72 {showCommands && commandRef && (
73 <div className="absolute top-16 left-4 bg-red-900/95 backdrop-blur-sm border border-red-600 rounded-lg p-6 max-w-2xl max-h-[80vh] overflow-y-auto z-40 shadow-2xl">
74 <button
75 onClick={() => setShowCommands(false)}
76 className="absolute top-3 right-3 text-red-400 hover:text-red-300"
77 >
78 ✕
79 </button>
80 <h3 className="text-red-400 font-bold mb-4 text-lg">Command Reference</h3>
81
82 <div className="space-y-6">
83 {/* Navigation Commands */}
84 <div>
85 <h4 className="text-red-300 font-semibold mb-3">Navigation Commands</h4>
86 <div className="space-y-3">
87 {commandRef.navigation.map((cmd, index) => (
88 <div key={index} className="border-l-2 border-red-700 pl-3">
89 <div className="flex items-start gap-3">
90 <code className="text-red-200 font-terminal text-sm">{cmd.command}</code>
91 <span className="text-red-100 text-sm">- {cmd.description}</span>
92 </div>
93 {cmd.examples && (
94 <div className="mt-1">
95 <span className="text-red-300 text-xs">Examples: </span>
96 <code className="text-red-200 text-xs">{cmd.examples.join(', ')}</code>
97 </div>
98 )}
99 </div>
100 ))}
101 </div>
102 </div>
103
104 {/* Exploration Commands */}
105 <div>
106 <h4 className="text-red-300 font-semibold mb-3">Exploration Commands</h4>
107 <div className="space-y-3">
108 {commandRef.exploration.map((cmd, index) => (
109 <div key={index} className="border-l-2 border-red-700 pl-3">
110 <div className="flex items-start gap-3">
111 <code className="text-red-200 font-terminal text-sm">{cmd.command}</code>
112 <span className="text-red-100 text-sm">- {cmd.description}</span>
113 </div>
114 {cmd.options && (
115 <div className="mt-1 ml-4">
116 {Object.entries(cmd.options).map(([opt, desc]) => (
117 <div key={opt} className="text-xs">
118 <code className="text-red-300">{opt}</code>
119 <span className="text-red-200 ml-2">{desc}</span>
120 </div>
121 ))}
122 </div>
123 )}
124 </div>
125 ))}
126 </div>
127 </div>
128
129 {/* Utility Commands */}
130 <div>
131 <h4 className="text-red-300 font-semibold mb-3">Utility Commands</h4>
132 <div className="space-y-3">
133 {commandRef.utility.map((cmd, index) => (
134 <div key={index} className="border-l-2 border-red-700 pl-3">
135 <div className="flex items-start gap-3">
136 <code className="text-red-200 font-terminal text-sm">{cmd.command}</code>
137 <span className="text-red-100 text-sm">- {cmd.description}</span>
138 </div>
139 {cmd.variables && (
140 <div className="mt-1 ml-4">
141 {Object.entries(cmd.variables).map(([variable, desc]) => (
142 <div key={variable} className="text-xs">
143 <code className="text-red-300">{variable}</code>
144 <span className="text-red-200 ml-2">{desc}</span>
145 </div>
146 ))}
147 </div>
148 )}
149 </div>
150 ))}
151 </div>
152 </div>
153
154 {/* Game Commands */}
155 <div>
156 <h4 className="text-red-300 font-semibold mb-3">Game Commands</h4>
157 <div className="space-y-3">
158 {commandRef.game.map((cmd, index) => (
159 <div key={index} className="border-l-2 border-red-700 pl-3">
160 <div className="flex items-start gap-3">
161 <code className="text-red-200 font-terminal text-sm">{cmd.command}</code>
162 <span className="text-red-100 text-sm">- {cmd.description}</span>
163 </div>
164 </div>
165 ))}
166 </div>
167 </div>
168
169 {/* Special Paths */}
170 <div>
171 <h4 className="text-red-300 font-semibold mb-3">Special Paths</h4>
172 <div className="space-y-3">
173 {commandRef.special_paths.map((path, index) => (
174 <div key={index} className="border-l-2 border-red-700 pl-3">
175 <div className="flex items-start gap-3">
176 <code className="text-red-200 font-terminal text-sm">{path.path}</code>
177 <span className="text-red-100 text-sm">- {path.description}</span>
178 </div>
179 <div className="mt-1">
180 <span className="text-red-300 text-xs">Examples: </span>
181 <code className="text-red-200 text-xs">{path.examples.join(', ')}</code>
182 </div>
183 </div>
184 ))}
185 </div>
186 </div>
187 </div>
188 </div>
189 )}
190 </>
191 );
192 };
193
194 export default HelpModals;