Personalizar um componente com extensibilidade de modelos

1import React from "react";
2
3import {
4  Box,
5  Container,
6  Stack,
7  Text,
8  Link,
9  Icon,
10  Input,
11  Button,
12  useColorModeValue,
13} from "@chakra-ui/react";
14import {
15  SocialFacebookIcon,
16  SocialTwitterIcon,
17  SocialInstagramIcon,
18} from "@salesforce/retail-react-app/app/components/icons";
19
20const Footer = () => {
21  return (
22    <Box
23      bg={useColorModeValue("gray.50", "gray.900")}
24      color={useColorModeValue("gray.700", "gray.200")}
25    >
26      <Container as={Stack} maxW={"6xl"} py={10}>
27        <Stack direction={{ base: "column", md: "row" }} spacing={4}>
28          <Link href="/about">About Us</Link>
29          <Link href="/contact">Contact</Link>
30          <Link href="/faq">FAQ</Link>
31        </Stack>
32        <Stack
33          direction={{ base: "column", md: "row" }}
34          justifyContent={"space-between"}
35          alignItems={"center"}
36        >
37          <Text>
38            © {new Date().getFullYear()} Your Company Name. All rights reserved
39          </Text>
40          <Stack direction={"row"} spacing={6}>
41            <Icon as={SocialFacebookIcon} />
42            <Icon as={SocialTwitterIcon} />
43            <Icon as={SocialInstagramIcon} />
44          </Stack>
45        </Stack>
46        <Stack
47          direction={{ base: "column", md: "row" }}
48          spacing={4}
49          mt={10}
50          alignItems={"center"}
51        >
52          <Text>Subscribe to our newsletter</Text>
53          <Input placeholder="Your email address" />
54          <Button>Subscribe</Button>
55        </Stack>
56      </Container>
57    </Box>
58  );
59};
60
61export default Footer;