Add hint for esolang notes button

This commit is contained in:
Nilay Majorwar 2022-02-27 01:44:36 +05:30
parent b24c31378f
commit abcda33167
2 changed files with 40 additions and 2 deletions

View File

@ -21,3 +21,12 @@ a {
* {
box-sizing: border-box;
}
.esolang-notes-hint {
transition: all 0.1s;
transform-origin: 100% 50%;
}
.esolang-notes-hint.hide {
transform: scaleX(0);
}

View File

@ -1,8 +1,9 @@
import * as React from "react";
import Image from "next/image";
import logoImg from "./assets/logo.png";
import { GitHubIcon } from "./custom-icons";
import { useDarkMode } from "./providers/dark-mode-provider";
import { Button, Card, Icon, Tag } from "@blueprintjs/core";
import { Button, Card, Colors, Icon, Tag } from "@blueprintjs/core";
import { useFeaturesGuide } from "./providers/features-guide-provider";
/** Link to the project's GitHub repository */
@ -12,6 +13,22 @@ const REPO_LINK = "https://github.com/nilaymaj/esolang-park";
const NOTES_LINK = (id: string) =>
`https://github.com/nilaymaj/esolang-park/blob/main/languages/${id}/README.md`;
/** Hint text for the language notes button */
const LangNotesHint = (props: { show: boolean }) => {
const { isDark } = useDarkMode();
const color = isDark ? Colors.GRAY3 : Colors.GRAY2;
return (
<span
className={"esolang-notes-hint " + (props.show ? "" : "hide")}
style={{ color, marginRight: 10 }}
>
<span style={{ marginRight: 5 }}>Read the esolang notes</span>
<Icon icon="arrow-right"></Icon>
</span>
);
};
type Props = {
langId: string;
langName: string;
@ -21,6 +38,7 @@ type Props = {
export const Header = (props: Props) => {
const DarkMode = useDarkMode();
const featuresGuide = useFeaturesGuide();
const [showNotesHint, setShowNotesHint] = React.useState(true);
const brandSection = (
<div
@ -50,9 +68,20 @@ export const Header = (props: Props) => {
);
const infoSection = (
<div style={{ flex: 1, textAlign: "right", paddingRight: 8 }}>
<div
style={{
flex: 1,
textAlign: "right",
paddingRight: 8,
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
}}
>
<LangNotesHint show={showNotesHint} />
<a
href={NOTES_LINK(props.langId)}
onMouseEnter={() => setShowNotesHint(false)}
title="View the notes for this esolang"
>
<Button minimal icon={<Icon icon="document" />} />