Add hint for esolang notes button
This commit is contained in:
parent
b24c31378f
commit
abcda33167
@ -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);
|
||||
}
|
||||
|
@ -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" />} />
|
||||
|
Loading…
x
Reference in New Issue
Block a user