86 lines
No EOL
3 KiB
JavaScript
86 lines
No EOL
3 KiB
JavaScript
import React from 'react';
|
|
import { Box, Container, Grid, Typography, Link, IconButton } from '@mui/material';
|
|
import FacebookIcon from '@mui/icons-material/Facebook';
|
|
import TwitterIcon from '@mui/icons-material/Twitter';
|
|
import InstagramIcon from '@mui/icons-material/Instagram';
|
|
import { Link as RouterLink } from 'react-router-dom';
|
|
|
|
const Footer = () => {
|
|
return (
|
|
<Box
|
|
component="footer"
|
|
sx={{
|
|
py: 3,
|
|
px: 2,
|
|
mt: 'auto',
|
|
backgroundColor: (theme) =>
|
|
theme.palette.mode === 'light'
|
|
? theme.palette.grey[200]
|
|
: theme.palette.grey[800],
|
|
}}
|
|
>
|
|
<Container maxWidth="lg">
|
|
<Grid container spacing={3}>
|
|
<Grid item xs={12} sm={4}>
|
|
<Typography variant="h6" color="text.primary" gutterBottom>
|
|
Rocks, Bones & Sticks
|
|
</Typography>
|
|
<Typography variant="body2" color="text.secondary">
|
|
Your premier source for natural curiosities
|
|
and unique specimens from my backyards.
|
|
</Typography>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} sm={4}>
|
|
<Typography variant="h6" color="text.primary" gutterBottom>
|
|
Quick Links
|
|
</Typography>
|
|
<Link component={RouterLink} to="/" color="inherit" display="block">
|
|
Home
|
|
</Link>
|
|
<Link component={RouterLink} to="/products" color="inherit" display="block">
|
|
Shop All
|
|
</Link>
|
|
<Link component={RouterLink} to="/products?category=Rock" color="inherit" display="block">
|
|
Rocks
|
|
</Link>
|
|
<Link component={RouterLink} to="/products?category=Bone" color="inherit" display="block">
|
|
Bones
|
|
</Link>
|
|
<Link component={RouterLink} to="/products?category=Stick" color="inherit" display="block">
|
|
Sticks
|
|
</Link>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} sm={4}>
|
|
<Typography variant="h6" color="text.primary" gutterBottom>
|
|
Connect With Us
|
|
</Typography>
|
|
<Box>
|
|
<IconButton aria-label="facebook" color="primary">
|
|
<FacebookIcon />
|
|
</IconButton>
|
|
<IconButton aria-label="twitter" color="primary">
|
|
<TwitterIcon />
|
|
</IconButton>
|
|
<IconButton aria-label="instagram" color="primary">
|
|
<InstagramIcon />
|
|
</IconButton>
|
|
</Box>
|
|
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
|
|
Subscribe to our newsletter for updates on new items and promotions.
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Box mt={3}>
|
|
<Typography variant="body2" color="text.secondary" align="center">
|
|
© {new Date().getFullYear()} Rocks, Bones & Sticks. All rights reserved.
|
|
</Typography>
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Footer; |