make the webpage

website/agb/src/app/examples/[example]/emulator.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import MgbaWrapper from "@/components/mgba/mgbaWrapper";
+import { Examples } from "@/roms/examples/examples";
+import { slugify } from "@/sluggify";
+import { useMemo } from "react";
+
+function gameUrl(exampleName: string) {
+  const example = Examples.find((x) => slugify(x.example_name) === exampleName);
+  console.log(exampleName);
+  if (!example) {
+    throw new Error(`cannot find example ${exampleName}`);
+  }
+
+  return example.url;
+}
+
+export function Emulator({ exampleName }: { exampleName: string }) {
+  const example = useMemo(() => gameUrl(exampleName), [exampleName]);
+
+  return <MgbaWrapper gameUrl={example} />;
+}

website/agb/src/app/examples/[example]/page.tsx

@@ -0,0 +1,26 @@
+import { Examples } from "@/roms/examples/examples";
+import { slugify } from "@/sluggify";
+import { Emulator } from "./emulator";
+import { ContentBlock } from "@/components/contentBlock";
+
+export async function generateStaticParams() {
+  return Examples.map((example) => ({
+    example: slugify(example.example_name),
+  }));
+}
+
+export default function Page({ params }: { params: { example: string } }) {
+  return (
+    <>
+      <ContentBlock color="#9fa6db">
+        <h1>Example: {params.example}</h1>
+      </ContentBlock>
+      <ContentBlock>
+        <Emulator exampleName={params.example} />
+      </ContentBlock>
+      <ContentBlock color="#f5755e">
+        <></>
+      </ContentBlock>
+    </>
+  );
+}

website/agb/src/app/examples/page.tsx

@@ -0,0 +1,42 @@
+import { Metadata } from "next";
+import { ContentBlock } from "@/components/contentBlock";
+import { slugify } from "@/sluggify";
+import { GameDisplay, GameGrid, GameImage } from "./styles";
+import { Examples } from "@/roms/examples/examples";
+
+export const metadata: Metadata = {
+  title: "Examples - agb",
+};
+
+export default function ShowcasePage() {
+  return (
+    <>
+      <ContentBlock color="#9fa6db">
+        <h1>Examples</h1>
+      </ContentBlock>
+      <ContentBlock uncentered>
+        <GameGrid>
+          {Examples.map((example, idx) => (
+            <Game key={idx} example={example} />
+          ))}
+        </GameGrid>
+      </ContentBlock>
+    </>
+  );
+}
+
+function Game({ example }: { example: (typeof Examples)[number] }) {
+  const screenshot = example.screenshot;
+  return (
+    <GameDisplay
+      href={`./examples/${slugify(example.example_name)}`}
+      id={slugify(example.example_name)}
+    >
+      <GameImage
+        src={screenshot}
+        alt={`Screenshot of ${example.example_name}`}
+      />
+      <h2>{example.example_name}</h2>
+    </GameDisplay>
+  );
+}

website/agb/src/app/examples/styles.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import Link from "next/link";
+import styled from "styled-components";
+import Image from "next/image";
+
+export const GameGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, min(100vw, 600px));
+  justify-content: center;
+  gap: 48px;
+`;
+
+export const GameImage = styled(Image)`
+  width: 100%;
+  width: max(
+    round(down, 100%, calc(240 * var(--device-pixel))),
+    min(calc(240 * var(--device-pixel)), 100vw)
+  );
+  height: auto;
+  image-rendering: pixelated;
+`;
+
+export const GameDisplay = styled(Link)`
+  width: 100%;
+  text-align: center;
+  color: black;
+  text-decoration: none;
+
+  h2 {
+    margin: 0;
+    margin-top: 8px;
+  }
+`;