Skip to content

Commit f4dc71c

Browse files
FredthedoggyFredthedoggy
committed
ToolBar
1 parent b738a9b commit f4dc71c

File tree

5 files changed

+87
-67
lines changed

5 files changed

+87
-67
lines changed

‎pages/_app.tsx

Lines changed: 69 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,85 @@
11
import type {AppProps} from 'next/app'
22
import GlobalStyles from "../components/GlobalStyles";
33
import tw, {css} from "twin.macro";
4-
import Link from 'next/link'
5-
import {ReactNode, useState} from "react";
64
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
7-
import {faChevronDown, faChevronRight} from "@fortawesome/free-solid-svg-icons";
5+
import {faChevronDown, faToolbox} from "@fortawesome/free-solid-svg-icons";
6+
import Link from 'next/link';
87

9-
function Converter({Component, pageProps}: AppProps) {
8+
function Toolbox({Component, pageProps}: AppProps) {
109
return (
1110
<div>
1211
<GlobalStyles/>
1312
<div css={tw`flex flex-row`}>
14-
<div css={tw`w-48 bg-gray-700 flex flex-col text-white py-4 px-4`}>
15-
<Link href={'/'}>
16-
<div css={tw`text-lg font-bold mr-auto hover:cursor-pointer mx-auto mb-8`}>HelpChat Tools</div>
17-
</Link>
18-
<Collapsable name={"Config Converters"}>
19-
<Collapsable name={"ChatChat"}>
20-
<Link href={'/converters/chatchat/deluxechat'}>
21-
<p css={tw`hover:cursor-pointer`}>DeluxeChat</p>
22-
</Link>
23-
<Link href={'/converters/chatchat/essentialschat'}>
24-
<p css={tw`hover:cursor-pointer`}>EssentialsChat</p>
25-
</Link>
26-
<Link href={'/converters/chatchat/venturechat'}>
27-
<p css={tw`hover:cursor-pointer`}>VentureChat</p>
28-
</Link>
29-
</Collapsable>
30-
</Collapsable>
31-
<Collapsable name={'Validators'}>
32-
<Link href={'/validators/yaml'}>
33-
<p css={tw`hover:cursor-pointer`}>Yaml Validator</p>
34-
</Link>
35-
</Collapsable>
36-
</div>
3713
<div css={tw`flex-grow flex-shrink`}>
38-
<div css={tw`text-white bg-blue-500 w-full md:px-8 p-2 h-11 flex flex-row`} />
14+
<div css={tw`text-white bg-black w-full md:px-8 p-2 h-14 flex flex-row text-white md:px-12`}>
15+
<div css={tw`flex flex-row w-full`}>
16+
<div css={tw`flex flex-row hover:cursor-pointer`}>
17+
<Link href={"/"}>
18+
<>
19+
<div css={tw`my-auto`}>
20+
<FontAwesomeIcon icon={faToolbox} size={"2x"}/>
21+
</div>
22+
<div css={tw`ml-2 my-auto font-bold text-center`}>
23+
<p css={css`
24+
margin-bottom: -0.2rem;
25+
`}>HelpChat</p>
26+
<p css={css`
27+
margin-top: -0.2rem;
28+
${tw`text-xs`}
29+
`}>ToolBox</p>
30+
</div>
31+
</>
32+
</Link>
33+
</div>
34+
<div css={tw`flex flex-row flex-grow flex-shrink`}>
35+
<Link href={"/"}>
36+
<p css={tw`px-3 mx-1 py-2 my-auto ml-auto hover:cursor-pointer`}>Home</p>
37+
</Link>
38+
<Link href={"https://www.youtube.com/watch?v=dQw4w9WgXcQ"}>
39+
<p css={tw`px-3 mx-1 py-2 my-auto hover:cursor-pointer`}>Spigot</p>
40+
</Link>
41+
<Link href={"https://www.youtube.com/watch?v=dQw4w9WgXcQ"}>
42+
<p css={tw`px-3 mx-1 py-2 my-auto hover:cursor-pointer`}>Github</p>
43+
</Link>
44+
<div css={css`
45+
${tw`my-auto hover:cursor-pointer inline-block relative py-2 rounded-t-md`}
46+
:hover {
47+
${tw`bg-gray-800`}
48+
> .dropdown {
49+
${tw`block`}
50+
}
51+
}
52+
`}><p css={tw`pl-3 ml-1 inline`}>More Tools</p>
53+
<div css={tw`ml-1 pr-3 mr-1 inline`}><FontAwesomeIcon icon={faChevronDown}/></div>
54+
<div css={tw`hidden absolute bg-gray-800 w-full rounded-b-md`} className={"dropdown"}>
55+
<p css={tw`px-3 mx-1 pt-3 font-bold pb-1 hover:cursor-default`}>Converters</p>
56+
<p css={tw`px-3 mx-1 ml-2 pb-1 hover:cursor-default`}>ChatChat</p>
57+
<Link href={"/converters/chatchat/deluxechat"}>
58+
<p css={tw`px-3 mx-1 ml-3 pb-1 hover:cursor-pointer`}>DeluxeChat</p>
59+
</Link>
60+
<Link href={"/converters/chatchat/essentialschat"}>
61+
<p css={tw`px-3 mx-1 ml-3 pb-1 hover:cursor-pointer`}>Essentials</p>
62+
</Link>
63+
<Link href={"/converters/chatchat/venturechat"}>
64+
<p css={tw`px-3 mx-1 ml-3 hover:cursor-pointer`}>VentureChat</p>
65+
</Link>
66+
<p css={tw`px-3 mx-1 pt-3 font-bold pb-1 hover:cursor-default`}>Validators</p>
67+
<Link href={"/validators/yaml"}>
68+
<p css={tw`px-2 mx-1 ml-3 hover:cursor-pointer pb-1`}>Yaml</p>
69+
</Link>
70+
</div>
71+
</div>
72+
<Link href={"https://www.youtube.com/watch?v=dQw4w9WgXcQ"}>
73+
<p css={tw`px-3 mx-1 py-2 my-auto hover:cursor-pointer bg-white text-black rounded-md`}>Join
74+
our Discord</p>
75+
</Link>
76+
</div>
77+
</div>
78+
</div>
3979
<Component {...pageProps} /></div>
4080
</div>
4181
</div>
4282
)
4383
}
4484

45-
function Collapsable({children, name}: { children: ReactNode, name: string }) {
46-
const [open, setOpen] = useState(false);
47-
return (
48-
<div css={tw`flex flex-col mb-2`}>
49-
<div css={tw`flex flex-row`}>
50-
{name}
51-
<div onClick={() => setOpen(!open)} css={tw`ml-auto hover:cursor-pointer`}>
52-
{open ? <FontAwesomeIcon icon={faChevronDown}/> : <FontAwesomeIcon icon={faChevronRight}/>}
53-
</div>
54-
</div>
55-
<div css={css`
56-
display: ${open ? 'block' : 'none'};
57-
${tw`ml-3`}
58-
`}>
59-
{children}
60-
</div>
61-
</div>
62-
)
63-
}
64-
65-
export default Converter
85+
export default Toolbox

‎pages/converters/chatchat/deluxechat.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,23 +31,23 @@ const Home: NextPage = () => {
3131
<meta name="description" content="Convert DeluxeChat Configs to ChatChat"/>
3232
</Head>
3333

34-
<main css={css`${tw`flex flex-col`} height: calc(100vh - 2.75rem)`}>
34+
<main css={css`${tw`flex flex-col`} height: calc(100vh - 3.5rem)`}>
3535
<div css={tw`text-white bg-blue-500 w-full md:px-8 p-16 h-48 text-center`}>
3636
<p css={tw`text-3xl font-bold`}>HelpChat</p>
3737
<p css={tw`text-lg`}>DeluxeChat Config Converter</p>
3838
</div>
3939
<div css={tw`flex flex-col md:flex-row flex-grow flex-shrink h-full max-w-full`}>
4040
<div css={css`
4141
${tw`w-full md:w-1/2 p-4 pt-1 pr-2`}
42-
height: calc(100vh - 14.75em);
43-
max-width: calc(50vw - 6rem);
42+
height: calc(100vh - 15.5em);
43+
max-width: 50vw;
4444
`}>
4545
<TextBox title={"DeluxeChat Config"} code={config} editor={setConfig} language={"yaml"}/>
4646
</div>
4747
<div css={css`
4848
${tw`w-full md:w-1/2 p-4 pl-2 pt-1 flex flex-col`}
49-
height: calc(100vh - 14.75em);
50-
max-width: calc(50vw - 6rem);
49+
height: calc(100vh - 15.5em);
50+
max-width: 50vw;
5151
`}>
5252
{
5353
error || !parsedConfig ? (<div css={tw`flex flex-col h-full w-full pt-1`}>

‎pages/converters/chatchat/essentialschat.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,16 +45,16 @@ const Home: NextPage = () => {
4545
<meta name="description" content="Convert EssentialsChat Configs to ChatChat"/>
4646
</Head>
4747

48-
<main css={css`${tw`flex flex-col`} height: calc(100vh - 2.75rem)`}>
48+
<main css={css`${tw`flex flex-col`} height: calc(100vh - 3.5rem)`}>
4949
<div css={tw`text-white bg-blue-500 w-full md:px-8 p-16 h-48 text-center`}>
5050
<p css={tw`text-3xl font-bold`}>HelpChat</p>
5151
<p css={tw`text-lg`}>EssentialsChat Config Converter</p>
5252
</div>
5353
<div css={tw`flex flex-col md:flex-row flex-grow flex-shrink h-full max-w-full`}>
5454
<div css={css`
5555
${tw`w-full md:w-1/2 p-4 pt-1 pr-2`}
56-
height: calc(100vh - 14.75em);
57-
max-width: calc(50vw - 6rem);
56+
height: calc(100vh - 15.5em);
57+
max-width: 50vw;
5858
`}>
5959
<div css={tw`h-1/2`}>
6060
<TextBox title={"EssentialsChat Config"} code={config} editor={setConfig} language={"yaml"}/>
@@ -65,8 +65,8 @@ const Home: NextPage = () => {
6565
</div>
6666
<div css={css`
6767
${tw`w-full md:w-1/2 p-4 pl-2 pt-1 flex flex-col`}
68-
height: calc(100vh - 14.75em);
69-
max-width: calc(50vw - 6rem);
68+
height: calc(100vh - 15.5em);
69+
max-width: 50vw;
7070
`}>
7171
{
7272
error || !parsedConfig ? (<div css={tw`flex flex-col h-full w-full pt-1`}>

‎pages/converters/chatchat/venturechat.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,23 +31,23 @@ const Home: NextPage = () => {
3131
<meta name="description" content="Convert VentureChat Configs to ChatChat"/>
3232
</Head>
3333

34-
<main css={css`${tw`flex flex-col`} height: calc(100vh - 2.75rem)`}>
34+
<main css={css`${tw`flex flex-col`} height: calc(100vh - 3.5rem)`}>
3535
<div css={tw`text-white bg-blue-500 w-full md:px-8 p-16 h-48 text-center`}>
3636
<p css={tw`text-3xl font-bold`}>HelpChat</p>
3737
<p css={tw`text-lg`}>VentureChat Config Converter</p>
3838
</div>
3939
<div css={tw`flex flex-col md:flex-row flex-grow flex-shrink h-full max-w-full`}>
4040
<div css={css`
4141
${tw`w-full md:w-1/2 p-4 pt-1 pr-2`}
42-
height: calc(100vh - 14.75em);
43-
max-width: calc(50vw - 6rem);
42+
height: calc(100vh - 15.5em);
43+
max-width: 50vw;
4444
`}>
4545
<TextBox title={"VentureChat Config"} code={config} editor={setConfig} language={"yaml"}/>
4646
</div>
4747
<div css={css`
4848
${tw`w-full md:w-1/2 p-4 pl-2 pt-1 flex flex-col`}
49-
height: calc(100vh - 14.75em);
50-
max-width: calc(50vw - 6rem);
49+
height: calc(100vh - 15.55em);
50+
max-width: 50vw;
5151
`}>
5252
{
5353
error || !parsedConfig ? (<div css={tw`flex flex-col h-full w-full pt-1`}>

‎pages/validators/yaml.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,20 +56,20 @@ const Home: NextPage = () => {
5656
<meta name="description" content="Validate Yml Files"/>
5757
</Head>
5858

59-
<main css={css`${tw`flex flex-col`} height: calc(100vh - 2.75rem)`}>
59+
<main css={css`${tw`flex flex-col`} height: calc(100vh - 3.5rem)`}>
6060
<div css={tw`text-white bg-blue-500 w-full md:px-8 p-16 h-48 text-center`}>
6161
<p css={tw`text-3xl font-bold`}>HelpChat</p>
6262
<p css={tw`text-lg`}>Yaml Validator</p>
6363
</div>
6464
<div css={tw`flex flex-col md:flex-row flex-grow flex-shrink h-full`}>
6565
<div css={css`
66-
height: calc(100vh - 14.75em);
66+
height: calc(100vh - 15.5em);
6767
${tw`md:w-1/2 p-4 pt-1 pr-2`}
6868
`}>
6969
<TextBox title={"Yaml Config"} code={config} editor={setConfig} language={"yaml"}/>
7070
</div>
7171
<div css={css`
72-
height: calc(100vh - 14.75em);
72+
height: calc(100vh - 15.5em);
7373
${tw`w-full md:w-1/2 p-4 pl-2 pt-1 flex flex-col`}
7474
`}>
7575
<div css={tw`flex flex-col h-full w-full pt-1`}>

0 commit comments

Comments
 (0)