update footer

2 years ago · 5b711c90eb
parent ffca25d8d8
commit 5b711c90eb
2 changed files with 143 additions and 155 deletions
--- a/src/Footer.tsx
+++ b/src/Footer.tsx
@ -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 { 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) => ({
-    footer: {
-        paddingTop: rem(40),
-        paddingBottom: rem(40),
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
-        borderTop: `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
-            }`,
+  footer: {
+    paddingTop: rem(40),
+    paddingBottom: rem(40),
+    backgroundColor: "#eb7b1a",
+    borderTop: `${rem(1)} solid ${
+      theme.colors.dark[5]
+    }`,
+  },
+
+  logo: {
+    maxWidth: rem(200),
+
+    [theme.fn.smallerThan("sm")]: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
    },
+  },

-    logo: {
-        maxWidth: rem(200),
+  description: {
+    marginTop: rem(5),

-        [theme.fn.smallerThan('sm')]: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-        },
+    [theme.fn.smallerThan("sm")]: {
+      marginTop: theme.spacing.xs,
+      textAlign: "center",
    },
+  },

-    description: {
-        marginTop: rem(5),
+  inner: {
+    display: "flex",
+    justifyContent: "space-between",

-        [theme.fn.smallerThan('sm')]: {
-            marginTop: theme.spacing.xs,
-            textAlign: 'center',
-        },
+    [theme.fn.smallerThan("sm")]: {
+      flexDirection: "column",
+      alignItems: "center",
    },
+  },

-    inner: {
-        display: 'flex',
-        justifyContent: 'space-between',
+  groups: {
+    display: "flex",
+    flexWrap: "wrap",

-        [theme.fn.smallerThan('sm')]: {
-            flexDirection: 'column',
-            alignItems: 'center',
-        },
+    [theme.fn.smallerThan("sm")]: {
+      display: "none",
    },
+  },

-    groups: {
-        display: 'flex',
-        flexWrap: 'wrap',
+  wrapper: {
+    width: rem(160),
+  },

-        [theme.fn.smallerThan('sm')]: {
-            display: 'none',
-        },
-    },
-
-    wrapper: {
-        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),
+  link: {
+    display: "block",
+    color: theme.colors.dark[4],
+    fontSize: theme.fontSizes.sm,
+    paddingTop: rem(3),
+    paddingBottom: rem(3),

-        '&:hover': {
-            textDecoration: 'underline',
-        },
+    "&:hover": {
+      textDecoration: "underline",
    },
-
-    title: {
-        fontSize: theme.fontSizes.lg,
-        fontWeight: 700,
-        fontFamily: `Greycliff CF, ${theme.fontFamily}`,
-        marginBottom: `calc(${theme.spacing.xs} / 2)`,
-        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
-    },
-
-    afterFooter: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginTop: theme.spacing.xl,
-        paddingTop: theme.spacing.xl,
-        paddingBottom: theme.spacing.xl,
-        borderTop: `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]
-            }`,
-
-        [theme.fn.smallerThan('sm')]: {
-            flexDirection: 'column',
-        },
+  },
+
+  title: {
+    fontSize: theme.fontSizes.lg,
+    fontWeight: 700,
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+    marginBottom: `calc(${theme.spacing.xs} / 2)`,
+    color: theme.colors.dark[5],
+  },
+
+  afterFooter: {
+    display: "flex",
+    justifyContent: "space-around",
+    gap: "30px",
+    alignItems: "center",
+    marginTop: theme.spacing.xl,
+    paddingTop: theme.spacing.xl,
+    paddingBottom: theme.spacing.xl,
+    borderTop: `${rem(1)} solid ${
+      theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.dark[4]
+    }`,
+
+    [theme.fn.smallerThan("sm")]: {
+      flexDirection: "column",
    },
+  },

-    social: {
-        [theme.fn.smallerThan('sm')]: {
-            marginTop: theme.spacing.xs,
-        },
+  social: {
+    [theme.fn.smallerThan("sm")]: {
+      marginTop: theme.spacing.xs,
    },
+  },
 }));

 interface FooterLinksProps {
-    data: {
-        title: string;
-        links: { label: string; link: string }[];
-    }[];
+  data: {
+    title: string;
+    links: { label: string; link: string }[];
+  }[];
 }

 export function FooterLinks({ data }: FooterLinksProps) {
-    const { classes } = useStyles();
-
-    const groups = data.map((group) => {
-        const links = group.links.map((link, index) => (
-            <Text<'a'>
-                key={index}
-                className={classes.link}
-                component="a"
-                href={link.link}
-                onClick={(event) => event.preventDefault()}
-            >
-                {link.label}
-            </Text>
-        ));
-
-        return (
-            <div className={classes.wrapper} key={group.title}>
-                <Text className={classes.title}>{group.title}</Text>
-                {links}
-            </div>
-        );
-    });
+  const { classes } = useStyles();
+
+  const groups = data.map((group) => {
+    const links = group.links.map((link, index) => (
+      <Text<"a">
+        key={index}
+        className={classes.link}
+        component="a"
+        href={link.link}
+        onClick={(event) => event.preventDefault()}
+      >
+        {link.label}
+      </Text>
+    ));

    return (
-        <footer className={classes.footer}>
-            <Container className={classes.inner}>
-                <div className={classes.logo}>
-                    <Title order={3}>Литературные музеи России</Title>
-                    {/* <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>
+      <div className={classes.wrapper} key={group.title}>
+        <Text className={classes.title}>{group.title}</Text>
+        {links}
+      </div>
    );
+  });
+
+  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>
+  );
 }
--- a/src/assets/footer.json
+++ b/src/assets/footer.json
@ -7,49 +7,11 @@
            "label": "Карта",
            "link": "#"
          },
-          {
-            "label": "Статьи",
-            "link": "#"
-          },
          {
            "label": "О проекте",
            "link": "#"
          }
        ]
-      },
-      {
-        "title": "Проект",
-        "links": [
-          {
-            "label": "Присоединиться",
-            "link": "#"
-          },
-          {
-            "label": "Обратная связь",
-            "link": "#"
-          },
-          {
-            "label": "Репозиторий",
-            "link": "#"
-          },
-          {
-            "label": "Релизы",
-            "link": "#"
-          }
-        ]
-      },
-      {
-        "title": "Сообщество",
-        "links": [
-          {
-            "label": "Гослитмузей",
-            "link": "#"
-          },
-          {
-            "label": "Ассоциация музеев",
-            "link": "#"
-          }
-        ]
      }
    ]
  }