c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

No more phosphor-react

Browse Source
This commit is contained in:
Daniel Kluge
2022-10-20 14:58:13 +02:00
parent 1078f07bae
commit aa28e1a8a7
7 changed files with 90 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/Blog/Navigation.tsx
View File

@ -2,11 +2,12 @@
import type { NextPage } from "next";
import Link from "next/link";
import Image from "next/image";
import { TerminalWindow, House, User } from "phosphor-react";
import Icon from "@mdi/react";
import { mdiConsole, mdiAccount, mdiHome } from "@mdi/js";
import ThemeSwitch from "./ThemeSwitch";
import styles from "../../styles/Blog/Navigation.module.scss";
import logo from "../../public/icon.png";
import logo from "../../public/img/icon.png";
const Navigation: NextPage<{}> = () => {
return <nav className={styles.navigation}>
@ -22,17 +23,17 @@ const Navigation: NextPage<{}> = () => {
<div className={styles.navLink}>
<Link href={"/"}><a className="nostyle">
<span className={styles.linkText}>Projects</span>
<span className={styles.linkIcon}><House size={"2em"} /></span>
<span className={styles.linkIcon}><Icon path={mdiHome} size={"2em"} /></span>
</a></Link>
</div>
<div className={styles.navLink}>
<Link href={"/me"}><a className="nostyle">
<span className={styles.linkText}>About me</span>
<span className={styles.linkIcon}><User size={"2em"} /></span>
<span className={styles.linkIcon}><Icon path={mdiAccount} size={"2em"} /></span>
</a></Link>
</div>
<div className={styles.spacer}></div>
<div className={styles.navIcon}><a className="nostyle" href={"/terminal"}><TerminalWindow size={"2em"} /></a></div>
<div className={styles.navIcon}><a className="nostyle" href={"/terminal"}><Icon path={mdiConsole} size={"2em"} /></a></div>
<ThemeSwitch />
</nav>;
};

9
components/Blog/ThemeSwitch.tsx
View File

@ -1,7 +1,8 @@
import type { NextPage } from "next";
import { useEffect, useState } from "react";
import { useTheme } from "next-themes";
import { Sun, Moon, FileJs } from "phosphor-react";
import Icon from "@mdi/react";
import { mdiWhiteBalanceSunny, mdiWeatherNight, mdiLanguageJavascript } from "@mdi/js";
import styles from "../../styles/Blog/ThemeSwitch.module.scss";
@ -35,7 +36,7 @@ const ThemeSwitch: NextPage<{ size?: string }> = ({ size }) => {
if (!mounted) {
return <div className={styles.switch} title="Theme switching needs JS to be enabled.">
<FileJs size={size || "1.5em"} className={styles.placeHolder} />
<Icon path={mdiLanguageJavascript} size={size || "1.5em"} className={styles.placeHolder} />
</div>;
}
@ -43,8 +44,8 @@ const ThemeSwitch: NextPage<{ size?: string }> = ({ size }) => {
const moonClasses = fadeProps.moon || (theme === "light" ? styles.selected : undefined);
return <div className={styles.switch}>
<Sun size={size || "1.5em"} className={sunClasses} onClick={() => switchTheme("light")} />
<Moon size={size || "1.5em"} className={moonClasses} onClick={() => switchTheme("dark")} />
<div className={sunClasses} onClick={() => switchTheme("light")}><Icon path={mdiWhiteBalanceSunny} size={size || "1.5em"} /></div>
<div className={moonClasses} onClick={() => switchTheme("dark")}><Icon path={mdiWeatherNight} size={size || "1.5em"} /></div>
</div>;
};