Skip to content

S
Saddlemountain Page
Commit 71103f9d authored by VeroSilva's avatar VeroSilva
Browse files
Options

Component Footer

parent 9e7620d9
Hide whitespace changes
Inline Side-by-side
Showing with 264 additions and 34 deletions
src/components/ContactButton.jsx
View file @ 71103f9d
......@@ -11,10 +11,13 @@ import theme from "./palette"
const myPalette = theme.palette
const CustomButton = styled(Button)(({ theme }) => ({
color: myPalette.secondary.contrastText,
backgroundColor: myPalette.secondary.main,
color: `${myPalette.secondary.contrastText} !important`,
backgroundColor: `${myPalette.secondary.main} !important`,
paddingTop: "5px !important",
paddingBottom: "5px !important",
borderRadius: "5px !important",
"&:hover": {
backgroundColor: myPalette.secondary.light,
backgroundColor: `${myPalette.secondary.light} !important`,
},
}))
......
src/components/Footer.jsx 0 → 100644
View file @ 71103f9d
import React from "react"
import Grid from "@mui/material/Grid"
import Box from "@mui/material/Box"
import Container from "@mui/material/Container"
import Typography from "@mui/material/Typography"
import { makeStyles } from "@material-ui/core"
import Link from "@mui/material/Link"
import List from "@mui/material/List"
import ListItem from "@mui/material/ListItem"
import ListItemText from "@mui/material/ListItemText"
import FormFooter from "./FormFooter"
import { FooterContainer, NavLinkFooter } from "./styled"
import theme from "./palette"
const myPalette = theme.palette
const useStyles = makeStyles((theme) => ({
title: {
color: myPalette.primary.contrastText,
fontWeight: "700",
textTransform: "uppercase",
letterSpacing: "2px",
textAlign: "center",
},
list: {
color: myPalette.primary.contrastText,
},
}))
function Footer() {
const classes = useStyles()
return (
<FooterContainer bg={myPalette.secondary.dark}>
<Box>
<Container>
<Grid container spacing={3}>
<Grid item sm={12} md={3}>LOGO</Grid>
<Grid item sm={12} md={3}>
<Typography component="h5" className={classes.title}>
Contáctanos
</Typography>
<FormFooter />
</Grid>
<Grid item sm={12} md={3}>
<Typography component="h5" className={classes.title}>
Sobre nosotros
</Typography>
<List dense className={classes.list}>
<ListItem>
<ListItemText>
<Typography component="p">
Dirección
</Typography>
</ListItemText>
</ListItem>
<ListItem>
<ListItemText>
<Typography component="p">
+51 123456789
</Typography>
</ListItemText>
</ListItem>
<ListItem>
<ListItemText>
<Typography component="p">
email@gmail.com
</Typography>
</ListItemText>
</ListItem>
</List>
</Grid>
<Grid item sm={12} md={3}>
<Typography component="h5" className={classes.title}>
Sitio
</Typography>
<List dense className={classes.list}>
<ListItem>
<ListItemText>
<Typography>
<NavLinkFooter href="#">Productos</NavLinkFooter>
</Typography>
</ListItemText>
</ListItem>
<ListItem>
<ListItemText>
<Typography>
<NavLinkFooter href="#">Testimonios</NavLinkFooter>
</Typography>
</ListItemText>
</ListItem>
<ListItem>
<ListItemText>
<Typography>
<NavLinkFooter href="#">Blog</NavLinkFooter>
</Typography>
</ListItemText>
</ListItem>
</List>
</Grid>
</Grid>
<Typography variant="body2" align="center" color={myPalette.secondary.contrastText} sx={{ py: 2 }}>
{"Copyright © "}
<Link color="inherit" href="#">
Saddlemountain Technologies
</Link>{" "}
{new Date().getFullYear()}
{"."}
</Typography>
</Container>
</Box>
</FooterContainer>
)
};
export default Footer
src/components/FormFooter.jsx 0 → 100644
View file @ 71103f9d
import React from "react"
import TextField from "@mui/material/TextField"
import Box from "@mui/material/Box"
import { withStyles } from "@material-ui/core"
import ContactButton from "./ContactButton"
import theme from "./palette"
const myPalette = theme.palette
const CustomTextField = withStyles({
root: {
"& label.Mui-focused": {
color: "white",
},
"& .MuiInput-underline:after": {
borderBottomColor: myPalette.primary.main,
},
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: myPalette.primary.main,
},
"&:hover fieldset": {
borderColor: myPalette.primary.main,
},
"&.Mui-focused fieldset": {
borderColor: myPalette.primary.main,
},
},
},
})(TextField)
function FormFooter() {
const handleSubmit = (event) => {
event.preventDefault()
const data = new FormData(event.currentTarget)
// eslint-disable-next-line no-console
console.log({
email: data.get("nombre"),
password: data.get("password"),
})
}
return (
<Box component="form" onSubmit={handleSubmit} noValidate>
<CustomTextField
margin="normal"
required
fullWidth
id="name"
label="Nombre"
name="name"
autoComplete="name"
autoFocus
InputLabelProps={{
style: { color: myPalette.primary.contrastText},
}}
/>
<CustomTextField
margin="normal"
required
fullWidth
name="email"
label="Email"
type="email"
id="email"
autoComplete="email"
InputLabelProps={{
style: { color: myPalette.primary.contrastText},
}}
/>
<CustomTextField
margin="normal"
required
fullWidth
name="phone"
label="Teléfono"
type="number"
id="phone"
autoComplete="phone"
InputLabelProps={{
style: { color: myPalette.primary.contrastText},
}}
/>
<ContactButton>
Contactar
</ContactButton>
</Box>
)
}
export default FormFooter
src/components/Navbar.jsx
View file @ 71103f9d
......@@ -65,7 +65,7 @@ function Navbar(props) {
<Drawer />
) : (
<>
<NavLink href="#" edge="end" >Productos</NavLink>
<NavLink href="#">Productos</NavLink>
<NavLink href="#">Quiénes somos</NavLink>
<NavLink href="#">Blog</NavLink>
<NavLink href="#">Clientes</NavLink>
......
src/components/styled.js
View file @ 71103f9d
import styled from "styled-components";
import styled from "styled-components"
export const NavLink = styled.a`
export const NavLinkFooter = styled.a`
color: #ffffff;
margin-left: 20px;
text-decoration: inherit;
......@@ -10,7 +10,9 @@ export const NavLink = styled.a`
border-bottom: 2px solid #42C3D8;
cursor: pointer;
}
`
export const NavLink = styled(NavLinkFooter)`
@media only screen and (max-width: 959px) {
margin-left: 0px;
margin-right: 5px;
......@@ -18,4 +20,10 @@ export const NavLink = styled.a`
border-bottom: none;
}
}
`;
`
export const FooterContainer = styled.footer`
width: 100%;
height: auto;
background-color: ${props => props.bg};
`
src/index.js
View file @ 71103f9d
import React from "react";
import { render } from "react-dom";
import App from "./router/App";
import reportWebVitals from "./reportWebVitals";
import "@fontsource/roboto";
import React from "react"
import { render } from "react-dom"
import App from "./router/App"
import reportWebVitals from "./reportWebVitals"
import "@fontsource/roboto"
const rootElement = document.getElementById("root");
const rootElement = document.getElementById("root")
render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
)
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
reportWebVitals()
src/layouts/MainLayout.jsx
View file @ 71103f9d
import * as React from "react";
import Toolbar from "@mui/material/Toolbar";
import CssBaseline from "@mui/material/CssBaseline";
import Container from "@mui/material/Container";
import PropTypes from "prop-types";
import * as React from "react"
import Toolbar from "@mui/material/Toolbar"
import CssBaseline from "@mui/material/CssBaseline"
import Container from "@mui/material/Container"
import PropTypes from "prop-types"
import Navbar from "../components/Navbar";
import Navbar from "../components/Navbar"
import Footer from "../components/Footer"
MainLayout.propTypes = {
children: PropTypes.element.isRequired,
};
}
export default function MainLayout({ children }) {
return (
......@@ -16,10 +17,16 @@ export default function MainLayout({ children }) {
<CssBaseline />
<Navbar />
<Toolbar />
<Container>
<Container
sx={{
display: "flex",
flexDirection: "column",
minHeight: "100vh",
}}
>
{ children }
</Container>
<Footer />
</React.Fragment>
);
}
)
};
src/reportWebVitals.js
View file @ 71103f9d
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
getCLS(onPerfEntry)
getFID(onPerfEntry)
getFCP(onPerfEntry)
getLCP(onPerfEntry)
getTTFB(onPerfEntry)
})
}
};
}
export default reportWebVitals;
export default reportWebVitals
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment