diff --git a/pages/index.tsx b/pages/index.tsx index 36c8dfa..839e2ff 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -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 ( <> Esolang Park -
-
-
- +
+
+
+ +
+ +

Esolang Park

+ +
+ +

An online visual debugger for esoteric languages

+ +
+ {LANGUAGES.map(({ display, id }) => ( + + + + {display} + + + + ))}