Mark/esolang
1
0
Fork 0
Code Issues Packages Activity

Add link to esolang implementation notes

Browse Source
This commit is contained in:
Nilay Majorwar
2022-01-31 15:44:28 +05:30
parent e3be5a8a83
commit ee64b73d28
6 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
ui/header.tsx
View File

@ -4,7 +4,14 @@ import logoImg from "./assets/logo.png";
import { GitHubIcon } from "./custom-icons";
import { useDarkMode } from "./providers/dark-mode-provider";
export const Header = ({ langName }: { langName: string }) => {
/** Link to the project's GitHub repository */
const REPO_LINK = "https://github.com/nilaymaj/esolang-park";
/** Link to the language's README.md page on GitHub */
const NOTES_LINK = (id: string) =>
`https://github.com/nilaymaj/esolang-park/blob/main/languages/${id}/README.md`;
export const Header = (props: { langId: string; langName: string }) => {
const DarkMode = useDarkMode();
const brandSection = (
@ -19,21 +26,24 @@ export const Header = ({ langName }: { langName: string }) => {
);
const langSection = (
<div style={{ flex: 0, textAlign: "center" }}>{langName}</div>
<div style={{ flex: 0, textAlign: "center" }}>{props.langName}</div>
);
const infoSection = (
<div style={{ flex: 1, textAlign: "right", paddingRight: 8 }}>
<a
href={NOTES_LINK(props.langId)}
title="View implementatio notes for this esolang"
>
<Button minimal icon={<Icon icon="info-sign" />} />
</a>
<Button
minimal
title="Toggle between dark and light mode"
icon={<Icon icon={DarkMode.isDark ? "flash" : "moon"} />}
onClick={DarkMode.toggleDark}
/>
<a
href="https://github.com/nilaymaj/esolang-park"
title="GitHub repository"
>
<a href={REPO_LINK} title="GitHub repository">
<Button minimal icon={<Icon icon={<GitHubIcon />} />} />
</a>
</div>