From c6401e27504ffd233a518bf2496af043bd7570d6 Mon Sep 17 00:00:00 2001 From: Iakovos Mastrogiannopoulos Date: Sun, 6 Feb 2022 01:53:39 +0200 Subject: [PATCH] Add header, footer and index page --- components/Footer.tsx | 30 ++ components/Header.tsx | 47 +++ components/Hero.tsx | 68 +++++ components/MuiNextLink.tsx | 71 +++++ components/Navbar.tsx | 29 ++ components/SectionAbout.tsx | 36 +++ components/SideDrawer.tsx | 76 +++++ package.json | 7 + pages/_app.tsx | 32 +- pages/_document.tsx | 81 +++++ pages/about.tsx | 5 + pages/api/hello.ts | 13 - pages/index.tsx | 81 +---- public/analysis.svg | 1 + public/home.jpg | Bin 0 -> 549154 bytes styles/Home.module.css | 116 ------- styles/createEmotionCache.ts | 5 + styles/globals.css | 19 +- styles/theme.ts | 13 + tsconfig.json | 6 +- yarn.lock | 578 ++++++++++++++++++++++++++++++++++- 21 files changed, 1086 insertions(+), 228 deletions(-) create mode 100644 components/Footer.tsx create mode 100644 components/Header.tsx create mode 100644 components/Hero.tsx create mode 100644 components/MuiNextLink.tsx create mode 100644 components/Navbar.tsx create mode 100644 components/SectionAbout.tsx create mode 100644 components/SideDrawer.tsx create mode 100644 pages/_document.tsx create mode 100644 pages/about.tsx delete mode 100644 pages/api/hello.ts create mode 100644 public/analysis.svg create mode 100644 public/home.jpg delete mode 100644 styles/Home.module.css create mode 100644 styles/createEmotionCache.ts create mode 100644 styles/theme.ts diff --git a/components/Footer.tsx b/components/Footer.tsx new file mode 100644 index 0000000..41e6558 --- /dev/null +++ b/components/Footer.tsx @@ -0,0 +1,30 @@ +import { Box, Stack, Typography } from "@mui/material" +import { GitHub } from '@mui/icons-material' +import MuiNextLink from "./MuiNextLink" + +const Footer = () => { + return ( + + + + + + + + Coded with ❤️️ by IakMastro + + + ) +} + +export default Footer \ No newline at end of file diff --git a/components/Header.tsx b/components/Header.tsx new file mode 100644 index 0000000..f00b569 --- /dev/null +++ b/components/Header.tsx @@ -0,0 +1,47 @@ +import AppBar from '@mui/material/AppBar' +import Container from '@mui/material/Container' +import Toolbar from '@mui/material/Toolbar' +import IconButton from '@mui/material/IconButton' +import Home from '@mui/icons-material/Home' +import { styled } from '@mui/system' +import MuiNextLink from '@components/MuiNextLink' +import Navbar from '@components/Navbar' +import SideDrawer from '@components/SideDrawer' + +const Offset = styled("div")(({ theme }) => theme.mixins.toolbar) + +const navLinks = [ + { title: `home`, path: '/' }, + { title: `about`, path: '/about' }, +] + +const Header = () => { + return ( + <> + + + + + + theme.palette.common.white, + }} + fontSize="large" + /> + + + + + + + + + + ) +} + +export default Header \ No newline at end of file diff --git a/components/Hero.tsx b/components/Hero.tsx new file mode 100644 index 0000000..f9238cf --- /dev/null +++ b/components/Hero.tsx @@ -0,0 +1,68 @@ +import Grid from '@mui/material/Grid' +import Image from "next/image" +import Typography from '@mui/material/Typography' +import ArrowDownward from "@mui/icons-material/ArrowDownward" + +const Hero = ({ imgSrc, imgAlt, title, subtitle }) => { + return ( + + {imgAlt} + + + + {title} + + + {subtitle} + + + Scroll + + + + + + ) +} + +export default Hero \ No newline at end of file diff --git a/components/MuiNextLink.tsx b/components/MuiNextLink.tsx new file mode 100644 index 0000000..2999c1e --- /dev/null +++ b/components/MuiNextLink.tsx @@ -0,0 +1,71 @@ +import * as React from "react" +import clsx from 'clsx' +import { useRouter } from 'next/router' +import NextLink from 'next/link' +import MuiLink from '@mui/material/Link' + +export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props: any, ref) { + const { to, linkAs, href, replace, scroll, passHref, shallow, prefetch, locale, ...other } = props + + return ( + + + + ) +}) + +// A styled version of the Next.js Link component: +// https://nextjs.org/docs/#with-link +const Link = React.forwardRef(function Link(props: any, ref) { + const { + activeClassName = "active", + as: linkAs, + className: classNameProps, + href, + noLinkStyle, + role, // Links don't have roles. + ...other + } = props + + const router = useRouter() + const pathname: string = typeof href === "string" ? href : href.pathname + const className = clsx(classNameProps, { + [activeClassName]: router.pathname === pathname && activeClassName, + }) + + const isExternal: boolean = typeof href === "string" && (href.indexOf('http') === 0 || href.indexOf('mailto:') === 0) + + if (isExternal) { + if (noLinkStyle) { + return + } + + return + } + + if (noLinkStyle) { + return + } + + return ( + + ) +}) + +export default Link \ No newline at end of file diff --git a/components/Navbar.tsx b/components/Navbar.tsx new file mode 100644 index 0000000..0a8f75b --- /dev/null +++ b/components/Navbar.tsx @@ -0,0 +1,29 @@ +import Stack from "@mui/material/Stack" +import Toolbar from "@mui/material/Toolbar" +import MuiNextLink from "@components/MuiNextLink" + +const Navbar = ({ navLinks }) => { + return ( + + + {navLinks.map(({ title, path }, i: string) => ( + + {title} + + ))} + + + ) +} + +export default Navbar \ No newline at end of file diff --git a/components/SectionAbout.tsx b/components/SectionAbout.tsx new file mode 100644 index 0000000..6c92ead --- /dev/null +++ b/components/SectionAbout.tsx @@ -0,0 +1,36 @@ +import { Button, Container, Grid, Typography } from "@mui/material" +import Image from "next/image" +import MuiNextLink from "./MuiNextLink" + +const SectionAbout = () => { + return ( + + + + An image containing plots in front of a screen showing all of the world! + + + + Maintain your Swarm simple and fast! + + + Create the Swarm of your dream using our platform! Use whatever you want, however you want simple, fast and system agnostic. Now, your application can exist in many different locations through the whole world for free! + + + + + + + + ) +} + +export default SectionAbout \ No newline at end of file diff --git a/components/SideDrawer.tsx b/components/SideDrawer.tsx new file mode 100644 index 0000000..578ed96 --- /dev/null +++ b/components/SideDrawer.tsx @@ -0,0 +1,76 @@ +import Box from "@mui/material/Box" +import Typography from "@mui/material/Typography" +import Drawer from "@mui/material/Drawer" +import IconButton from "@mui/material/IconButton" +import Menu from "@mui/icons-material/Menu" +import MuiNextLink from "@components/MuiNextLink" +import { useState } from "react" + +const SideDrawer = ({ navLinks }) => { + const [state, setState] = useState({ + right: false, + }) + + const toggleDrawer = (anchor, open) => (event) => { + if (event.type === "keydown" && (event.key === "Tab" || event.key === "Shift")) { + return ; + } + + setState({...state, [anchor]: open}) + } + + const list = (anchor) => ( + + {navLinks.map(({ title, path }, i) => ( + + + {title} + + + ))} + + ) + + return ( + <> + + + + + { list("right") } + + + ) +} + +export default SideDrawer \ No newline at end of file diff --git a/package.json b/package.json index 0b82978..a9621fb 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,13 @@ "lint": "next lint" }, "dependencies": { + "@emotion/cache": "^11.7.1", + "@emotion/react": "^11.7.1", + "@emotion/server": "^11.4.0", + "@emotion/styled": "^11.6.0", + "@mui/icons-material": "^5.0.0-rc.1", + "@mui/material": "^5.0.0-rc.1", + "clsx": "^1.1.1", "next": "12.0.10", "react": "17.0.2", "react-dom": "17.0.2" diff --git a/pages/_app.tsx b/pages/_app.tsx index 3f5c9d5..f01fee3 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,8 +1,34 @@ +import Head from 'next/head' import '../styles/globals.css' -import type { AppProps } from 'next/app' +import createEmotionCache from '../styles/createEmotionCache' +import { EmotionCache } from '@emotion/cache' +import { CacheProvider, ThemeProvider } from '@emotion/react' +import Header from '@components/Header' -function MyApp({ Component, pageProps }: AppProps) { - return +import '../styles/globals.css' +import theme from '../styles/theme' +import { CssBaseline } from '@mui/material' +import Footer from '@components/Footer' + +const clientSideEmotionCache: EmotionCache = createEmotionCache() + +function MyApp(props: any) { + const { Component, emotionCache = clientSideEmotionCache, pageProps } = props + + return ( + + + Project FaaS + + + + +
+ +