kopia lustrzana https://github.com/bugout-dev/moonstream
139 wiersze
3.6 KiB
JavaScript
139 wiersze
3.6 KiB
JavaScript
import React from "react";
|
|
import {
|
|
Text,
|
|
Link,
|
|
Box,
|
|
Container,
|
|
SimpleGrid,
|
|
Stack,
|
|
Image as ChakraImage,
|
|
useColorModeValue,
|
|
VisuallyHidden,
|
|
chakra,
|
|
} from "@chakra-ui/react";
|
|
import RouterLink from "next/link";
|
|
import {
|
|
PRIMARY_MOON_LOGO_URL,
|
|
SITEMAP,
|
|
BACKGROUND_COLOR,
|
|
} from "../core/constants";
|
|
import { FaGithub, FaTwitter, FaDiscord, FaLinkedin } from "react-icons/fa";
|
|
import moment from "moment";
|
|
|
|
const LINKS_SIZES = {
|
|
fontWeight: "300",
|
|
fontSize: "md",
|
|
};
|
|
|
|
const ListHeader = ({ children }) => {
|
|
return (
|
|
<Text fontWeight="semibold" fontSize={"md"} mb={2}>
|
|
{children}
|
|
</Text>
|
|
);
|
|
};
|
|
|
|
const SocialButton = ({ children, label, href }) => {
|
|
return (
|
|
<chakra.button
|
|
bg={useColorModeValue("blackAlpha.100", "whiteAlpha.100")}
|
|
rounded={"full"}
|
|
w={8}
|
|
h={8}
|
|
cursor={"pointer"}
|
|
as={"a"}
|
|
href={href}
|
|
display={"inline-flex"}
|
|
alignItems={"center"}
|
|
justifyContent={"center"}
|
|
transition={"background 0.3s ease"}
|
|
_hover={{
|
|
bg: useColorModeValue("blackAlpha.200", "whiteAlpha.200"),
|
|
}}
|
|
>
|
|
<VisuallyHidden>{label}</VisuallyHidden>
|
|
{children}
|
|
</chakra.button>
|
|
);
|
|
};
|
|
|
|
const Footer = () => (
|
|
<Box
|
|
bg={BACKGROUND_COLOR}
|
|
textColor="white"
|
|
borderTop="1px"
|
|
borderColor="white"
|
|
>
|
|
<Container as={Stack} maxW={"8xl"} py={10}>
|
|
<SimpleGrid
|
|
templateColumns={{ sm: "1fr 1fr", md: "2fr 1fr 1fr 1fr 1fr 1fr" }}
|
|
spacing={8}
|
|
>
|
|
<Stack spacing={6}>
|
|
<Box>
|
|
<Link href="/" alignSelf="center">
|
|
<ChakraImage
|
|
alignSelf="center"
|
|
w="160px"
|
|
src={PRIMARY_MOON_LOGO_URL}
|
|
alt="Go to app root"
|
|
/>
|
|
</Link>
|
|
</Box>
|
|
<Text fontSize={"sm"}>
|
|
© {moment().year()} Moonstream.to All rights reserved
|
|
</Text>
|
|
</Stack>
|
|
<Stack>
|
|
<Text fontWeight="semibold">Follow Us</Text>
|
|
<Stack direction={"row"} spacing={6}>
|
|
<SocialButton label={"Discord"} href={"/discordleed"}>
|
|
<FaDiscord />
|
|
</SocialButton>
|
|
<SocialButton
|
|
label={"Twitter"}
|
|
href={"https://twitter.com/moonstreamto"}
|
|
>
|
|
<FaTwitter />
|
|
</SocialButton>
|
|
<SocialButton
|
|
label={"Github"}
|
|
href={"https://github.com/bugout-dev/moonstream"}
|
|
>
|
|
<FaGithub />
|
|
</SocialButton>
|
|
<SocialButton
|
|
label={"LinkedIn"}
|
|
href={"https://www.linkedin.com/company/moonstream/"}
|
|
>
|
|
<FaLinkedin />
|
|
</SocialButton>
|
|
</Stack>
|
|
</Stack>
|
|
{Object.values(SITEMAP).map((category, colIndex) => {
|
|
return (
|
|
<Stack align={"flex-start"} key={`footer-list-column-${colIndex}`}>
|
|
<>
|
|
<ListHeader>{category.title}</ListHeader>
|
|
{category.children.map((linkItem, linkItemIndex) => {
|
|
return (
|
|
<RouterLink
|
|
passHref
|
|
href={linkItem.path}
|
|
key={`footer-list-link-item-${linkItemIndex}-col-${colIndex}`}
|
|
>
|
|
<Link {...LINKS_SIZES}>{linkItem.title}</Link>
|
|
</RouterLink>
|
|
);
|
|
})}
|
|
</>
|
|
</Stack>
|
|
);
|
|
})}
|
|
</SimpleGrid>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
|
|
export default Footer;
|