BlocksFooter Block

1import * as React from "react"
2import { Icon, VisuallyHidden } from "reflexjs"
3
4export default function Block({ name, copyright, links, iconLinks, ...props }) {
5  return (
6    <section py={[8, 10, 12]} {...props}>
7      <div variant="container">
8        <div
9          display="flex"
10          alignItems="center"
11          flexDirection="column|row"
12          justifyContent="space-between"
13        >
14          {name && <h2 variant="heading.h2">{name}</h2>}
15          {links?.length && (
16            <div
17              display="grid"
18              col={`1|repeat(${links.length}, auto)`}
19              gap="4|4|8"
20              mt="4|4|0"
21            >
22              {links.map((link, index) => (
23                <a
24                  key={index}
25                  variant="text"
26                  href={link.href}
27                  textAlign="center"
28                  _hover={{
29                    color: "primary",
30                  }}
31                >
32                  {link.title}
33                </a>
34              ))}
35            </div>
36          )}
37          {iconLinks?.length && (
38            <div display="grid" col="2" gap="4" mt="4|0">
39              {iconLinks.map((iconLink, index) => (
40                <a key={index} href={iconLink.href} color="text">
41                  <Icon name={iconLink.name} size={5} />
42                  <VisuallyHidden>{iconLink.title}</VisuallyHidden>
43                </a>
44              ))}
45            </div>
46          )}
47        </div>
48        {copyright && (
49          <div borderTopWidth={1} textAlign="center" pt="4|5|6" mt="4|5|6">
50            <p variant="text.sm" my="0">
51              {copyright}
52            </p>
53          </div>
54        )}
55      </div>
56    </section>
57  )
58}

1import * as React from "react"
2import Block from "../src/components/footer-001"
3
4export default function Example() {
5  return (
6    <Block
7      name="Reflex"
8      links={[
9        {
10          title: "Features",
11          href: "#",
12        },
13        {
14          title: "Pricing",
15          href: "#",
16        },
17        {
18          title: "Learn",
19          href: "#",
20        },
21        {
22          title: "Support",
23          href: "#",
24        },
25        {
26          title: "Contact Us",
27          href: "#",
28        },
29      ]}
30      iconLinks={[
31        {
32          title: "Follow on Twitter",
33          href: "#",
34          name: "twitter",
35        },
36        {
37          title: "Follow on Instagram",
38          href: "#",
39          name: "instagram",
40        },
41      ]}
42      copyright={`Copyright © ${new Date().getFullYear()} Reflex Inc. All rights reserved.`}
43    />
44  )
45}