This commit is contained in:
parent
e53d66cd59
commit
ad88426350
1409
package-lock.json
generated
1409
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -11,6 +11,7 @@
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.0",
|
||||
"@fontsource/roboto": "^5.2.5",
|
||||
"@mui/icons-material": "^7.0.2",
|
||||
"@mui/material": "^7.0.2",
|
||||
"next": "15.3.1",
|
||||
@ -19,13 +20,11 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.3.1",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
const config = {
|
||||
plugins: ["@tailwindcss/postcss"],
|
||||
};
|
||||
|
||||
export default config;
|
||||
@ -1,26 +1,4 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
@import '@fontsource/roboto/300.css';
|
||||
@import '@fontsource/roboto/400.css';
|
||||
@import '@fontsource/roboto/500.css';
|
||||
@import '@fontsource/roboto/700.css';
|
||||
|
||||
@ -1,17 +1,11 @@
|
||||
/* eslint-disable @next/next/no-page-custom-font */
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import Header from "@/components/Header";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
import { light, dark } from "@/theme/theme";
|
||||
import { ThemeProvider } from "@mui/material/styles";
|
||||
import { CssBaseline } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "The Coding Grizzly",
|
||||
@ -23,13 +17,32 @@ export default function RootLayout({
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
|
||||
const toggleTheme = () => {
|
||||
setIsDarkMode((prevMode) => !prevMode);
|
||||
};
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased bg-gray-100 min-h-screen`}
|
||||
>
|
||||
<Header />
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<ThemeProvider theme={isDarkMode ? dark : light}>
|
||||
<CssBaseline />
|
||||
<Header toggleTheme={toggleTheme} />
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen bg-red-500">
|
||||
<h1 className="text-center text-white">Nothing to see here</h1>
|
||||
<div>
|
||||
<h1>Nothing to see here</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
||||
<div>
|
||||
<h1>Welcome to the den</h1>
|
||||
<p>Here lives the geek bear who is hungry for bits and bytes. Ravaging through the internet dumpster finding the finest 0s and 1s. He looks for speed and performance</p>
|
||||
</div>
|
||||
|
||||
@ -6,6 +6,7 @@ import MenuIcon from '@mui/icons-material/Menu'
|
||||
import {
|
||||
AppBar,
|
||||
Box,
|
||||
Button,
|
||||
Drawer,
|
||||
IconButton,
|
||||
List,
|
||||
@ -21,14 +22,17 @@ const navItems = [
|
||||
{ label: 'Info', href: '/info' },
|
||||
{ label: 'Music', href: '/music' }
|
||||
]
|
||||
export default function Header() {
|
||||
export default function Header({ toggleTheme }: { toggleTheme: () => void }) {
|
||||
const [mobileOpen, setMobileOpen] = React.useState(false)
|
||||
const handleDrawerToggle = () => {
|
||||
setMobileOpen(!mobileOpen)
|
||||
}
|
||||
const drawer = (
|
||||
<Box onClick={handleDrawerToggle}>
|
||||
<Typography variant="h6" className="my-4">Menu</Typography>
|
||||
<Typography variant="h6" >Menu</Typography>
|
||||
<Button variant="contained" onClick={toggleTheme}>
|
||||
Toggle Theme
|
||||
</Button>
|
||||
<List>
|
||||
{navItems.map((item) => (
|
||||
<ListItem key={item.label} disablePadding>
|
||||
@ -42,20 +46,19 @@ export default function Header() {
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<AppBar position="static" color='transparent' className="bg-black">
|
||||
<Toolbar className="flex justify-between">
|
||||
<AppBar position="static" color='transparent' >
|
||||
<Toolbar >
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
edge="end"
|
||||
onClick={handleDrawerToggle}
|
||||
className="block md:hidden"
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Box className="hidden md:flex gap-6">
|
||||
<Box >
|
||||
{navItems.map((item) => (
|
||||
<Link key={item.label} href={item.href} className="text-white hover:text-gray-300">
|
||||
<Link key={item.label} href={item.href} >
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
@ -63,7 +66,7 @@ export default function Header() {
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Drawer
|
||||
anchor="right"
|
||||
anchor="left"
|
||||
open={mobileOpen}
|
||||
onClose={handleDrawerToggle}
|
||||
ModalProps={{ keepMounted: true }}
|
||||
|
||||
44
src/theme/theme.ts
Normal file
44
src/theme/theme.ts
Normal file
@ -0,0 +1,44 @@
|
||||
// theme.js
|
||||
import { createTheme } from '@mui/material/styles';
|
||||
|
||||
const light = createTheme({
|
||||
palette: {
|
||||
mode: 'light',
|
||||
primary: {
|
||||
main: '#1976d2', // Blue
|
||||
},
|
||||
secondary: {
|
||||
main: '#dc004e', // Red
|
||||
},
|
||||
background: {
|
||||
default: '#ffffff', // White
|
||||
paper: '#f5f5f5', // Light Grey
|
||||
},
|
||||
text: {
|
||||
primary: '#000000', // Black
|
||||
secondary: '#555555', // Dark Grey
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const dark = createTheme({
|
||||
palette: {
|
||||
mode: 'dark',
|
||||
primary: {
|
||||
main: '#90caf9', // Light Blue
|
||||
},
|
||||
secondary: {
|
||||
main: '#f48fb1', // Pink
|
||||
},
|
||||
background: {
|
||||
default: '#121212', // Dark Grey
|
||||
paper: '#1d1d1d', // Slightly Lighter Grey
|
||||
},
|
||||
text: {
|
||||
primary: '#ffffff', // White
|
||||
secondary: '#bbbbbb', // Light Grey
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export { light, dark };
|
||||
Loading…
x
Reference in New Issue
Block a user