2021-12-14 21:58:13 +05:30
|
|
|
import React from "react";
|
2022-02-22 02:17:55 +05:30
|
|
|
import { NextPageWithLayout } from "./_app";
|
2021-12-14 21:58:13 +05:30
|
|
|
import Head from "next/head";
|
2022-01-27 01:51:36 +05:30
|
|
|
import logoImg from "../ui/assets/logo.png";
|
|
|
|
|
import Image from "next/image";
|
2022-01-31 19:36:41 +05:30
|
|
|
import { Button, Card, Colors, Icon, Text } from "@blueprintjs/core";
|
2022-01-27 01:51:36 +05:30
|
|
|
import Link from "next/link";
|
|
|
|
|
import { useDarkMode } from "../ui/providers/dark-mode-provider";
|
2022-01-30 20:32:00 +05:30
|
|
|
import LANGUAGES from "./languages.json";
|
2022-02-22 02:17:55 +05:30
|
|
|
import { Providers } from "../ui/providers";
|
2022-01-31 19:36:41 +05:30
|
|
|
|
2022-01-27 01:51:36 +05:30
|
|
|
const styles = {
|
2022-01-31 19:36:41 +05:30
|
|
|
topPanel: {
|
|
|
|
|
position: "absolute" as "absolute",
|
|
|
|
|
top: 0,
|
|
|
|
|
right: 0,
|
|
|
|
|
padding: 10,
|
|
|
|
|
},
|
2022-01-27 01:51:36 +05:30
|
|
|
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",
|
|
|
|
|
},
|
|
|
|
|
};
|
2021-12-14 21:58:13 +05:30
|
|
|
|
2022-02-22 02:17:55 +05:30
|
|
|
const Index: NextPageWithLayout = () => {
|
2022-01-31 19:36:41 +05:30
|
|
|
const DarkMode = useDarkMode();
|
|
|
|
|
const backgroundColor = DarkMode.isDark ? Colors.DARK_GRAY3 : Colors.WHITE;
|
2022-01-27 01:51:36 +05:30
|
|
|
|
2021-12-14 21:58:13 +05:30
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Esolang Park</title>
|
|
|
|
|
</Head>
|
2022-01-31 19:36:41 +05:30
|
|
|
{/* Buttons in the top-right */}
|
|
|
|
|
<div style={styles.topPanel}>
|
|
|
|
|
<Button
|
|
|
|
|
minimal
|
2025-01-16 11:52:35 -08:00
|
|
|
title="Toggle light mode"
|
2022-01-31 19:36:41 +05:30
|
|
|
icon={<Icon icon={DarkMode.isDark ? "flash" : "moon"} />}
|
|
|
|
|
onClick={DarkMode.toggleDark}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
{/* Container for center content */}
|
2022-01-27 01:51:36 +05:30
|
|
|
<div style={{ ...styles.rootContainer, backgroundColor }}>
|
2022-01-31 19:36:41 +05:30
|
|
|
{/* Project heading */}
|
2022-01-27 01:51:36 +05:30
|
|
|
<div style={styles.headerContainer}>
|
|
|
|
|
<div style={{ flexGrow: 0, marginRight: 10 }}>
|
2022-01-30 20:32:00 +05:30
|
|
|
<Image src={logoImg} alt="logo" width={52} height={52} />
|
2022-01-27 01:51:36 +05:30
|
|
|
</div>
|
|
|
|
|
<Text tagName="div">
|
|
|
|
|
<h1>Esolang Park</h1>
|
|
|
|
|
</Text>
|
|
|
|
|
</div>
|
2025-01-16 11:52:35 -08:00
|
|
|
|
2022-01-31 19:36:41 +05:30
|
|
|
{/* Language cards */}
|
2022-01-27 01:51:36 +05:30
|
|
|
<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>
|
|
|
|
|
))}
|
2021-12-17 20:07:12 +05:30
|
|
|
</div>
|
|
|
|
|
</div>
|
2021-12-14 21:58:13 +05:30
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
2022-02-22 02:17:55 +05:30
|
|
|
// Feature guide should not be shown on the home page
|
|
|
|
|
Index.getLayout = function getLayout(page: React.ReactNode) {
|
|
|
|
|
return <Providers omitFeatureGuide={true}>{page}</Providers>;
|
|
|
|
|
};
|
|
|
|
|
|
2021-12-14 21:58:13 +05:30
|
|
|
export default Index;
|
