add two new components: Link, Layout
This commit is contained in:
parent
9e75ad97e7
commit
b8fb89ab16
52
src/common/Layout/Footer.tsx
Normal file
52
src/common/Layout/Footer.tsx
Normal file
|
@ -0,0 +1,52 @@
|
||||||
|
import { AUTHOR } from 'config/app';
|
||||||
|
|
||||||
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
|
import { AppBar, Toolbar, Typography, Container } from '@material-ui/core';
|
||||||
|
import Link from 'common/Link/Link';
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
const classes = useStyles();
|
||||||
|
return (
|
||||||
|
<AppBar className={classes.footer} position="absolute" component="footer">
|
||||||
|
<Toolbar disableGutters>
|
||||||
|
<Container className={classes.container}>
|
||||||
|
<Typography component="p">
|
||||||
|
zdamegzaminzawodowy.pl © {new Date().getFullYear()}
|
||||||
|
</Typography>
|
||||||
|
<div className={classes.links}>
|
||||||
|
<Link
|
||||||
|
color="inherit"
|
||||||
|
underline="hover"
|
||||||
|
title="Kontakt"
|
||||||
|
href={AUTHOR.CONTACT}
|
||||||
|
>
|
||||||
|
Kontakt
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</Toolbar>
|
||||||
|
</AppBar>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const useStyles = makeStyles(theme => {
|
||||||
|
return {
|
||||||
|
footer: {
|
||||||
|
top: 'auto',
|
||||||
|
bottom: 0,
|
||||||
|
},
|
||||||
|
container: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
},
|
||||||
|
links: {
|
||||||
|
'& > *:not(:last-child)': {
|
||||||
|
marginRight: theme.spacing(1),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Footer;
|
35
src/common/Layout/Layout.tsx
Normal file
35
src/common/Layout/Layout.tsx
Normal file
|
@ -0,0 +1,35 @@
|
||||||
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
|
import { Toolbar } from '@material-ui/core';
|
||||||
|
import TopBar from './TopBar';
|
||||||
|
import Footer from './Footer';
|
||||||
|
|
||||||
|
export interface LayoutProps {
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Layout = ({ children }: LayoutProps) => {
|
||||||
|
const classes = useStyles();
|
||||||
|
return (
|
||||||
|
<div className={classes.container}>
|
||||||
|
<TopBar />
|
||||||
|
<main className={classes.main}>
|
||||||
|
<Toolbar />
|
||||||
|
{children}
|
||||||
|
<Toolbar />
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const useStyles = makeStyles(theme => ({
|
||||||
|
main: {
|
||||||
|
padding: theme.spacing(3, 0),
|
||||||
|
minHeight: '100vh',
|
||||||
|
},
|
||||||
|
container: {
|
||||||
|
position: 'relative',
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default Layout;
|
54
src/common/Layout/TopBar.tsx
Normal file
54
src/common/Layout/TopBar.tsx
Normal file
|
@ -0,0 +1,54 @@
|
||||||
|
import { Route } from 'config/routing';
|
||||||
|
|
||||||
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
|
import { AppBar, Toolbar, Typography, Container } from '@material-ui/core';
|
||||||
|
import Link from 'common/Link/Link';
|
||||||
|
|
||||||
|
const TopBar = () => {
|
||||||
|
const classes = useStyles();
|
||||||
|
return (
|
||||||
|
<AppBar position="absolute" component="header" className={classes.navbar}>
|
||||||
|
<Container>
|
||||||
|
<Toolbar disableGutters>
|
||||||
|
<div>
|
||||||
|
<Typography className={classes.title} variant="h4">
|
||||||
|
<Link href={Route.IndexPage} title="Strona główna">
|
||||||
|
<img src="/logo.svg" alt="zdamegzaminzawodowy.pl" />
|
||||||
|
<span>zdamegzaminzawodowy.pl</span>
|
||||||
|
</Link>
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</Toolbar>
|
||||||
|
</Container>
|
||||||
|
</AppBar>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const useStyles = makeStyles(theme => ({
|
||||||
|
navbar: {
|
||||||
|
'& a': {
|
||||||
|
transition: 'all .2s',
|
||||||
|
cursor: 'pointer',
|
||||||
|
padding: theme.spacing(0.75, 1),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
'& a': {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
color: 'inherit',
|
||||||
|
'& span': {
|
||||||
|
[theme.breakpoints.down('xs')]: {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'& img': {
|
||||||
|
width: theme.spacing(6),
|
||||||
|
marginRight: theme.spacing(1),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default TopBar;
|
49
src/common/Link/Link.tsx
Normal file
49
src/common/Link/Link.tsx
Normal file
|
@ -0,0 +1,49 @@
|
||||||
|
import NextLink, { LinkProps as NextLinkProps } from 'next/link';
|
||||||
|
import { Link as MUILink, LinkProps as MUILinkProps } from '@material-ui/core';
|
||||||
|
|
||||||
|
export type LinkProps = Omit<MUILinkProps, 'href'> &
|
||||||
|
Pick<
|
||||||
|
NextLinkProps,
|
||||||
|
'href' | 'as' | 'replace' | 'scroll' | 'prefetch' | 'shallow' | 'locale'
|
||||||
|
>;
|
||||||
|
|
||||||
|
const Link = ({
|
||||||
|
href,
|
||||||
|
as,
|
||||||
|
replace,
|
||||||
|
scroll,
|
||||||
|
prefetch,
|
||||||
|
shallow,
|
||||||
|
locale,
|
||||||
|
children,
|
||||||
|
...rest
|
||||||
|
}: LinkProps) => {
|
||||||
|
if (
|
||||||
|
typeof href === 'string' &&
|
||||||
|
(href.match(/^([a-z0-9]*:|.{0})\/\/.*$/gim) ||
|
||||||
|
href.substr(0, 7) === 'mailto:')
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<MUILink href={href} {...rest}>
|
||||||
|
{children}
|
||||||
|
</MUILink>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NextLink
|
||||||
|
passHref
|
||||||
|
href={href}
|
||||||
|
as={as}
|
||||||
|
replace={replace}
|
||||||
|
scroll={scroll}
|
||||||
|
prefetch={prefetch}
|
||||||
|
shallow={shallow}
|
||||||
|
locale={locale}
|
||||||
|
>
|
||||||
|
<MUILink {...rest}>{children}</MUILink>
|
||||||
|
</NextLink>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Link;
|
4
src/config/app.ts
Normal file
4
src/config/app.ts
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
export const AUTHOR = {
|
||||||
|
FULL_NAME: 'Dawid Wysokiński',
|
||||||
|
CONTACT: 'https://dwysokinski.me/#contact',
|
||||||
|
};
|
3
src/config/routing.ts
Normal file
3
src/config/routing.ts
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
export enum Route {
|
||||||
|
IndexPage = '/',
|
||||||
|
}
|
|
@ -1,5 +1,7 @@
|
||||||
|
import Layout from 'common/Layout/Layout';
|
||||||
|
|
||||||
const IndexPage = () => {
|
const IndexPage = () => {
|
||||||
return <div>hello?</div>;
|
return <Layout>hello?</Layout>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default IndexPage;
|
export default IndexPage;
|
||||||
|
|
Reference in New Issue
Block a user