Skip to content

Commit 6a18cea

Browse files
fezcodefezcode
committed
feat: commands page refactor.
1 parent a4043e6 commit 6a18cea

File tree

1 file changed

+80
-136
lines changed

1 file changed

+80
-136
lines changed

‎src/pages/CommandsPage.js‎

Lines changed: 80 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,66 @@ import { Link } from 'react-router-dom';
33
import { ArrowLeftIcon, TerminalWindowIcon } from '@phosphor-icons/react';
44
import useSeo from '../hooks/useSeo';
55
import { useCommandPalette } from '../context/CommandPaletteContext';
6-
import colors from "../config/colors"; // Import CustomDropdown
6+
import colors from "../config/colors";
7+
8+
const commandsData = [
9+
{
10+
category: "Navigation & Socials",
11+
items: [
12+
{ title: "View Source on GitHub", description: "See source code of Fezcodex on GitHub", color: "red" },
13+
{ title: "Open GitHub Profile", description: "Opens Github profile of Fezcode.", color: "orange" },
14+
{ title: "Open Twitter Profile", description: "Opens Twitter profile of Fezcode.", color: "amber" },
15+
{ title: "Open LinkedIn Profile", description: "Opens LinkedIn profile of Fezcode.", color: "yellow" },
16+
{ title: "Send Email", description: "Send me email.", color: "lime" },
17+
]
18+
},
19+
{
20+
category: "Site Navigation",
21+
items: [
22+
{ title: "Navigate to a Random Post", description: "Go to random blogpost.", color: "green" },
23+
{ title: "Go to Latest Post", description: "Opens the latest blogpost.", color: "emerald" },
24+
{ title: "Go to Latest Log", description: "Opens the latest log entry.", color: "teal" },
25+
{ title: "Go to Random App", description: "Opens an app randomly.", color: "cyan" },
26+
{ title: "Scroll to Top", description: "Go to the top of the page.", color: "sky" },
27+
{ title: "Scroll to Bottom", description: "Go to the bottom of the page.", color: "blue" },
28+
]
29+
},
30+
{
31+
category: "Site Utilities",
32+
items: [
33+
{ title: "Show Site Stats", description: "Opens a modal to show number of Posts, Projects, Logs and Apps.", color: "indigo" },
34+
{ title: "Show Version", description: "Opens a modal to show version number of Fezcodex.", color: "violet" },
35+
{ title: "Show Current Time", description: "Opens a modal to show local and UTC analog clock.", color: "purple" },
36+
{ title: "Show Quick Stopwatch", description: "Opens a modal for stopwatch, similar to stopwatch app.", color: "fuchsia" },
37+
{ title: "Copy Current URL", description: "Copies the current URL to your clipboard.", color: "pink" },
38+
{ title: "Create Issue for This Page", description: "Opens Github Issues page to create an issue for the current URL.", color: "rose" },
39+
]
40+
},
41+
{
42+
category: "Visual Effects & Fun",
43+
items: [
44+
{ title: "Toggle Animations", description: "Enable/Disable all animations in Fezcodex.", color: "slate" },
45+
{ title: "Toggle Digital Rain", description: "Opens matrix-like text rain, you need to toggle again to disable it, or refresh the page.", color: "gray" },
46+
{ title: "Generate Art", description: "Opens a modal to display a simple generative box art.", color: "zinc" },
47+
{ title: "Leet Speak Transformer", description: "Opens a modal convert given text to Leet speak.", color: "neutral" },
48+
{ title: "Her Daim", description: "Her Daim...", color: "stone" },
49+
{ title: "Do a Barrel Roll", description: "Spins the page 360 degrees. (Easter Egg)", color: "red" },
50+
{ title: "Toggle Invert Colors", description: "Inverts all colors on the page. (Easter Egg)", color: "orange" },
51+
{ title: "Party Mode", description: "Cycles hue colors for a disco effect. (Easter Egg)", color: "amber" },
52+
{ title: "Toggle Retro Mode", description: "Enables a retro CRT scanline effect. (Easter Egg)", color: "yellow" },
53+
]
54+
},
55+
{
56+
category: "System & Debug",
57+
items: [
58+
{ title: "Reset Sidebar State", description: "Remove all sidebar states.", color: "lime" },
59+
{ title: "Show User/Browser Information", description: "Opens a modal to show User Agent, Platform, App Version, Language and Online information.", color: "green" },
60+
{ title: "Clear Local Storage", description: "Removes every entry about Fezcodes in your browser's local storage.", color: "emerald" },
61+
{ title: "Reload Page", description: "Reloads the current page.", color: "teal" },
62+
{ title: "Toggle Full Screen", description: "Goes to fullscreen mode.", color: "cyan" },
63+
]
64+
}
65+
];
766

867
function CommandsPage() {
968
useSeo({
@@ -33,6 +92,7 @@ function CommandsPage() {
3392
borderColor: colors['app-alpha-50'],
3493
color: colors.app,
3594
};
95+
3696
return (
3797
<div className="py-16 sm:py-24">
3898
<div className="mx-auto max-w-7xl px-6 lg:px-8">
@@ -88,141 +148,25 @@ function CommandsPage() {
88148
</div>
89149

90150
<h1 className="text-3xl font-arvo font-normal mb-4 text-app"> Available Commands </h1>
91-
<hr className="border-gray-700 mb-4" />
92-
<div className="bg-red-900 bg-opacity-30 border border-red-700 text-red-300 px-4 py-3 rounded relative mb-6" role="alert">
93-
<strong className="font-bold">View Source on GitHub:</strong>
94-
<span className="block sm:inline ml-2"> See source code of Fezcodex on GitHub </span>
95-
</div>
96-
97-
<div className="bg-orange-900 bg-opacity-30 border border-orange-700 text-orange-300 px-4 py-3 rounded relative mb-6" role="alert">
98-
<strong className="font-bold">Navigate to a Random Post:</strong>
99-
<span className="block sm:inline ml-2"> Go to random blogpost. </span>
100-
</div>
101-
102-
<div className="bg-amber-900 bg-opacity-30 border border-amber-700 text-amber-300 px-4 py-3 rounded relative mb-6" role="alert">
103-
<strong className="font-bold">Toggle Animations:</strong>
104-
<span className="block sm:inline ml-2"> Enable/Disable all animations in Fezcodex. </span>
105-
</div>
106-
107-
<div className="bg-yellow-900 bg-opacity-30 border border-yellow-700 text-yellow-300 px-4 py-3 rounded relative mb-6" role="alert">
108-
<strong className="font-bold">Reset Sidebar State:</strong>
109-
<span className="block sm:inline ml-2"> Remove all sidebar states. </span>
110-
</div>
111-
112-
<div className="bg-lime-900 bg-opacity-30 border border-lime-700 text-lime-300 px-4 py-3 rounded relative mb-6" role="alert">
113-
<strong className="font-bold">Send Email:</strong>
114-
<span className="block sm:inline ml-2"> Send me email. </span>
115-
</div>
116-
117-
<div className="bg-green-900 bg-opacity-30 border border-green-700 text-green-300 px-4 py-3 rounded relative mb-6" role="alert">
118-
<strong className="font-bold">Open GitHub Profile:</strong>
119-
<span className="block sm:inline ml-2"> Opens Github profile of Fezcode. </span>
120-
</div>
121-
122-
<div className="bg-emerald-900 bg-opacity-30 border border-emerald-700 text-emerald-300 px-4 py-3 rounded relative mb-6" role="alert">
123-
<strong className="font-bold">Open Twitter Profile:</strong>
124-
<span className="block sm:inline ml-2"> Opens Twitter profile of Fezcode. </span>
125-
</div>
126-
127-
<div className="bg-teal-900 bg-opacity-30 border border-teal-700 text-teal-300 px-4 py-3 rounded relative mb-6" role="alert">
128-
<strong className="font-bold">Open LinkedIn Profile:</strong>
129-
<span className="block sm:inline ml-2"> Opens LinkedIn profile of Fezcode. </span>
130-
</div>
131-
132-
<div className="bg-cyan-900 bg-opacity-30 border border-cyan-700 text-cyan-300 px-4 py-3 rounded relative mb-6" role="alert">
133-
<strong className="font-bold">Scroll to Top:</strong>
134-
<span className="block sm:inline ml-2"> Go to the top of the page. </span>
135-
</div>
136-
137-
<div className="bg-sky-900 bg-opacity-30 border border-sky-700 text-sky-300 px-4 py-3 rounded relative mb-6" role="alert">
138-
<strong className="font-bold">Scroll to Bottom:</strong>
139-
<span className="block sm:inline ml-2"> Go to the bottom of the page. </span>
140-
</div>
141-
142-
<div className="bg-blue-900 bg-opacity-30 border border-blue-700 text-blue-300 px-4 py-3 rounded relative mb-6" role="alert">
143-
<strong className="font-bold">Show Site Stats:</strong>
144-
<span className="block sm:inline ml-2"> Opens a modal to show number of Posts, Projects, Logs and Apps. </span>
145-
</div>
146-
147-
<div className="bg-indigo-900 bg-opacity-30 border border-indigo-700 text-indigo-300 px-4 py-3 rounded relative mb-6" role="alert">
148-
<strong className="font-bold">Show Version:</strong>
149-
<span className="block sm:inline ml-2"> Opens a modal to show version number of Fezcodex. </span>
150-
</div>
151-
152-
<div className="bg-violet-900 bg-opacity-30 border border-violet-700 text-violet-300 px-4 py-3 rounded relative mb-6" role="alert">
153-
<strong className="font-bold">Go to Latest Post:</strong>
154-
<span className="block sm:inline ml-2"> Opens the latest blogpost. </span>
155-
</div>
156-
157-
<div className="bg-purple-900 bg-opacity-30 border border-purple-700 text-purple-300 px-4 py-3 rounded relative mb-6" role="alert">
158-
<strong className="font-bold">Go to Latest Log:</strong>
159-
<span className="block sm:inline ml-2"> Opens the latest log entry. </span>
160-
</div>
161-
162-
<div className="bg-fuchsia-900 bg-opacity-30 border border-fuchsia-700 text-fuchsia-300 px-4 py-3 rounded relative mb-6" role="alert">
163-
<strong className="font-bold">Show Current Time:</strong>
164-
<span className="block sm:inline ml-2"> Opens a modal to show local and UTC analog clock. </span>
165-
</div>
166-
167-
<div className="bg-pink-900 bg-opacity-30 border border-pink-700 text-pink-300 px-4 py-3 rounded relative mb-6" role="alert">
168-
<strong className="font-bold">Toggle Digital Rain:</strong>
169-
<span className="block sm:inline ml-2"> Opens matrix-like text rain, you need to toggle again to disable it, or refresh the page. </span>
170-
</div>
171-
172-
<div className="bg-rose-900 bg-opacity-30 border border-rose-700 text-rose-300 px-4 py-3 rounded relative mb-6" role="alert">
173-
<strong className="font-bold">Generate Art:</strong>
174-
<span className="block sm:inline ml-2"> Opens a modal to display a simple generative box art. </span>
175-
</div>
176-
177-
<div className="bg-slate-900 bg-opacity-30 border border-slate-700 text-slate-300 px-4 py-3 rounded relative mb-6" role="alert">
178-
<strong className="font-bold">Leet Speak Transformer:</strong>
179-
<span className="block sm:inline ml-2"> Opens a modal convert given text to Leet speak. </span>
180-
</div>
181-
182-
<div className="bg-gray-900 bg-opacity-30 border border-gray-700 text-gray-300 px-4 py-3 rounded relative mb-6" role="alert">
183-
<strong className="font-bold">Show Quick Stopwatch:</strong>
184-
<span className="block sm:inline ml-2"> Opens a modal for stopwatch, similar to stopwatch app. </span>
185-
</div>
186-
187-
<div className="bg-zinc-900 bg-opacity-30 border border-zinc-700 text-zinc-300 px-4 py-3 rounded relative mb-6" role="alert">
188-
<strong className="font-bold">Show User/Browser Information:</strong>
189-
<span className="block sm:inline ml-2"> Opens a modal to show User Agent, Platform, App Version, Language and Online information. </span>
190-
</div>
191-
192-
<div className="bg-neutral-900 bg-opacity-30 border border-neutral-700 text-neutral-300 px-4 py-3 rounded relative mb-6" role="alert">
193-
<strong className="font-bold">Copy Current URL:</strong>
194-
<span className="block sm:inline ml-2"> Copies the current URL to your clipboard. </span>
195-
</div>
196-
197-
<div className="bg-stone-900 bg-opacity-30 border border-stone-700 text-stone-300 px-4 py-3 rounded relative mb-6" role="alert">
198-
<strong className="font-bold">Clear Local Storage:</strong>
199-
<span className="block sm:inline ml-2"> Removes every entry about Fezcodes in your browser's local storage. </span>
200-
</div>
201-
202-
<div className="bg-red-900 bg-opacity-30 border border-red-700 text-red-300 px-4 py-3 rounded relative mb-6" role="alert">
203-
<strong className="font-bold">Reload Page:</strong>
204-
<span className="block sm:inline ml-2"> Reloads the current page. </span>
205-
</div>
206-
207-
<div className="bg-orange-900 bg-opacity-30 border border-orange-700 text-orange-300 px-4 py-3 rounded relative mb-6" role="alert">
208-
<strong className="font-bold">Go to Random App:</strong>
209-
<span className="block sm:inline ml-2"> Opens an app randomly. </span>
210-
</div>
211-
212-
<div className="bg-amber-900 bg-opacity-30 border border-amber-700 text-amber-300 px-4 py-3 rounded relative mb-6" role="alert">
213-
<strong className="font-bold">Toggle Full Screen:</strong>
214-
<span className="block sm:inline ml-2"> Goes to fullscreen mode. </span>
215-
</div>
216-
217-
<div className="bg-yellow-900 bg-opacity-30 border border-yellow-700 text-yellow-300 px-4 py-3 rounded relative mb-6" role="alert">
218-
<strong className="font-bold">Create Issue for This Page:</strong>
219-
<span className="block sm:inline ml-2"> Opens Github Issues page to create an issue for the current URL. </span>
220-
</div>
221-
222-
<div className="bg-lime-900 bg-opacity-30 border border-lime-700 text-lime-300 px-4 py-3 rounded relative mb-6" role="alert">
223-
<strong className="font-bold">Her Daim:</strong>
224-
<span className="block sm:inline ml-2"> Her Daim... </span>
225-
</div>
151+
<hr className="border-gray-700 mb-6" />
152+
153+
{commandsData.map((category, catIndex) => (
154+
<div key={catIndex} className="mb-8">
155+
<h2 className="text-2xl font-semibold text-gray-200 mb-4 border-b border-gray-700 pb-2 inline-block">{category.category}</h2>
156+
<div className="grid grid-cols-1 gap-4">
157+
{category.items.map((cmd, cmdIndex) => (
158+
<div
159+
key={cmdIndex}
160+
className={`bg-${cmd.color}-900 bg-opacity-30 border border-${cmd.color}-700 text-${cmd.color}-300 px-4 py-3 rounded relative`}
161+
role="alert"
162+
>
163+
<strong className="font-bold">{cmd.title}:</strong>
164+
<span className="block sm:inline ml-2">{cmd.description}</span>
165+
</div>
166+
))}
167+
</div>
168+
</div>
169+
))}
226170

227171
</div>
228172
</div>

0 commit comments

Comments
 (0)