Adding MUI and app bar to he portfolio
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
e49b9f3821
commit
1cd5130fa7
17
.prettierrc.js
Normal file
17
.prettierrc.js
Normal file
@ -0,0 +1,17 @@
|
||||
/** @type {import('prettier').Config} */
|
||||
module.exports = {
|
||||
arrowParens: 'always',
|
||||
// Prettier might give an "unknown option" warning, however "editorconfig" is a valid option, see:
|
||||
// http://json.schemastore.org/prettierrc
|
||||
// https://prettier.io/docs/en/configuration.html#configuration-schema
|
||||
editorconfig: true, // see .editorconfig
|
||||
endOfLine: 'auto', // see .editorconfig
|
||||
bracketSameLine: false,
|
||||
jsxSingleQuote: true,
|
||||
printWidth: 100, // this isn't like max-len, it's a soft target
|
||||
semi: true,
|
||||
singleQuote: true,
|
||||
tabWidth: 2, // see .editorconfig
|
||||
trailingComma: 'all',
|
||||
useTabs: false // see .editorconfig
|
||||
};
|
||||
810
package-lock.json
generated
810
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
18
package.json
18
package.json
@ -3,25 +3,29 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --turbopack -p 8080",
|
||||
"dev": "next dev --turbopack --hostname 0.0.0.0 --port 8082",
|
||||
"build": "next build",
|
||||
"start": "next start -p 8080",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.0",
|
||||
"@mui/icons-material": "^7.0.2",
|
||||
"@mui/material": "^7.0.2",
|
||||
"next": "15.3.1",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"next": "15.3.1"
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5",
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"tailwindcss": "^4",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.3.1",
|
||||
"@eslint/eslintrc": "^3"
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
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",
|
||||
@ -13,8 +14,8 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "The Coding Grizzly",
|
||||
description: "Fun interactive coding platform",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@ -27,6 +28,7 @@ export default function RootLayout({
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
<Header />
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
7
src/app/not-found.tsx
Normal file
7
src/app/not-found.tsx
Normal file
@ -0,0 +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>
|
||||
);
|
||||
}
|
||||
78
src/components/Header/index.tsx
Normal file
78
src/components/Header/index.tsx
Normal file
@ -0,0 +1,78 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
import MenuIcon from '@mui/icons-material/Menu'
|
||||
import {
|
||||
AppBar,
|
||||
Box,
|
||||
Drawer,
|
||||
IconButton,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemButton,
|
||||
ListItemText,
|
||||
Toolbar,
|
||||
Typography
|
||||
} from '@mui/material'
|
||||
const navItems = [
|
||||
{ label: 'Home', href: '/' },
|
||||
{ label: 'Blog', href: '/blog' },
|
||||
{ label: 'Info', href: '/info' },
|
||||
{ label: 'Music', href: '/music' }
|
||||
]
|
||||
export default function Header() {
|
||||
const [mobileOpen, setMobileOpen] = React.useState(false)
|
||||
const handleDrawerToggle = () => {
|
||||
setMobileOpen(!mobileOpen)
|
||||
}
|
||||
const drawer = (
|
||||
<Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
|
||||
<Typography variant="h6" className="my-4">Menu</Typography>
|
||||
<List>
|
||||
{navItems.map((item) => (
|
||||
<ListItem key={item.label} disablePadding>
|
||||
<ListItemButton sx={{ textAlign: 'center' }} component={Link} href={item.href}>
|
||||
<ListItemText primary={item.label} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<AppBar position="static" className="bg-gray-900">
|
||||
<Toolbar className="flex justify-between">
|
||||
<Typography variant="h6" className="text-white">
|
||||
My Website
|
||||
</Typography>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
edge="end"
|
||||
onClick={handleDrawerToggle}
|
||||
className="block md:hidden"
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Box className="hidden md:flex gap-6">
|
||||
{navItems.map((item) => (
|
||||
<Link key={item.label} href={item.href} className="text-white hover:text-gray-300">
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Drawer
|
||||
anchor="right"
|
||||
open={mobileOpen}
|
||||
onClose={handleDrawerToggle}
|
||||
ModalProps={{ keepMounted: true }}
|
||||
>
|
||||
{drawer}
|
||||
</Drawer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user