alexohneander/sim_free
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

feat(frontend): restructure of ui snippets

Browse Source
This commit is contained in:
Alex Wellnitz 2024-09-24 10:26:34 +02:00
parent 63b5df0790
commit f66355c835
5 changed files with 99 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/next.config.mjs
View File

@ -1,6 +1,9 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "export",
images: {
unoptimized: true,
},
};
export default nextConfig;

8
frontend/src/app/page.module.css
View File

@ -32,7 +32,9 @@
flex-direction: column;
gap: 32px;
grid-row-start: 2;
min-width: 1280px;
width: 100%;
min-width: 1080px;
max-width: 1300px;
}
.main ol {
@ -57,6 +59,10 @@
font-weight: 600;
}
.main .intro {
margin: auto;
}
.ctas {
display: flex;
gap: 16px;

76
frontend/src/app/page.tsx
View File

@ -1,80 +1,12 @@
import Image from "next/image";
import styles from "./page.module.css";
import { SimCurrentGear } from "./ui/forms/simCurrentGear";
import { Intro } from "./ui/intro";
import { Footer } from "./ui/footer";
export default function Home() {
return (
<div className={styles.page}>
<main className={styles.main}>
<a href="/" style={{ margin: "auto" }}>
<img
className={styles.logo}
src={`/img/warcraft-icon-22.png`}
alt="Sim-Free Logo"
width={150}
height={150}
// priority
/>
</a>
<ol>
<li>
Copy/paste the text from the SimulationCraft addon. {}
<a
className={styles.primary}
target="_blank"
href="https://github.com/simulationcraft/simc-addon"
>
How to install and use the SimC addon
</a>
</li>
<li>Select pieces of gear and Sim-Free will sim them</li>
</ol>
<SimCurrentGear />
</main>
<footer className={styles.footer}>
<a
href="https://github.com/alexohneander/sim_free/issues/new"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/file.svg"
alt="File icon"
width={16}
height={16}
/>
Issues
</a>
<a
href="https://github.com/alexohneander/sim_free/"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Project
</a>
<a
href="https://alexohneander.de"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to alexohneander.de →
</a>
</footer>
<Intro />
<Footer />
</div>
);
}

51
frontend/src/app/ui/footer.tsx Normal file
View File

@ -0,0 +1,51 @@
import Image from "next/image";
import styles from "../page.module.css";
export function Footer() {
return (
<footer className={styles.footer}>
<a
href="https://github.com/alexohneander/sim_free/issues/new"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/file.svg"
alt="File icon"
width={16}
height={16}
/>
Issues
</a>
<a
href="https://github.com/alexohneander/sim_free/"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Project
</a>
<a
href="https://alexohneander.de"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to alexohneander.de →
</a>
</footer>
);
}

34
frontend/src/app/ui/intro.tsx Normal file
View File

@ -0,0 +1,34 @@
import Image from "next/image";
import styles from "../page.module.css";
import { SimCurrentGear } from "./forms/simCurrentGear";
export function Intro() {
return (
<main className={styles.main}>
<a href="/" style={{ margin: "auto" }}>
<Image
className={styles.logo}
src={`https://sim-free.dev-null.rocks/img/warcraft-icon-22.png`}
alt="Sim-Free Logo"
width={150}
height={150}
priority
/>
</a>
<ol>
<li>
Copy/paste the text from the SimulationCraft addon. {}
<a
className={styles.primary}
target="_blank"
href="https://github.com/simulationcraft/simc-addon"
>
How to install and use the SimC addon
</a>
</li>
<li>Select pieces of gear and Sim-Free will sim them</li>
</ol>
<SimCurrentGear />
</main>
);
}