import React from "react";
import { NextPageWithLayout } from "./_app";
import Head from "next/head";
import logoImg from "../ui/assets/logo.png";
import Image from "next/image";
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 { Providers } from "../ui/providers";
const styles = {
topPanel: {
position: "absolute" as "absolute",
top: 0,
right: 0,
padding: 10,
},
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: NextPageWithLayout = () => {
const DarkMode = useDarkMode();
const backgroundColor = DarkMode.isDark ? Colors.DARK_GRAY3 : Colors.WHITE;
return (
<>
Esolang Park
{/* Buttons in the top-right */}
}
onClick={DarkMode.toggleDark}
/>
{/* Container for center content */}
{/* Project heading */}
Esolang Park
{/* Language cards */}
{LANGUAGES.map(({ display, id }) => (
{display}
))}
);
};
// Feature guide should not be shown on the home page
Index.getLayout = function getLayout(page: React.ReactNode) {
return {page};
};
export default Index;