scaffold footer

This commit is contained in:
desmukh 2023-01-06 02:12:55 +05:00
parent f1e80c32b6
commit a282201728
3 changed files with 54 additions and 7 deletions

50
src/components/footer.js Normal file
View File

@ -0,0 +1,50 @@
import { Box, Container, Grid, Typography } from "@mui/material"
import { StaticImage } from "gatsby-plugin-image"
import React from "react"
const address={
name: "Autonomic Co-operative Limited",
line1: "1539 Pershore Road",
city: "Birmingham",
postcode: "B30 2JH",
country: "United Kingdom"
}
const FooterText = ({ children, bold }) => {
const normalStyle = { fontSize: 10, lineHeight: "14px" }
const boldStyle = { fontSize: 14 }
return <Typography sx={bold ? boldStyle : normalStyle}>{children}</Typography>
}
const Footer = () => (
<Box
component="footer"
color="secondary.contrastText"
bgcolor="secondary.main"
py={5}
>
<Container maxWidth="sm">
<Grid container>
<Grid item xs={12} md={1}>
<StaticImage src="../images/autonomic-monster.png" width={38} />
</Grid>
<Grid item xs={12} md={6}>
<FooterText bold>{address.name}</FooterText>
<FooterText>{address.line1}</FooterText>
<FooterText>{address.city}</FooterText>
<FooterText>{address.postcode}</FooterText>
<FooterText>{address.country}</FooterText>
</Grid>
<Grid item xs={12} md={5}>
<FooterText bold>
We are a Co-operative Society registered with the FCA.
</FooterText>
<FooterText>Registration Number: 4597</FooterText>
<FooterText bold>Member of the CoTech Network</FooterText>
</Grid>
</Grid>
</Container>
</Box>
)
export default Footer

View File

@ -3,6 +3,7 @@ import { Link as GatsbyLink } from "gatsby"
import { AppBar, Container, CssBaseline, Grid, Link, ThemeProvider, Toolbar } from "@mui/material"
import NavMenu from "./nav-menu"
import theme from "./theme"
import Footer from "./footer"
const Layout = ({ location, title, children }) => {
// const rootPath = `${__PATH_PREFIX__}/`
@ -44,7 +45,7 @@ const Layout = ({ location, title, children }) => {
</Link>
</Toolbar>
</AppBar>
<Container maxWidth="md" >
<Container maxWidth="md" sx={{ py: 8 }}>
<Grid container>
<Grid item xs={12} md={3}>
<NavMenu />
@ -53,12 +54,8 @@ const Layout = ({ location, title, children }) => {
<main>{children}</main>
</Grid>
</Grid>
<footer>
© {new Date().getFullYear()}, Built with
{` `}
<a href="https://www.gatsbyjs.com">Gatsby</a>
</footer>
</Container>
<Footer />
</ThemeProvider>
</>
)

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB