import React from "react"; 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 Link from "next/link"; import { useDarkMode } from "../ui/providers/dark-mode-provider"; import LANGUAGES from "./languages.json"; 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} ))}

); }; export default Index;