g
/
litmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update footer

Browse Source
master
gman 2 years ago
parent ffca25d8d8
commit 5b711c90eb
2 changed files with 143 additions and 155 deletions
Show Stats Download Patch File Download Diff File

260
src/Footer.tsx
Unescape View File

@ -1,147 +1,173 @@
import { createStyles, Text, Container, rem, Title } from '@mantine/core'; import {
createStyles,
Text,
Container,
rem,
Anchor,
Image,
} from "@mantine/core";
// import { IconBrandTwitter, IconBrandYoutube, IconBrandInstagram } from '@tabler/icons-react'; // import { IconBrandTwitter, IconBrandYoutube, IconBrandInstagram } from '@tabler/icons-react';
// import { MantineLogo } from '@mantine/ds'; // import { MantineLogo } from '@mantine/ds';
import logo from "./assets/logos/logo-text.png";
import fund from "./assets/logos/fund.png";
import association from "./assets/logos/association.png";
import glm from "./assets/logos/glm.png";
const useStyles = createStyles((theme) => ({ const useStyles = createStyles((theme) => ({
footer: { footer: {
paddingTop: rem(40), paddingTop: rem(40),
paddingBottom: rem(40), paddingBottom: rem(40),
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0], backgroundColor: "#eb7b1a",
borderTop: `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2] borderTop: `${rem(1)} solid ${
}`, theme.colors.dark[5]
}`,
},
logo: {
maxWidth: rem(200),
[theme.fn.smallerThan("sm")]: {
display: "flex",
flexDirection: "column",
alignItems: "center",
}, },
},
logo: { description: {
maxWidth: rem(200), marginTop: rem(5),
[theme.fn.smallerThan('sm')]: { [theme.fn.smallerThan("sm")]: {
display: 'flex', marginTop: theme.spacing.xs,
flexDirection: 'column', textAlign: "center",
alignItems: 'center',
},
}, },
},
description: { inner: {
marginTop: rem(5), display: "flex",
justifyContent: "space-between",
[theme.fn.smallerThan('sm')]: { [theme.fn.smallerThan("sm")]: {
marginTop: theme.spacing.xs, flexDirection: "column",
textAlign: 'center', alignItems: "center",
},
}, },
},
inner: { groups: {
display: 'flex', display: "flex",
justifyContent: 'space-between', flexWrap: "wrap",
[theme.fn.smallerThan('sm')]: { [theme.fn.smallerThan("sm")]: {
flexDirection: 'column', display: "none",
alignItems: 'center',
},
}, },
},
groups: { wrapper: {
display: 'flex', width: rem(160),
flexWrap: 'wrap', },
[theme.fn.smallerThan('sm')]: { link: {
display: 'none', display: "block",
}, color: theme.colors.dark[4],
}, fontSize: theme.fontSizes.sm,
paddingTop: rem(3),
wrapper: { paddingBottom: rem(3),
width: rem(160),
},
link: {
display: 'block',
color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[6],
fontSize: theme.fontSizes.sm,
paddingTop: rem(3),
paddingBottom: rem(3),
'&:hover': { "&:hover": {
textDecoration: 'underline', textDecoration: "underline",
},
}, },
},
title: {
fontSize: theme.fontSizes.lg, title: {
fontWeight: 700, fontSize: theme.fontSizes.lg,
fontFamily: `Greycliff CF, ${theme.fontFamily}`, fontWeight: 700,
marginBottom: `calc(${theme.spacing.xs} / 2)`, fontFamily: `Greycliff CF, ${theme.fontFamily}`,
color: theme.colorScheme === 'dark' ? theme.white : theme.black, marginBottom: `calc(${theme.spacing.xs} / 2)`,
}, color: theme.colors.dark[5],
},
afterFooter: {
display: 'flex', afterFooter: {
justifyContent: 'space-between', display: "flex",
alignItems: 'center', justifyContent: "space-around",
marginTop: theme.spacing.xl, gap: "30px",
paddingTop: theme.spacing.xl, alignItems: "center",
paddingBottom: theme.spacing.xl, marginTop: theme.spacing.xl,
borderTop: `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2] paddingTop: theme.spacing.xl,
}`, paddingBottom: theme.spacing.xl,
borderTop: `${rem(1)} solid ${
[theme.fn.smallerThan('sm')]: { theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.dark[4]
flexDirection: 'column', }`,
},
[theme.fn.smallerThan("sm")]: {
flexDirection: "column",
}, },
},
social: { social: {
[theme.fn.smallerThan('sm')]: { [theme.fn.smallerThan("sm")]: {
marginTop: theme.spacing.xs, marginTop: theme.spacing.xs,
},
}, },
},
})); }));
interface FooterLinksProps { interface FooterLinksProps {
data: { data: {
title: string; title: string;
links: { label: string; link: string }[]; links: { label: string; link: string }[];
}[]; }[];
} }
export function FooterLinks({ data }: FooterLinksProps) { export function FooterLinks({ data }: FooterLinksProps) {
const { classes } = useStyles(); const { classes } = useStyles();
const groups = data.map((group) => { const groups = data.map((group) => {
const links = group.links.map((link, index) => ( const links = group.links.map((link, index) => (
<Text<'a'> <Text<"a">
key={index} key={index}
className={classes.link} className={classes.link}
component="a" component="a"
href={link.link} href={link.link}
onClick={(event) => event.preventDefault()} onClick={(event) => event.preventDefault()}
> >
{link.label} {link.label}
</Text> </Text>
)); ));
return (
<div className={classes.wrapper} key={group.title}>
<Text className={classes.title}>{group.title}</Text>
{links}
</div>
);
});
return ( return (
<footer className={classes.footer}> <div className={classes.wrapper} key={group.title}>
<Container className={classes.inner}> <Text className={classes.title}>{group.title}</Text>
<div className={classes.logo}> {links}
<Title order={3}>Литературные музеи России</Title> </div>
{/* <MantineLogo size={30} /> */}
<Text size="xs" color="dimmed" className={classes.description}>
геоинформационный портал
</Text>
<Text size="xs" className={classes.description}>
Проект создан при поддержке Фонда "История Отечества"
</Text>
</div>
<div className={classes.groups}>{groups}</div>
</Container>
</footer>
); );
} });
return (
<footer className={classes.footer}>
<Container className={classes.inner}>
<div className={classes.logo}>
{/* <Title order={3}>Литературные музеи России</Title> */}
{/* <MantineLogo size={30} /> */}
<Image src={logo} />
<Text size="xs" color="#373A40" className={classes.description}>
геоинформационный портал
</Text>
<Text size="xs" color="#373A40" className={classes.description}>
Проект создан при поддержке Фонда "История Отечества"
</Text>
</div>
<div className={classes.groups}>{groups}</div>
</Container>
<Container className={classes.afterFooter}>
<Anchor href="https://fond.historyrussia.org/" target="_blank">
<Image src={fund} maw={110} />
</Anchor>
<Anchor href="https://goslitmuz.ru/" target="_blank">
<Image src={glm} maw={300} />
</Anchor>
<Anchor href="https://goslitmuz.ru/projects/174/2361/" target="_blank">
<Image src={association} maw={90} />
</Anchor>
</Container>
</footer>
);
}

38
src/assets/footer.json
Unescape View File

@ -7,49 +7,11 @@
"label": "Карта", "label": "Карта",
"link": "#" "link": "#"
}, },
{
"label": "Статьи",
"link": "#"
},
{ {
"label": "О проекте", "label": "О проекте",
"link": "#" "link": "#"
} }
] ]
},
{
"title": "Проект",
"links": [
{
"label": "Присоединиться",
"link": "#"
},
{
"label": "Обратная связь",
"link": "#"
},
{
"label": "Репозиторий",
"link": "#"
},
{
"label": "Релизы",
"link": "#"
}
]
},
{
"title": "Сообщество",
"links": [
{
"label": "Гослитмузей",
"link": "#"
},
{
"label": "Ассоциация музеев",
"link": "#"
}
]
} }
] ]
} }
Write Preview
Loading…
Cancel
Save