AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 10:42:08 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Update docs for useTheme hook, move meta viewport to _app

Browse Source
This commit is contained in:
Aaron William Po
2023-04-21 23:42:14 -04:00
parent 6a00532f75
commit 603588ca54
4 changed files with 40 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/ui/Navbar.tsx
View File

@@ -1,9 +1,10 @@
import useMediaQuery from '@/hooks/useMediaQuery'; import useMediaQuery from '@/hooks/useMediaQuery';
import useNavbar from '@/hooks/useNavbar'; import useNavbar from '@/hooks/useNavbar';
import Link from 'next/link'; import Link from 'next/link';
import { FC, useEffect, useState } from 'react'; import { FC } from 'react';
import { MdDarkMode, MdLightMode } from 'react-icons/md'; import { MdDarkMode, MdLightMode } from 'react-icons/md';
import { GiHamburgerMenu } from 'react-icons/gi'; import { GiHamburgerMenu } from 'react-icons/gi';
import useTheme from '@/hooks/useTheme';
const DesktopLinks: FC = () => { const DesktopLinks: FC = () => {
const { pages, currentURL } = useNavbar(); const { pages, currentURL } = useNavbar();
@@ -56,24 +57,6 @@ const MobileLinks: FC = () => {
); );
}; };
const useTheme = () => {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
useEffect(() => {
const savedTheme = localStorage.getItem('theme');
if (prefersDarkMode && !savedTheme) {
setTheme('dark');
localStorage.setItem('theme', 'dark');
return;
}
setTheme(savedTheme as 'light' | 'dark');
}, [prefersDarkMode, theme]);
return { theme, setTheme };
};
const Navbar = () => { const Navbar = () => {
const isDesktopView = useMediaQuery('(min-width: 1024px)'); const isDesktopView = useMediaQuery('(min-width: 1024px)');

31
src/hooks/useTheme.ts Normal file
View File

@@ -0,0 +1,31 @@
import { useState, useEffect } from 'react';
import useMediaQuery from './useMediaQuery';
/**
* A custom hook to manage the theme of the app. If a preferred theme is not set in
* localStorage, it will use what the user's browser prefers as determined by the
* prefers-color-scheme media query. If the user changes their preferred theme, it will be
* saved in localStorage and used in subsequent visits.
*
* @returns ThemeState.theme - The current theme of the app.
* @returns ThemeState.setTheme - A setter function to change the theme of the app.
*/
const useTheme = () => {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
useEffect(() => {
const savedTheme = localStorage.getItem('theme');
if (prefersDarkMode && !savedTheme) {
setTheme('dark');
localStorage.setItem('theme', 'dark');
return;
}
setTheme(savedTheme as 'light' | 'dark');
}, [prefersDarkMode, theme]);
return { theme, setTheme };
};
export default useTheme;

8
src/pages/_app.tsx
View File

@@ -6,6 +6,7 @@ import { useEffect } from 'react';
import { themeChange } from 'theme-change'; import { themeChange } from 'theme-change';
import { Space_Grotesk } from 'next/font/google'; import { Space_Grotesk } from 'next/font/google';
import Head from 'next/head';
const spaceGrotesk = Space_Grotesk({ const spaceGrotesk = Space_Grotesk({
subsets: ['latin'], subsets: ['latin'],
@@ -26,7 +27,12 @@ export default function App({ Component, pageProps }: AppProps) {
} }
`} `}
</style> </style>
<Head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
/>
</Head>
<UserContext.Provider value={{ user, isLoading, error, mutate }}> <UserContext.Provider value={{ user, isLoading, error, mutate }}>
<Component {...pageProps} /> <Component {...pageProps} />
</UserContext.Provider> </UserContext.Provider>

4
src/pages/_document.tsx
View File

@@ -22,10 +22,6 @@ export default function Document() {
href="favicon/favicon-16x16.png" href="favicon/favicon-16x16.png"
/> />
<link rel="manifest" href="favicon/site.webmanifest" /> <link rel="manifest" href="favicon/site.webmanifest" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
/>
</Head> </Head>
<body> <body>
<Main /> <Main />