Mark/esolang
1
0
Fork 0
Code Issues Packages Activity

Add esolang request text and header buttons

Browse Source
This commit is contained in:
Nilay Majorwar 2022-01-31 19:36:41 +05:30
parent 82ec95f2dc
commit 4c508d59b5
1 changed files with 41 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
pages/index.tsx
View File

@ -3,12 +3,24 @@ import { NextPage } from "next";
import Head from "next/head"; import Head from "next/head";
import logoImg from "../ui/assets/logo.png"; import logoImg from "../ui/assets/logo.png";
import Image from "next/image"; 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 Link from "next/link";
import { useDarkMode } from "../ui/providers/dark-mode-provider"; import { useDarkMode } from "../ui/providers/dark-mode-provider";
import LANGUAGES from "./languages.json"; 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 = { const styles = {
topPanel: {
position: "absolute" as "absolute",
top: 0,
right: 0,
padding: 10,
},
rootContainer: { rootContainer: {
height: "100%", height: "100%",
display: "flex", display: "flex",
@ -39,15 +51,32 @@ const styles = {
}; };
const Index: NextPage = () => { const Index: NextPage = () => {
const { isDark } = useDarkMode(); const DarkMode = useDarkMode();
const backgroundColor = isDark ? Colors.DARK_GRAY3 : Colors.WHITE; const backgroundColor = DarkMode.isDark ? Colors.DARK_GRAY3 : Colors.WHITE;
return ( return (
<> <>
<Head> <Head>
<title>Esolang Park</title> <title>Esolang Park</title>
</Head> </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 }}> <div style={{ ...styles.rootContainer, backgroundColor }}>
{/* Project heading */}
<div style={styles.headerContainer}> <div style={styles.headerContainer}>
<div style={{ flexGrow: 0, marginRight: 10 }}> <div style={{ flexGrow: 0, marginRight: 10 }}>
<Image src={logoImg} alt="logo" width={52} height={52} /> <Image src={logoImg} alt="logo" width={52} height={52} />
@ -59,6 +88,7 @@ const Index: NextPage = () => {
<Text> <Text>
<p>An online visual debugger for esoteric languages</p> <p>An online visual debugger for esoteric languages</p>
</Text> </Text>
{/* Language cards */}
<div style={styles.langsContainer}> <div style={styles.langsContainer}>
{LANGUAGES.map(({ display, id }) => ( {LANGUAGES.map(({ display, id }) => (
<Link href={`/ide/${id}`} key={id}> <Link href={`/ide/${id}`} key={id}>
@ -70,6 +100,14 @@ const Index: NextPage = () => {
</Link> </Link>
))} ))}
</div> </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> </div>
</> </>
); );