Eric AllamandJames Ritchie
1b42269739
* Added a new github star button to the footer * Improved the props to work the same as hero icons * Only show the github link in the footer if on minimal theme Co-authored-by: James Ritchie <james@jamesritchie.co.uk>
54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
import { useJsonDoc } from "~/hooks/useJsonDoc";
|
|
import { ArrowKeysIcon } from "./Icons/ArrowKeysIcon";
|
|
import { CopyShortcutIcon } from "./Icons/CopyShortcutIcon";
|
|
import { EscapeKeyIcon } from "./Icons/EscapeKeyIcon";
|
|
import { SquareBracketsIcon } from "./Icons/SquareBracketsIcon";
|
|
import { Body } from "./Primitives/Body";
|
|
import { ThemeModeToggler } from "./ThemeModeToggle";
|
|
import { GithubStarSmall } from "./UI/GithubStarSmall";
|
|
|
|
export function Footer() {
|
|
const { minimal } = useJsonDoc();
|
|
|
|
return (
|
|
<footer className="flex items-center justify-between w-screen h-[30px] bg-slate-200 dark:bg-slate-800 border-t-[1px] border-slate-400 transition dark:border-slate-600">
|
|
<ol className="flex pl-3">
|
|
<li className="flex items-center">
|
|
<ArrowKeysIcon className="transition text-slate-300 dark:text-slate-500" />
|
|
<Body className="pl-2 pr-4 text-slate-800 transition dark:text-white">
|
|
Navigate
|
|
</Body>
|
|
</li>
|
|
<li className="flex items-center">
|
|
<SquareBracketsIcon className="transition text-slate-300 dark:text-slate-500" />
|
|
<Body className="pl-2 pr-4 text-slate-800 transition dark:text-white">
|
|
History
|
|
</Body>
|
|
</li>
|
|
<li className="flex items-center">
|
|
<EscapeKeyIcon className="transition text-slate-300 dark:text-slate-500" />
|
|
<Body className="pl-2 pr-4 text-slate-800 transition dark:text-white">
|
|
Reset path
|
|
</Body>
|
|
</li>
|
|
<li className="flex items-center">
|
|
<CopyShortcutIcon className="transition text-slate-300 dark:text-slate-500" />
|
|
<Body className="pl-2 pr-4 text-slate-800 transition dark:text-white">
|
|
Copy selected node
|
|
</Body>
|
|
</li>
|
|
</ol>
|
|
<ol className="flex items-center">
|
|
{minimal && (
|
|
<li>
|
|
<GithubStarSmall />
|
|
</li>
|
|
)}
|
|
<li>
|
|
<ThemeModeToggler />
|
|
</li>
|
|
</ol>
|
|
</footer>
|
|
);
|
|
}
|