Add esolang request text and header buttons
This commit is contained in:
parent
82ec95f2dc
commit
4c508d59b5
@ -3,12 +3,24 @@ import { NextPage } from "next";
|
||||
import Head from "next/head";
|
||||
import logoImg from "../ui/assets/logo.png";
|
||||
import Image from "next/image";
|
||||
import { Card, Colors, Text } from "@blueprintjs/core";
|
||||
import { Button, Card, Colors, Icon, Text } from "@blueprintjs/core";
|
||||
import Link from "next/link";
|
||||
import { useDarkMode } from "../ui/providers/dark-mode-provider";
|
||||
import LANGUAGES from "./languages.json";
|
||||
import { GitHubIcon } from "../ui/custom-icons";
|
||||
|
||||
const REPO_URL = "https://github.com/nilaymaj/esolang-park";
|
||||
const WIKI_URL = REPO_URL + "/wiki";
|
||||
const GUIDE_URL = REPO_URL + "/wiki/Language-Providers";
|
||||
const ISSUE_URL = REPO_URL + "/issues/new";
|
||||
|
||||
const styles = {
|
||||
topPanel: {
|
||||
position: "absolute" as "absolute",
|
||||
top: 0,
|
||||
right: 0,
|
||||
padding: 10,
|
||||
},
|
||||
rootContainer: {
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
@ -39,15 +51,32 @@ const styles = {
|
||||
};
|
||||
|
||||
const Index: NextPage = () => {
|
||||
const { isDark } = useDarkMode();
|
||||
const backgroundColor = isDark ? Colors.DARK_GRAY3 : Colors.WHITE;
|
||||
const DarkMode = useDarkMode();
|
||||
const backgroundColor = DarkMode.isDark ? Colors.DARK_GRAY3 : Colors.WHITE;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Esolang Park</title>
|
||||
</Head>
|
||||
{/* Buttons in the top-right */}
|
||||
<div style={styles.topPanel}>
|
||||
<Button
|
||||
minimal
|
||||
title="Toggle between dark and light mode"
|
||||
icon={<Icon icon={DarkMode.isDark ? "flash" : "moon"} />}
|
||||
onClick={DarkMode.toggleDark}
|
||||
/>
|
||||
<a href={WIKI_URL} title="Visit the project's wiki">
|
||||
<Button minimal icon={<Icon icon="book" />} />
|
||||
</a>
|
||||
<a href={REPO_URL} title="Visit the GitHub repository">
|
||||
<Button minimal icon={<Icon icon={<GitHubIcon />} />} />
|
||||
</a>
|
||||
</div>
|
||||
{/* Container for center content */}
|
||||
<div style={{ ...styles.rootContainer, backgroundColor }}>
|
||||
{/* Project heading */}
|
||||
<div style={styles.headerContainer}>
|
||||
<div style={{ flexGrow: 0, marginRight: 10 }}>
|
||||
<Image src={logoImg} alt="logo" width={52} height={52} />
|
||||
@ -59,6 +88,7 @@ const Index: NextPage = () => {
|
||||
<Text>
|
||||
<p>An online visual debugger for esoteric languages</p>
|
||||
</Text>
|
||||
{/* Language cards */}
|
||||
<div style={styles.langsContainer}>
|
||||
{LANGUAGES.map(({ display, id }) => (
|
||||
<Link href={`/ide/${id}`} key={id}>
|
||||
@ -70,6 +100,14 @@ const Index: NextPage = () => {
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
{/* "More esolangs" section */}
|
||||
<Text>
|
||||
<p>
|
||||
Need support for your favorite esolang? Submit an{" "}
|
||||
<a href={ISSUE_URL}>issue on GitHub</a> (or{" "}
|
||||
<a href={GUIDE_URL}>implement it yourself</a>!)
|
||||
</p>
|
||||
</Text>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
Loading…
x
Reference in New Issue
Block a user