extract content block kind

This commit is contained in:
Corwin 2024-04-30 02:16:56 +01:00
parent 3587c599ac
commit 9c00be8d6a
No known key found for this signature in database
3 changed files with 16 additions and 14 deletions

View file

@ -12,14 +12,7 @@ import { useMemo, useRef, useState } from "react";
import { GbaKey } from "../components/mgba/bindings";
import { useClientValue } from "../hooks/useClientValue.hook";
import { MgbaHandle } from "../components/mgba/mgba";
import { ExternalLink } from "@/components/externalLink";
const HelpLinks = styled.div`
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: space-around;
`;
import { ExternalLink, ExternalLinkBlock } from "@/components/externalLink";
const GameDisplay = styled.div`
height: min(calc(100vw / 1.5), min(90vh, 480px));
@ -133,7 +126,7 @@ export default function Home() {
<MgbaWithControllerSides />
</ContentBlock>
<ContentBlock color="#256256">
<HelpLinks>
<ExternalLinkBlock>
<ExternalLink href="https://github.com/agbrs/agb">
GitHub
</ExternalLink>
@ -142,7 +135,7 @@ export default function Home() {
Docs
</ExternalLink>
<ExternalLink href="./showcase">Showcase</ExternalLink>
</HelpLinks>
</ExternalLinkBlock>
</ContentBlock>
</>
);

View file

@ -1,7 +1,7 @@
import { slugify } from "@/sluggify";
import { Games, ShowcaseGame } from "../games";
import { ContentBlock } from "@/components/contentBlock";
import { ExternalLink } from "@/components/externalLink";
import { ExternalLink, ExternalLinkBlock } from "@/components/externalLink";
import Link from "next/link";
import {
BackToShowcaseWrapper,
@ -70,9 +70,11 @@ function Display({ game }: { game: ShowcaseGame }) {
</DescriptionAndScreenshots>
</ContentBlock>
<ContentBlock color="#256256">
<ExternalLinkBlock>
{game.itch && (
<ExternalLink href={game.itch.href}>View on itch.io</ExternalLink>
)}
</ExternalLinkBlock>
</ContentBlock>
</>
);

View file

@ -14,3 +14,10 @@ export const ExternalLink = styled(Link)`
border: solid black 2px;
}
`;
export const ExternalLinkBlock = styled.div`
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: space-around;
`;