jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-16 20:25:34 -04:00
Code Issues Activity

consistent use of arrow functions/default exports

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-02 15:16:07 -05:00
parent cd5a1b191a
commit ca614e1a1a
34 changed files with 2956 additions and 2985 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/page-header/Header.tsx
View File

@@ -3,13 +3,13 @@ import Menu from "./Menu";
import styles from "./Header.module.scss";
export default function Header() {
return (
<header className={styles.header}>
<nav className={styles.nav}>
<Name />
<Menu />
</nav>
</header>
);
}
const Header = () => (
<header className={styles.header}>
<nav className={styles.nav}>
<Name />
<Menu />
</nav>
</header>
);
export default Header;

36
components/page-header/Menu.tsx
View File

@@ -4,7 +4,7 @@ import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
import styles from "./Menu.module.scss";
const menuItems = [
const links = [
{
icon: <HomeIcon className={`icon ${styles.icon}`} />,
text: "Home",
@@ -30,21 +30,21 @@ const menuItems = [
// ensure the theme toggle isn't evaluated server-side
const ThemeToggle = dynamic(() => import("./ThemeToggle"), { ssr: false });
export default function Menu() {
return (
<ul className={styles.menu}>
{menuItems.map((item, index) => (
<li key={index} className={styles.item}>
<Link href={item.href} prefetch={false}>
<a className={styles.link}>
{item.icon} <span className={styles.text}>{item.text}</span>
</a>
</Link>
</li>
))}
<li className={`${styles.item} ${styles.theme_toggle}`}>
<ThemeToggle className={styles.icon} />
const Menu = () => (
<ul className={styles.menu}>
{links.map((link, index) => (
<li key={index} className={styles.item}>
<Link href={link.href} prefetch={false}>
<a className={styles.link}>
{link.icon} <span className={styles.text}>{link.text}</span>
</a>
</Link>
</li>
</ul>
);
}
))}
<li className={`${styles.item} ${styles.theme_toggle}`}>
<ThemeToggle className={styles.icon} />
</li>
</ul>
);
export default Menu;

40
components/page-header/Name.tsx
View File

@@ -5,23 +5,23 @@ import selfiePic from "../../public/static/images/me.jpg";
import styles from "./Name.module.scss";
export default function Name() {
return (
<Link href="/">
<a className={styles.title}>
<span className={styles.selfie}>
<Image
src={selfiePic}
alt="Photo of Jake Jarvis"
width={75}
height={75}
quality={60}
layout="intrinsic"
priority
/>
</span>
<span className={styles.name}>Jake Jarvis</span>
</a>
</Link>
);
}
const Name = () => (
<Link href="/">
<a className={styles.title}>
<span className={styles.selfie}>
<Image
src={selfiePic}
alt="Photo of Jake Jarvis"
width={75}
height={75}
quality={60}
layout="intrinsic"
priority
/>
</span>
<span className={styles.name}>Jake Jarvis</span>
</a>
</Link>
);
export default Name;

14
components/page-header/ThemeToggle.tsx
View File

@@ -6,15 +6,15 @@ import styles from "./ThemeToggle.module.scss";
// store preference in local storage
const storageKey = "dark_mode";
export const getDarkPref = () => localStorage.getItem(storageKey);
export const setDarkPref = (pref: boolean) => localStorage.setItem(storageKey, pref as unknown as string);
const getDarkPref = () => localStorage.getItem(storageKey);
const setDarkPref = (pref: boolean) => localStorage.setItem(storageKey, pref as unknown as string);
// use the `<html data-theme="...">` as a hint to what the theme was set to outside of the button component
// TODO: there's probably (definitely) a cleaner way to do this, maybe with react hooks..?
export const isDark = () => document.documentElement.getAttribute("data-theme") === "dark";
const isDark = () => document.documentElement.getAttribute("data-theme") === "dark";
// sets appropriate `<html data-theme="...">`, `<meta name="color-scheme" ...>`, and color-scheme CSS property
export const updateDOM = (dark: boolean) => {
const updateDOM = (dark: boolean) => {
document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
document.documentElement.style.colorScheme = dark ? "dark" : "light";
document.head
@@ -22,7 +22,7 @@ export const updateDOM = (dark: boolean) => {
?.setAttribute("content", dark ? config.themeColorDark : config.themeColorLight);
};
export default function ThemeToggle({ className = "" }) {
const ThemeToggle = ({ className = "" }) => {
// sync button up with theme and preference states after initialization
const [dark, setDark] = useState(isDark());
const [saved, setSaved] = useState(!!getDarkPref());
@@ -66,4 +66,6 @@ export default function ThemeToggle({ className = "" }) {
{dark ? <BulbOffIcon className={`icon ${className}`} /> : <BulbOnIcon className={`icon ${className}`} />}
</button>
);
}
};
export default ThemeToggle;