Add basic layout
This commit is contained in:
@@ -1,41 +0,0 @@
|
||||
import React, { ReactNode } from 'react'
|
||||
import Link from 'next/link'
|
||||
import Head from 'next/head'
|
||||
|
||||
type Props = {
|
||||
children?: ReactNode
|
||||
title?: string
|
||||
}
|
||||
|
||||
const Layout = ({ children, title = 'This is the default title' }: Props) => (
|
||||
<div>
|
||||
<Head>
|
||||
<title>{title}</title>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
||||
</Head>
|
||||
<header>
|
||||
<nav>
|
||||
<Link href="/">
|
||||
<a>Home</a>
|
||||
</Link>{' '}
|
||||
|{' '}
|
||||
<Link href="/about">
|
||||
<a>About</a>
|
||||
</Link>{' '}
|
||||
|{' '}
|
||||
<Link href="/users">
|
||||
<a>Users List</a>
|
||||
</Link>{' '}
|
||||
| <a href="/api/users">Users API</a>
|
||||
</nav>
|
||||
</header>
|
||||
{children}
|
||||
<footer>
|
||||
<hr />
|
||||
<span>I'm here to stay (Footer)</span>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Layout
|
||||
@@ -1,19 +0,0 @@
|
||||
import * as React from 'react'
|
||||
import ListItem from './ListItem'
|
||||
import { User } from '../interfaces'
|
||||
|
||||
type Props = {
|
||||
items: User[]
|
||||
}
|
||||
|
||||
const List = ({ items }: Props) => (
|
||||
<ul>
|
||||
{items.map((item) => (
|
||||
<li key={item.id}>
|
||||
<ListItem data={item} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
|
||||
export default List
|
||||
@@ -1,16 +0,0 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import { User } from '../interfaces'
|
||||
|
||||
type ListDetailProps = {
|
||||
item: User
|
||||
}
|
||||
|
||||
const ListDetail = ({ item: user }: ListDetailProps) => (
|
||||
<div>
|
||||
<h1>Detail for {user.name}</h1>
|
||||
<p>ID: {user.id}</p>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default ListDetail
|
||||
@@ -1,18 +0,0 @@
|
||||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
import { User } from '../interfaces'
|
||||
|
||||
type Props = {
|
||||
data: User
|
||||
}
|
||||
|
||||
const ListItem = ({ data }: Props) => (
|
||||
<Link href="/users/[id]" as={`/users/${data.id}`}>
|
||||
<a>
|
||||
{data.id}: {data.name}
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
|
||||
export default ListItem
|
||||
23
components/general/styling.tsx
Normal file
23
components/general/styling.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import {FC, useMemo} from "react";
|
||||
import {createTheme, CssBaseline, ThemeProvider, useMediaQuery} from "@mui/material";
|
||||
|
||||
export const Styling: FC = ({children}) => {
|
||||
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
|
||||
|
||||
const theme = useMemo(
|
||||
() =>
|
||||
createTheme({
|
||||
palette: {
|
||||
mode: "dark",
|
||||
},
|
||||
}),
|
||||
[prefersDarkMode]
|
||||
);
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline/>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
34
components/layout/defaultLayout.tsx
Normal file
34
components/layout/defaultLayout.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { FC } from "react";
|
||||
import { AppBar, Box, Container, Toolbar, Typography } from "@mui/material";
|
||||
import { Styling } from "../general/styling";
|
||||
import { DefaultNavbar } from "./defaultNavbar";
|
||||
|
||||
export const DefaultLayout: FC = ({ children }) => (
|
||||
<Styling>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
minHeight: "100vh",
|
||||
bgcolor: "background.default",
|
||||
color: "text.primary",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<AppBar position="sticky">
|
||||
<Toolbar>
|
||||
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
||||
OpenFood
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Box sx={{ flexGrow: 1, pt: 2 }}>
|
||||
<Container maxWidth="sm">
|
||||
<DefaultNavbar />
|
||||
|
||||
<Box sx={{ p: 2 }}>{children}</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
</Styling>
|
||||
);
|
||||
51
components/layout/defaultNavbar.tsx
Normal file
51
components/layout/defaultNavbar.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import { FC, useMemo } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { Breadcrumbs, Link as MuiLink } from "@mui/material";
|
||||
import Link from "next/link";
|
||||
|
||||
export const DefaultNavbar: FC = () => {
|
||||
const router = useRouter();
|
||||
|
||||
const breadcrumbs = useMemo(() => {
|
||||
const linkPath = router.asPath.split("/");
|
||||
linkPath.shift();
|
||||
return linkPath.map((path, i) => ({
|
||||
breadcrumb: path,
|
||||
href: "/" + linkPath.slice(0, i + 1).join("/"),
|
||||
}));
|
||||
}, [router.asPath]);
|
||||
|
||||
if (!breadcrumbs) {
|
||||
return null;
|
||||
}
|
||||
|
||||
console.log(breadcrumbs);
|
||||
|
||||
return (
|
||||
<Breadcrumbs aria-label="breadcrumb">
|
||||
<Link href="/" passHref>
|
||||
<MuiLink
|
||||
underline="hover"
|
||||
color={
|
||||
breadcrumbs.length === 1 && breadcrumbs[0].href == "/"
|
||||
? "text.primary"
|
||||
: "inherit"
|
||||
}
|
||||
>
|
||||
home
|
||||
</MuiLink>
|
||||
</Link>
|
||||
|
||||
{breadcrumbs.map((breadcrumb, i) => (
|
||||
<Link key={breadcrumb.href} href={breadcrumb.href} passHref>
|
||||
<MuiLink
|
||||
underline="hover"
|
||||
color={i === breadcrumbs.length - 1 ? "text.primary" : "inherit"}
|
||||
>
|
||||
{breadcrumb.breadcrumb}
|
||||
</MuiLink>
|
||||
</Link>
|
||||
))}
|
||||
</Breadcrumbs>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user