Stevan/onspring-api-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: begin working on being able to immplement dark mode and light mode

Browse Source
This commit is contained in:
Stevan Freeborn
2023-04-20 22:39:47 -05:00
parent ec87b67385
commit 8eb224e018
8 changed files with 91 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/CodeSnippet.module.css
+1
View File
@@ -14,6 +14,7 @@
border-top-right-radius: 10px;
border-top-left-radius: 10px;
font-size: 1rem;
color: white;
}
.snippetContent>pre {
src/app/components/Main.tsx
+7 -1
View File
@@ -1,4 +1,7 @@
'use client';
import { Fragment } from 'react';
import { themes, useThemeContext } from '../theme';
import { DocSection } from '../types/types';
import styles from './Main.module.css';
import Section from './Section';
@@ -8,8 +11,11 @@ export default function Main({
}: {
versionSections: DocSection[];
}) {
const { theme } = useThemeContext();
const themeStyles = themes[theme];
return (
<main className={styles.container}>
<main style={themeStyles} className={styles.container}>
{versionSections.map(section => (
<Fragment key={section.title}>
<Section key={section.title}>
src/app/components/NavBar.tsx
+7 -3
View File
@@ -1,8 +1,9 @@
'use client';
import Link from 'next/link.js';
import Link from 'next/link';
import { Fragment, useState } from 'react';
import { Doc, DocsStructure } from '../types/types.js';
import { themes, useThemeContext } from '../theme';
import { Doc, DocsStructure } from '../types/types';
import styles from './NavBar.module.css';
function VersionsDropdown({
@@ -153,6 +154,9 @@ export default function NavBar({
}: {
version: DocsStructure;
}) {
const { theme } = useThemeContext();
const themeStyles = themes[theme];
const [isNavOpen, setIsNavOpen] =
useState<boolean>(false);
@@ -161,7 +165,7 @@ export default function NavBar({
};
return (
<nav className={styles.nav}>
<nav style={themeStyles} className={styles.nav}>
<ul className={styles.navListLeft}>
<li className={styles.sectionDropdown}>
<SectionDropdown version={version} />
src/app/components/Section.module.css
+1 -1
View File
@@ -31,10 +31,10 @@
.container>article>p {
margin-top: 20px;
color: #c1c9d2;
}
.container>article code {
color: white;
background-color: #0b3766;
border-radius: 5px;
}
src/app/components/SideBar.tsx
+22 -6
View File
@@ -2,6 +2,7 @@
import Link from 'next/link.js';
import { useState } from 'react';
import { useThemeContext } from '../theme';
import { Doc, DocsStructure } from '../types/types.js';
import styles from './SideBar.module.css';
@@ -92,14 +93,29 @@ export default function SideBar({
}: {
version: DocsStructure;
}) {
const { theme, setTheme } = useThemeContext();
return (
<div className={styles.container}>
<Link href="/" className={styles.link}>
<h1 className={styles.title}>
<span className={styles.onspring}>Onspring</span>{' '}
<span className={styles.api}>API</span>
</h1>
</Link>
<div>
<Link href="/" className={styles.link}>
<h1 className={styles.title}>
<span className={styles.onspring}>
Onspring
</span>{' '}
<span className={styles.api}>API</span>
</h1>
</Link>
<label className="switch">
<input
onChange={() =>
setTheme(theme === 'light' ? 'dark' : 'light')
}
type="checkbox"
/>
<span className="slider round"></span>
</label>
</div>
<ListTree docs={version.docs} />
</div>
);
src/app/global-error.tsx
-27
View File
@@ -1,27 +0,0 @@
'use client';
import styles from './error.module.css';
export default function GlobalError({
error,
reset,
}: {
error: Error;
reset: () => void;
}) {
return (
<html lang="en">
<body>
<div className={styles.container}>
<h2>Something went wrong!</h2>
<a
className={styles.navLink}
onClick={() => reset()}
>
Try again
</a>
</div>
</body>
</html>
);
}
src/app/layout.tsx
+11 -1
View File
@@ -1,5 +1,6 @@
import { ReactNode } from 'react';
import './globals.css';
import { ThemeContextProvider } from './theme';
export const metadata = {
title: 'Onspring API Docs',
@@ -12,6 +13,11 @@ export const metadata = {
},
],
},
viewport: {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
},
};
export default function RootLayout({
@@ -21,7 +27,11 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body>{children}</body>
<body>
<ThemeContextProvider>
{children}
</ThemeContextProvider>
</body>
</html>
);
}
src/app/theme.tsx
+42
View File
@@ -0,0 +1,42 @@
'use client';
import {
ReactNode,
createContext,
useContext,
useState,
} from 'react';
const ThemeContext = createContext({});
const darkTheme = {
color: 'white',
backgroundColor: '#05254a',
};
const lightTheme = {
color: 'black',
backgroundColor: 'white',
};
export const themes = {
dark: darkTheme,
light: lightTheme,
} as { [key: string]: { [key: string]: string } };
export const ThemeContextProvider = ({
children,
}: {
children: ReactNode;
}) => {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
};
export const useThemeContext: any = () =>
useContext(ThemeContext);