BlocksFooter Block

1import * as React from "react"
2import { Icon, VisuallyHidden } from "reflexjs"
3
4export default function Block({
5  name,
6  copyright,
7  links,
8  iconLinks,
9  children,
10  ...props
11}) {
12  return (
13    <section py={[8, 10, 12]} {...props}>
14      <div variant="container">
15        <div
16          display="flex"
17          alignItems="center"
18          flexDirection="column|row"
19          justifyContent="space-between"
20        >
21          <div maxW="none|300">
22            {name && <h2 variant="heading.h2">{name}</h2>} {children}
23          </div>
24          {links?.length && (
25            <div
26              display="grid"
27              col={`2|repeat(${links.length}, auto)`}
28              gap="4|8|16|20"
29              mt="4|4|0"
30              w="full|auto"
31            >
32              {links.map((link, index) => (
33                <div
34                  key={index}
35                  display="flex"
36                  flexDirection="column"
37                  alignItems="flex-start"
38                >
39                  <a
40                    href={link.href}
41                    textAlign="center"
42                    variant="heading.h5"
43                    _hover={{
44                      color: "primary",
45                    }}
46                  >
47                    {link.title}
48                  </a>
49                  {link.items.map((item, index) => (
50                    <a
51                      key={index}
52                      href={item.href}
53                      variant="text"
54                      display="flex"
55                      mt="2"
56                    >
57                      {item.title}
58                    </a>
59                  ))}
60                </div>
61              ))}
62            </div>
63          )}
64        </div>
65        {copyright && (
66          <div
67            display="flex"
68            alignItems="center"
69            justifyContent="space-between"
70            borderTopWidth={1}
71            textAlign="center"
72            pt="4|5|6"
73            mt="4|5|6"
74          >
75            <p variant="text.sm" my="0">
76              {copyright}
77            </p>
78            {iconLinks?.length && (
79              <div display="grid" col="2" gap="4" mt="4|0">
80                {iconLinks.map((iconLink, index) => (
81                  <a key={index} href={iconLink.href} color="text">
82                    <Icon name={iconLink.name} size={5} />
83                    <VisuallyHidden>{iconLink.title}</VisuallyHidden>
84                  </a>
85                ))}
86              </div>
87            )}
88          </div>
89        )}
90      </div>
91    </section>
92  )
93}

1import * as React from "react"
2import { Icon } from "reflexjs"
3import Block from "../src/components/footer-002"
4
5export default function Example() {
6  return (
7    <Block
8      name="Reflex"
9      links={[
10        {
11          title: "Features",
12          href: "#",
13          items: [
14            {
15              title: "For developers",
16              href: "#",
17            },
18            {
19              title: "For marketers",
20              href: "#",
21            },
22          ],
23        },
24        {
25          title: "Pricing",
26          href: "#",
27          items: [
28            {
29              title: "Basic",
30              href: "#",
31            },
32            {
33              title: "Professional",
34              href: "#",
35            },
36            {
37              title: "Business",
38              href: "#",
39            },
40          ],
41        },
42        {
43          title: "Learn",
44          href: "#",
45          items: [
46            {
47              title: "Docs",
48              href: "#",
49            },
50            {
51              title: "GitHub",
52              href: "#",
53            },
54          ],
55        },
56        {
57          title: "Support",
58          href: "#",
59          items: [
60            {
61              title: "Forum",
62              href: "#",
63            },
64            {
65              title: "Discord",
66              href: "#",
67            },
68          ],
69        },
70      ]}
71      iconLinks={[
72        {
73          title: "Follow on Twitter",
74          href: "#",
75          name: "twitter",
76        },
77        {
78          title: "Follow on Instagram",
79          href: "#",
80          name: "instagram",
81        },
82      ]}
83      copyright={`Copyright © ${new Date().getFullYear()} Reflex Inc. All rights reserved.`}
84    >
85      <p variant="text" my="4">
86        Perspiciatis doloribus dignissimos delectus exercitationem ipsum
87        voluptates.
88      </p>
89      <a
90        href="mailto:#"
91        variant="text"
92        display="inline-flex"
93        alignItems="center"
94        _hover={{
95          color: "primary",
96        }}
97      >
98        <Icon name="mail" size="6" mr="2" /> hey@reflexjs.org
99      </a>
100    </Block>
101  )
102}