zucchetti-sa5/themes/onepirate/modules/views/AppFooter.js
Arnaud Fauconnet 328a760eb8 added theme
2022-10-28 11:41:58 +02:00

139 lines
3.9 KiB
JavaScript

import * as React from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Link from '@mui/material/Link';
import Container from '@mui/material/Container';
import Typography from '../components/Typography';
import TextField from '../components/TextField';
function Copyright() {
return (
<React.Fragment>
{'© '}
<Link color="inherit" href="https://mui.com/">
Your Website
</Link>{' '}
{new Date().getFullYear()}
</React.Fragment>
);
}
const iconStyle = {
width: 48,
height: 48,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'warning.main',
mr: 1,
'&:hover': {
bgcolor: 'warning.dark',
},
};
const LANGUAGES = [
{
code: 'en-US',
name: 'English',
},
{
code: 'fr-FR',
name: 'Français',
},
];
export default function AppFooter() {
return (
<Typography
component="footer"
sx={{ display: 'flex', bgcolor: 'secondary.light' }}
>
<Container sx={{ my: 8, display: 'flex' }}>
<Grid container spacing={5}>
<Grid item xs={6} sm={4} md={3}>
<Grid
container
direction="column"
justifyContent="flex-end"
spacing={2}
sx={{ height: 120 }}
>
<Grid item sx={{ display: 'flex' }}>
<Box component="a" href="https://mui.com/" sx={iconStyle}>
<img
src="/static/themes/onepirate/appFooterFacebook.png"
alt="Facebook"
/>
</Box>
<Box component="a" href="https://twitter.com/MUI_hq" sx={iconStyle}>
<img
src="/static/themes/onepirate/appFooterTwitter.png"
alt="Twitter"
/>
</Box>
</Grid>
<Grid item>
<Copyright />
</Grid>
</Grid>
</Grid>
<Grid item xs={6} sm={4} md={2}>
<Typography variant="h6" marked="left" gutterBottom>
Legal
</Typography>
<Box component="ul" sx={{ m: 0, listStyle: 'none', p: 0 }}>
<Box component="li" sx={{ py: 0.5 }}>
<Link href="/premium-themes/onepirate/terms/">Terms</Link>
</Box>
<Box component="li" sx={{ py: 0.5 }}>
<Link href="/premium-themes/onepirate/privacy/">Privacy</Link>
</Box>
</Box>
</Grid>
<Grid item xs={6} sm={8} md={4}>
<Typography variant="h6" marked="left" gutterBottom>
Language
</Typography>
<TextField
select
size="medium"
variant="standard"
SelectProps={{
native: true,
}}
sx={{ mt: 1, width: 150 }}
>
{LANGUAGES.map((language) => (
<option value={language.code} key={language.code}>
{language.name}
</option>
))}
</TextField>
</Grid>
<Grid item>
<Typography variant="caption">
{'Icons made by '}
<Link href="https://www.freepik.com" rel="sponsored" title="Freepik">
Freepik
</Link>
{' from '}
<Link href="https://www.flaticon.com" rel="sponsored" title="Flaticon">
www.flaticon.com
</Link>
{' is licensed by '}
<Link
href="https://creativecommons.org/licenses/by/3.0/"
title="Creative Commons BY 3.0"
target="_blank"
rel="noopener noreferrer"
>
CC 3.0 BY
</Link>
</Typography>
</Grid>
</Grid>
</Container>
</Typography>
);
}