timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 02:53:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Theme toggle

Browse Source
This commit is contained in:
Timothy Pidashev
2024-03-17 19:01:50 -07:00
parent 73402aec0b
commit e96e679a35
16 changed files with 215 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/web/.dockerignore Normal file
View File

@@ -0,0 +1,17 @@
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
/coverage
/.next/
/out/
/build
.DS_Store
*.pem
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.env*.local
.vercel
*.tsbuildinfo
next-env.d.ts

21
src/web/package-lock.json generated
View File

@@ -9,8 +9,10 @@
"version": "0.1.0",
"dependencies": {
"next": "14.1.3",
"next-themes": "^0.3.0",
"react": "^18",
"react-dom": "^18"
"react-dom": "^18",
"react-icons": "^5.0.1"
},
"devDependencies": {
"autoprefixer": "^10.0.1",
@@ -3231,6 +3233,15 @@
}
}
},
"node_modules/next-themes": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
"integrity": "sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==",
"peerDependencies": {
"react": "^16.8 || ^17 || ^18",
"react-dom": "^16.8 || ^17 || ^18"
}
},
"node_modules/next/node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -3801,6 +3812,14 @@
"react": "^18.2.0"
}
},
"node_modules/react-icons": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
"integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

10
src/web/package.json
View File

@@ -9,15 +9,17 @@
"lint": "next lint"
},
"dependencies": {
"next": "14.1.3",
"next-themes": "^0.3.0",
"react": "^18",
"react-dom": "^18",
"next": "14.1.3"
"react-icons": "^5.0.1"
},
"devDependencies": {
"autoprefixer": "^10.0.1",
"postcss": "^8",
"tailwindcss": "^3.3.0",
"eslint": "^8",
"eslint-config-next": "14.1.3"
"eslint-config-next": "14.1.3",
"postcss": "^8",
"tailwindcss": "^3.3.0"
}
}

36
src/web/src/.gitignore vendored Normal file
View File

@@ -0,0 +1,36 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts

0
src/web/src/app/blog/keep
View File

3
src/web/src/app/globals.css Normal file
View File

@@ -0,0 +1,3 @@
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

17
src/web/src/app/layout.js
View File

@@ -1,6 +1,7 @@
// Imports
import '@/styles/tailwind.css';
import NavBar from "@/components/navbar";
import "@/styles/tailwind.css";
import Theme from "@/app/theme";
import Header from "@/components/header";
import Footer from "@/components/footer";
// Metadata
@@ -12,11 +13,15 @@ export const metadata = {
// Exports
export default function Layout({children}) {
return (
<html lang="en">
<html lang="en" suppressHydrationWarning>
<body>
<NavBar/>
<main>{children}</main>
<Footer/>
<Theme>
<Header />
<main className="dark:bg-red-1">
{children}
</main>
<Footer />
</Theme>
</body>
</html>
);

3
src/web/src/app/page.jsx
View File

@@ -1,10 +1,11 @@
// Imports
import ThemeToggle from "@/components/theme-toggle";
// Metadata
// Exports
export default function Index() {
return (
<h1>Test</h1>
<ThemeToggle />
);
}

0
src/web/src/app/projects/keep
View File

0
src/web/src/app/resume/keep
View File

0
src/web/src/app/shop/keep
View File

12
src/web/src/app/theme.jsx Normal file
View File

@@ -0,0 +1,12 @@
"use client"
// Imports
import { ThemeProvider} from "next-themes";
export default function Theme({children}) {
return (
<ThemeProvider attribute="class">
{children}
</ThemeProvider>
)
}

2
src/web/src/components/footer.jsx
View File

@@ -1,6 +1,6 @@
const Footer = () => {
return (
<h1>footer</h1>
<div className="dark:bg-red-1">Footer</div>
);
}

6
src/web/src/components/navbar.jsx → src/web/src/components/header.jsx
View File

@@ -26,13 +26,13 @@ const navItems= [
}
]
const NavBar = () => {
const Header = () => {
return (
<div className="text-3xl font-bold text-gray-800">
<div className="dark:bg-red-1">
Navbar
</div>
);
}
export default NavBar;
export default Header;

34
src/web/src/components/theme-toggle.jsx Normal file
View File

@@ -0,0 +1,34 @@
"use client"
// Imports
import { FiSun, FiMoon } from "react-icons/fi"
import { useState, useEffect } from 'react'
import { useTheme } from 'next-themes'
import Image from "next/image"
export default function ThemeToggle() {
const [mounted, setMounted] = useState(false)
const { setTheme, resolvedTheme } = useTheme()
useEffect(() => setMounted(true), [])
if (!mounted) return (
<Image
src="data:image/svg+xml;base64,PHN2ZyBzdHJva2U9IiNGRkZGRkYiIGZpbGw9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMCIgdmlld0JveD0iMCAwIDI0IDI0IiBoZWlnaHQ9IjIwMHB4IiB3aWR0aD0iMjAwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4PSIyIiB5PSIyIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIiIHJ4PSIyIj48L3JlY3Q+PC9zdmc+Cg=="
width={16}
height={16}
sizes="16x16"
alt="Loading Light/Dark Toggle"
priority={false}
title="Loading Light/Dark Toggle"
/>
)
if (resolvedTheme === 'dark') {
return <FiSun onClick={() => setTheme('light')} />
}
if (resolvedTheme === 'light') {
return <FiMoon onClick={() => setTheme('dark')} />
}
}

75
src/web/tailwind.config.js
View File

@@ -1,13 +1,78 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
"./src/**/*.{js,ts,jsx,tsx,mdx}"
"./src/pages/*.{js,ts,jsx,tsx,mdx}",
"./src/components/*.{js,ts,jsx,tsx,mdx}",
"./src/app/*.{js,ts,jsx,tsx,mdx}",
],
darkMode: 'class',
theme: {
extend: {},
extend: {
colors: {
light:{
DEFAULT: "#fbf1c7",
red: {
1: "#cc241d",
2: "#9d0006"
},
orange: {
1: "#d65d0e",
2: "#af3a03"
},
green: {
1: "#98971a",
2: "#79740e"
},
yellow: {
1: "#d79921",
2: "#b57614"
},
blue: {
1: "#458588",
2: "#076678"
},
purple: {
1: "#b16286",
2: "#8f3f71"
},
aqua: {
1: "#689d6a",
2: "#427b58"
},
},
dark: {
DEFAULT: "#282828",
red: {
1: "#cc241d",
2: "#fb4934"
},
orange: {
1: "#d65d0e",
2: "#fe8019"
},
green: {
1: "#98971a",
2: "#b8bb26"
},
yellow: {
1: "#d79921",
2: "#fabd2f"
},
blue: {
1: "#458588",
2: "#83a598"
},
purple: {
1: "#b16286",
2: "#d3869b"
},
aqua: {
1: "#689d6a",
2: "#8ec07c"
},
},
},
},
},
plugins: [],
};