Mark/esolang
1
0
Fork 0
Code Issues Packages Activity

Add landing page

Browse Source
This commit is contained in:
Nilay Majorwar 2022-01-27 01:51:36 +05:30
parent 2c9beef1e6
commit 0a0be3dce2
1 changed files with 67 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
pages/index.tsx
View File

@ -1,20 +1,80 @@
import React from "react";
import { NextPage } from "next";
import { Mainframe } from "../ui/Mainframe";
import Head from "next/head";
import { Header } from "../ui/header";
import BrainfuckProvider from "../engines/brainfuck";
import logoImg from "../ui/assets/logo.png";
import Image from "next/image";
import { Card, Colors, Text } from "@blueprintjs/core";
import Link from "next/link";
import { useDarkMode } from "../ui/providers/dark-mode-provider";
const LANGUAGES = [
{ display: "Befunge-93", id: "befunge93" },
{ display: "Brainf*ck", id: "brainfuck" },
{ display: "Chef", id: "chef" },
{ display: "Deadfish", id: "deadfish" },
];
const styles = {
rootContainer: {
height: "100%",
display: "flex",
flexDirection: "column" as "column",
alignItems: "center",
justifyContent: "center",
padding: "10%",
textAlign: "center" as "center",
},
headerContainer: {
display: "flex",
alignItems: "center",
},
langsContainer: {
marginTop: 30,
width: "100%",
display: "flex",
flexWrap: "wrap" as "wrap",
alignContent: "flex-start",
justifyContent: "center",
},
langCard: {
minWidth: 200,
textAlign: "center" as "center",
margin: 20,
padding: "30px 0",
},
};
const Index: NextPage = () => {
const { isDark } = useDarkMode();
const backgroundColor = isDark ? Colors.DARK_GRAY3 : Colors.WHITE;
return (
<>
<Head>
<title>Esolang Park</title>
</Head>
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
<Header />
<div style={{ flexGrow: 1 }}>
<Mainframe langName="brainfuck" provider={BrainfuckProvider} />
<div style={{ ...styles.rootContainer, backgroundColor }}>
<div style={styles.headerContainer}>
<div style={{ flexGrow: 0, marginRight: 10 }}>
<Image src={logoImg} width={52} height={52} />
</div>
<Text tagName="div">
<h1>Esolang Park</h1>
</Text>
</div>
<Text>
<p>An online visual debugger for esoteric languages</p>
</Text>
<div style={styles.langsContainer}>
{LANGUAGES.map(({ display, id }) => (
<Link href={`/ide/${id}`} key={id}>
<a style={{ all: "unset" }}>
<Card interactive style={styles.langCard}>
<Text style={{ fontWeight: "bold" }}>{display}</Text>
</Card>
</a>
</Link>
))}
</div>
</div>
</>