Skip to content

Commit 947a824

Browse files
FredthedoggyFredthedoggy
committed
Homepage
1 parent cfffce4 commit 947a824

File tree

3 files changed

+226
-80
lines changed

3 files changed

+226
-80
lines changed

‎components/nav.ts

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { IconProp } from "@fortawesome/fontawesome-svg-core";
2+
import { faCommentDots, faFile } from "@fortawesome/free-solid-svg-icons";
3+
4+
export const Tools: Record<
5+
string,
6+
ToolboxTool[] | Record<string, ToolboxTool[]>
7+
> = {
8+
Converters: {
9+
ChatChat: [
10+
{
11+
name: "DeluxeChat Convert",
12+
short: "DeluxeChat",
13+
icon: faCommentDots,
14+
description: "Convert DeluxeChat Configs to ChatChat Configs",
15+
link: "/converters/chatchat/deluxechat",
16+
},
17+
{
18+
name: "Essentials Convert",
19+
short: "Essentials",
20+
icon: faCommentDots,
21+
description: "Convert EssentialsChat Configs to ChatChat Configs",
22+
link: "/converters/chatchat/essentialschat",
23+
},
24+
{
25+
name: "VentureChat Convert",
26+
short: "VentureChat",
27+
icon: faCommentDots,
28+
description: "Convert VentureChat Configs to ChatChat Configs",
29+
link: "/converters/chatchat/venturechat",
30+
},
31+
],
32+
},
33+
Validators: [
34+
{
35+
name: "Yaml Validator",
36+
short: "Yaml",
37+
icon: faFile,
38+
description: "Validate Yaml Files",
39+
link: "/validators/yaml",
40+
},
41+
{
42+
name: "Properties Validator",
43+
short: "Properties",
44+
icon: faFile,
45+
description: "Validate Properties Files",
46+
link: "/validators/properties",
47+
},
48+
{
49+
name: "Toml Validator",
50+
short: "Toml",
51+
icon: faFile,
52+
description: "Validate Toml Files",
53+
link: "/validators/toml",
54+
},
55+
{
56+
name: "Hocon Validator",
57+
short: "Hocon",
58+
icon: faFile,
59+
description: "Validate Hocon Files",
60+
link: "/validators/hocon",
61+
},
62+
{
63+
name: "XML Validator",
64+
short: "XML",
65+
icon: faFile,
66+
description: "Validate XML Files",
67+
link: "/validators/xml",
68+
},
69+
],
70+
};
71+
72+
export type ToolboxTool = {
73+
name: string;
74+
short: string;
75+
icon: IconProp;
76+
description: string;
77+
link: string;
78+
};

‎pages/_app.tsx

Lines changed: 74 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import tw, { css } from "twin.macro";
44
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
55
import { faChevronDown, faToolbox } from "@fortawesome/free-solid-svg-icons";
66
import Link from "next/link";
7+
import { ToolboxTool, Tools } from "../components/nav";
78

89
function Toolbox({ Component, pageProps }: AppProps) {
910
return (
@@ -15,31 +16,27 @@ function Toolbox({ Component, pageProps }: AppProps) {
1516
css={tw`text-white bg-black w-full md:px-8 p-2 h-14 flex flex-row text-white md:px-12`}
1617
>
1718
<div css={tw`flex flex-row w-full`}>
18-
<div css={tw`flex flex-row hover:cursor-pointer`}>
19-
<Link href={"/"}>
20-
<>
21-
<div css={tw`my-auto`}>
22-
<FontAwesomeIcon icon={faToolbox} size={"2x"} />
23-
</div>
24-
<div css={tw`ml-2 my-auto font-bold text-center`}>
25-
<p
26-
css={css`
27-
margin-bottom: -0.2rem;
28-
`}
29-
>
30-
HelpChat
31-
</p>
32-
<p
33-
css={css`
34-
margin-top: -0.2rem;
35-
${tw`text-xs`}
36-
`}
37-
>
38-
ToolBox
39-
</p>
40-
</div>
41-
</>
42-
</Link>
19+
<div css={tw`flex flex-row`}>
20+
<div css={tw`my-auto`}>
21+
<FontAwesomeIcon icon={faToolbox} size={"2x"} />
22+
</div>
23+
<div css={tw`ml-2 my-auto font-bold text-center`}>
24+
<p
25+
css={css`
26+
margin-bottom: -0.2rem;
27+
`}
28+
>
29+
HelpChat
30+
</p>
31+
<p
32+
css={css`
33+
margin-top: -0.2rem;
34+
${tw`text-xs`}
35+
`}
36+
>
37+
ToolBox
38+
</p>
39+
</div>
4340
</div>
4441
<div css={tw`flex flex-row flex-grow flex-shrink`}>
4542
<Link href={"/"}>
@@ -77,62 +74,60 @@ function Toolbox({ Component, pageProps }: AppProps) {
7774
<FontAwesomeIcon icon={faChevronDown} size={"1x"} />
7875
</div>
7976
<div
80-
css={tw`hidden absolute bg-gray-800 w-full rounded-b-md z-30`}
77+
css={tw`hidden absolute bg-gray-800 w-full rounded-b-md z-30 pb-2`}
8178
className={"dropdown"}
8279
>
83-
<p
84-
css={tw`px-3 mx-1 pt-3 font-bold pb-1 hover:cursor-default`}
85-
>
86-
Converters
87-
</p>
88-
<p css={tw`px-3 mx-1 ml-2 pb-1 hover:cursor-default`}>
89-
ChatChat
90-
</p>
91-
<Link href={"/converters/chatchat/deluxechat"}>
92-
<p css={tw`px-3 mx-1 ml-3 pb-1 hover:cursor-pointer`}>
93-
DeluxeChat
94-
</p>
95-
</Link>
96-
<Link href={"/converters/chatchat/essentialschat"}>
97-
<p css={tw`px-3 mx-1 ml-3 pb-1 hover:cursor-pointer`}>
98-
Essentials
99-
</p>
100-
</Link>
101-
<Link href={"/converters/chatchat/venturechat"}>
102-
<p css={tw`px-3 mx-1 ml-3 hover:cursor-pointer`}>
103-
VentureChat
104-
</p>
105-
</Link>
106-
<p
107-
css={tw`px-3 mx-1 pt-3 font-bold pb-1 hover:cursor-default`}
108-
>
109-
Validators
110-
</p>
111-
<Link href={"/validators/yaml"}>
112-
<p css={tw`px-2 mx-1 ml-3 hover:cursor-pointer pb-1`}>
113-
Yaml
114-
</p>
115-
</Link>
116-
<Link href={"/validators/properties"}>
117-
<p css={tw`px-2 mx-1 ml-3 hover:cursor-pointer pb-1`}>
118-
Properties
119-
</p>
120-
</Link>
121-
<Link href={"/validators/toml"}>
122-
<p css={tw`px-2 mx-1 ml-3 hover:cursor-pointer pb-1`}>
123-
Toml
124-
</p>
125-
</Link>
126-
<Link href={"/validators/hocon"}>
127-
<p css={tw`px-2 mx-1 ml-3 hover:cursor-pointer pb-1`}>
128-
Hocon
129-
</p>
130-
</Link>{" "}
131-
<Link href={"/validators/xml"}>
132-
<p css={tw`px-2 mx-1 ml-3 hover:cursor-pointer pb-1`}>
133-
XML
134-
</p>
135-
</Link>
80+
{Object.keys(Tools).map((key, index) => {
81+
const children: JSX.Element[] = [];
82+
if (Array.isArray(Tools[key])) {
83+
(Tools[key] as ToolboxTool[]).forEach((tool) => {
84+
children.push(
85+
<p
86+
css={tw`px-3 mx-1 pt-3 ml-1 pb-1 hover:cursor-default`}
87+
>
88+
{tool.short}
89+
</p>
90+
);
91+
});
92+
} else {
93+
children.push(
94+
...Object.keys(Tools[key]).map((key1, index) => {
95+
const children: JSX.Element[] = [];
96+
(Tools[key] as Record<string, ToolboxTool[]>)[
97+
key1
98+
].forEach((tool) => {
99+
children.push(
100+
<p
101+
css={tw`px-3 mx-1 pt-3 ml-2 pb-1 hover:cursor-default`}
102+
>
103+
{tool.short}
104+
</p>
105+
);
106+
});
107+
return (
108+
<div key={index}>
109+
<p
110+
css={tw`px-3 mx-1 pt-3 font-bold pb-1 hover:cursor-default`}
111+
>
112+
{key1}
113+
</p>
114+
{children}
115+
</div>
116+
);
117+
})
118+
);
119+
}
120+
return (
121+
<div key={index}>
122+
<p
123+
css={tw`px-3 mx-1 pt-3 font-bold pb-1 hover:cursor-default`}
124+
>
125+
{key}
126+
</p>
127+
{children}
128+
</div>
129+
);
130+
})}
136131
</div>
137132
</div>
138133
<Link href={"https://discord.gg/helpchat"}>

‎pages/index.tsx

Lines changed: 74 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import Head from "next/head";
22
import tw, { css } from "twin.macro";
3+
import { IconProp } from "@fortawesome/fontawesome-svg-core";
4+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
5+
import Link from "next/link";
6+
import { ToolboxTool, Tools } from "../components/nav";
37

48
function Home() {
59
return (
@@ -8,7 +12,6 @@ function Home() {
812
<title>HelpChat Tools</title>
913
<meta name="description" content="HelpChat Tools" />
1014
</Head>
11-
1215
<main
1316
css={css`
1417
${tw`flex flex-col`} height: calc(100vh - 3.5rem)
@@ -20,9 +23,79 @@ function Home() {
2023
<p css={tw`text-3xl font-bold`}>HelpChat</p>
2124
<p css={tw`text-lg`}>Home</p>
2225
</div>
26+
<div
27+
css={css`
28+
${tw`h-full flex-grow flex-shrink`}
29+
height: calc(100vh - 15.5em);
30+
`}
31+
>
32+
<div
33+
css={css`
34+
${tw`block mx-auto w-max mt-16`}
35+
`}
36+
>
37+
<div
38+
css={tw`bg-gray-200 rounded-lg grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-6 sm:p-8 md:p-12 md:px-16 w-full`}
39+
>
40+
{(() => {
41+
const tools: JSX.Element[] = [];
42+
Object.keys(Tools).forEach((key) => {
43+
if (Array.isArray(Tools[key])) {
44+
tools.push(...toolsToCard(Tools[key] as ToolboxTool[]));
45+
} else {
46+
Object.keys(Tools[key]).forEach((key2) => {
47+
tools.push(
48+
...toolsToCard(
49+
(Tools[key] as Record<string, ToolboxTool[]>)[key2]
50+
)
51+
);
52+
});
53+
}
54+
});
55+
return tools;
56+
})()}
57+
</div>
58+
</div>
59+
</div>
2360
</main>
2461
</div>
2562
);
2663
}
2764

65+
function toolsToCard(tools: ToolboxTool[]) {
66+
return tools.map((tool, index) => (
67+
<ToolboxCard
68+
key={index}
69+
name={tool.name}
70+
icon={tool.icon}
71+
description={tool.description}
72+
link={tool.link}
73+
/>
74+
));
75+
}
76+
77+
function ToolboxCard({
78+
name,
79+
icon,
80+
description,
81+
link,
82+
}: {
83+
name: string;
84+
icon: IconProp;
85+
description: string;
86+
link: string;
87+
}) {
88+
return (
89+
<Link href={link}>
90+
<div
91+
css={tw`p-3 rounded-md bg-gray-300 hover:cursor-pointer width[13rem] h-48 block grid grid-cols-1 place-items-center`}
92+
>
93+
<FontAwesomeIcon icon={icon} size={"3x"} />
94+
<p css={tw`font-bold text-lg margin-bottom[-1rem]`}>{name}</p>
95+
<p css={tw`text-center text-sm margin-top[-0.5rem]`}>{description}</p>
96+
</div>
97+
</Link>
98+
);
99+
}
100+
28101
export default Home;

0 commit comments

Comments
 (0)