Skip to content

Commit 0c129a1

Browse files
shartteshartte
committed
Styling
1 parent d2b8af0 commit 0c129a1

7 files changed

+146
-60
lines changed

‎components/ButtonBar.tsx

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from "react";
2+
import Link from "next/link";
3+
import Icon from "@mdi/react";
4+
import {
5+
mdiBookOpenPageVariant,
6+
mdiDiscord,
7+
mdiDownload,
8+
mdiHome,
9+
} from "@mdi/js";
10+
import { usePathname } from "next/navigation";
11+
12+
export type ButtonBarProps = {};
13+
14+
function ButtonBar() {
15+
const pathname = usePathname();
16+
17+
return (
18+
<div
19+
className="is-flex is-justify-content-space-between is-flex-wrap-wrap block"
20+
style={{ gap: "10px" }}
21+
>
22+
{pathname !== "/" && (
23+
<Link href="/" className="button is-large is-flex-grow-1">
24+
<span className="icon">
25+
<Icon path={mdiHome} />
26+
</span>
27+
<span>Home</span>
28+
</Link>
29+
)}
30+
{pathname !== "/guides" && (
31+
<Link href="/guides" className="button is-large is-flex-grow-1">
32+
<span className="icon">
33+
<Icon path={mdiBookOpenPageVariant} />
34+
</span>
35+
<span>Guide</span>
36+
</Link>
37+
)}
38+
{pathname !== "/download" && (
39+
<Link href="/download" className="button is-large is-flex-grow-1">
40+
<span className="icon">
41+
<Icon path={mdiDownload} />
42+
</span>
43+
<span>Download</span>
44+
</Link>
45+
)}
46+
<a
47+
href="https://discord.gg/Zd6t9ka7ne"
48+
target="_blank"
49+
rel="noreferrer"
50+
className="button is-large is-flex-grow-1"
51+
>
52+
<span className="icon">
53+
<Icon path={mdiDiscord} />
54+
</span>
55+
<span>Join our Discord</span>
56+
</a>
57+
</div>
58+
);
59+
}
60+
61+
export default ButtonBar;

‎pages/download.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { groupBy, mapValues } from "lodash-es";
88
import { getGuideUrl, getGuideVersions } from "../lib/guides";
99
import { isPopularVersion } from "../lib/popularVersions";
1010
import { compareMinecraftVersion } from "../lib/util";
11+
import Link from "next/link";
12+
import ButtonBar from "../components/ButtonBar";
1113

1214
const GithubIcon = (
1315
<Icon
@@ -142,7 +144,9 @@ C-1987.4,866.2-1988.1,867.6-1988.9,868.1z"
142144

143145
<h1 className="title">Downloads</h1>
144146

145-
<div className="content">
147+
<ButtonBar />
148+
149+
<div className="content box">
146150
<p>
147151
You can download AE2 from{" "}
148152
<a

‎pages/guide.tsx

-31
This file was deleted.

‎pages/guides.tsx

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { InferGetStaticPropsType } from "next";
2+
import { getGuideVersions } from "../lib/guides";
3+
import { compareMinecraftVersion } from "../lib/util";
4+
import openGuideImage from "./open_guide_tooltip.png";
5+
import openGuideGuiImage from "./open_guide_gui.png";
6+
import Image from "next/image";
7+
import Link from "next/link";
8+
import React from "react";
9+
import Icon from "@mdi/react";
10+
import {
11+
mdiBookOpenPageVariant,
12+
mdiDiscord,
13+
mdiDownload,
14+
mdiHome,
15+
} from "@mdi/js";
16+
import ButtonBar from "../components/ButtonBar";
17+
18+
type GuideProps = InferGetStaticPropsType<typeof getStaticProps>;
19+
20+
export default function Guides({ guides }: GuideProps) {
21+
return (
22+
<>
23+
<h1 className="title">Guides</h1>
24+
25+
<ButtonBar />
26+
27+
<div className="content">
28+
<h3 className="subtitle is-3">In-Game Version</h3>
29+
<div className="box">
30+
<p>Since Minecraft 1.20, AE2 offers an in-game guide.</p>
31+
<p>
32+
While hovering over an item that has a guide page, hold the <b>W</b>{" "}
33+
key to open the corresponding guide page.
34+
<br />
35+
<Image src={openGuideImage} alt={""} />
36+
</p>
37+
<p>
38+
Most AE2 user interfaces will also offer a help button to open the
39+
most relevant guide page.
40+
<br />
41+
<Image src={openGuideGuiImage} alt={""} />
42+
</p>
43+
</div>
44+
45+
<h3 className="subtitle is-3">Browser Version</h3>
46+
<div className="box">
47+
<p>
48+
The guide is also accessible directly from your web browser. Pick
49+
the most applicable Minecraft version below.
50+
</p>
51+
<div
52+
className="is-inline-flex is-flex-direction-column"
53+
style={{ gap: "10px" }}
54+
>
55+
{guides.map((guide) => (
56+
<a
57+
href={guide.url}
58+
rel="noopener"
59+
className="button is-large is-align-self-stretch"
60+
key={guide.minecraftVersion}
61+
>
62+
Minecraft {guide.minecraftVersion}
63+
</a>
64+
))}
65+
</div>
66+
</div>
67+
</div>
68+
</>
69+
);
70+
}
71+
72+
export const getStaticProps = async () => {
73+
let guides = await getGuideVersions();
74+
guides.sort((a, b) =>
75+
compareMinecraftVersion(b.minecraftVersion, a.minecraftVersion),
76+
);
77+
return { props: { guides } };
78+
};

‎pages/index.tsx

+2-28
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Icon from "@mdi/react";
44
import subnetworksImage from "./subnetworks.png";
55
import Image from "next/image";
66
import Link from "next/link";
7+
import ButtonBar from "../components/ButtonBar";
78

89
function Index() {
910
return (
@@ -20,34 +21,7 @@ function Index() {
2021
instantaneously!
2122
</div>
2223
<div className="block mt-1 mb-1">
23-
<div className="level">
24-
<Link href="/guide" className="button is-large level-item">
25-
<span className="icon">
26-
<Icon path={mdiBookOpenPageVariant} />
27-
</span>
28-
<span>Guide</span>
29-
</Link>
30-
<Link
31-
href="/download"
32-
className="button is-large level-item ml-1 mr-1"
33-
>
34-
<span className="icon">
35-
<Icon path={mdiDownload} />
36-
</span>
37-
<span>Download</span>
38-
</Link>
39-
<a
40-
href="https://discord.gg/Zd6t9ka7ne"
41-
target="_blank"
42-
rel="noreferrer"
43-
className="button is-large level-item"
44-
>
45-
<span className="icon">
46-
<Icon path={mdiDiscord} />
47-
</span>
48-
<span>Join our Discord</span>
49-
</a>
50-
</div>
24+
<ButtonBar />
5125
<p>
5226
<Image
5327
src={subnetworksImage}

‎pages/open_guide_gui.png

4.63 KB
Loading

‎pages/open_guide_tooltip.png

12.1 KB
Loading

0 commit comments

Comments
 (0)