Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | import {
Button,
ButtonProps,
Flex,
Text,
useColorMode,
} from "@chakra-ui/react";
import type { FunctionComponent } from "react";
import { DISCLAIMER, FOOTER_LINKS } from "./constants";
import testIds from "./testIds";
import { useShortBread } from "../../contexts/Shortbread";
import { SECTION_PADDING } from "../../views/Home/constants";
import { ExternalLink } from "../ExternalLink";
import { NavLink } from "../NavLink";
export interface FooterProps {}
const LinkButton: FunctionComponent<
ButtonProps & { "data-testid"?: string }
> = (props) => (
<Button
color="inherit"
fontSize="inherit"
fontWeight="normal"
variant="link"
{...props}
/>
);
export const Footer: FunctionComponent<FooterProps> = () => {
const { customizeCookies } = useShortBread();
const { colorMode, toggleColorMode } = useColorMode();
return (
<Flex
as="footer"
bg="brand.800"
color="white"
data-testid={testIds.container}
direction="column"
fontSize="sm"
px={SECTION_PADDING.X}
py={4}
>
<Flex
align="center"
data-testid={testIds.links}
gap={4}
justify="space-between"
w="full"
wrap="wrap"
>
{/* AWS Links */}
<Flex align="center" gap={4}>
{Object.entries(FOOTER_LINKS).map(
([key, { display, isExternal = true, testId, url }]) => (
<Flex
align="center"
direction={{ base: "column", md: "row" }}
key={key}
>
{isExternal ? (
<ExternalLink
color="currentcolor"
data-testid={testIds[testId]}
hasWarning={false}
href={url}
mx="auto"
>
{display}
</ExternalLink>
) : (
<NavLink
color="currentcolor"
data-testid={testIds[testId]}
mx="auto"
to={url}
>
{display}
</NavLink>
)}
</Flex>
)
)}
</Flex>
{/* Manage Cookies / Color mode toggle */}
<Flex align="center" gap={4}>
<LinkButton
data-testid={testIds.manageCookies}
onClick={customizeCookies}
>
Manage Cookies
</LinkButton>
<LinkButton onClick={toggleColorMode}>
View in {colorMode === "light" ? "dark" : "light"} mode
</LinkButton>
</Flex>
</Flex>
{/* Disclaimer Text */}
<Text data-testid={testIds.disclaimer} mt={4}>
{DISCLAIMER}
</Text>
</Flex>
);
};
|