Blocks页脚块

import * as React from "react"
import { Icon, VisuallyHidden } from "reflexjs"

export default function Block({
  name,
  copyright,
  links,
  iconLinks,
  children,
  ...props
}) {
  return (
    <section py={[8, 10, 12]} {...props}>
      <div variant="container">
        <div
          display="flex"
          alignItems="center"
          flexDirection="column|row"
          justifyContent="space-between"
        >
          <div maxW="none|300">
            {name && <h2 variant="heading.h2">{name}</h2>} {children}
          </div>
          {links?.length && (
            <div
              display="grid"
              col={`2|repeat(${links.length}, auto)`}
              gap="4|8|16|20"
              mt="4|4|0"
              w="full|auto"
            >
              {links.map((link, index) => (
                <div
                  key={index}
                  display="flex"
                  flexDirection="column"
                  alignItems="flex-start"
                >
                  <a
                    href={link.href}
                    textAlign="center"
                    variant="heading.h5"
                    _hover={{
                      color: "primary",
                    }}
                  >
                    {link.title}
                  </a>
                  {link.items.map((item, index) => (
                    <a
                      key={index}
                      href={item.href}
                      variant="text"
                      display="flex"
                      mt="2"
                    >
                      {item.title}
                    </a>
                  ))}
                </div>
              ))}
            </div>
          )}
        </div>
        {copyright && (
          <div
            display="flex"
            alignItems="center"
            justifyContent="space-between"
            borderTopWidth={1}
            textAlign="center"
            pt="4|5|6"
            mt="4|5|6"
          >
            <p variant="text.sm" my="0">
              {copyright}
            </p>
            {iconLinks?.length && (
              <div display="grid" col="2" gap="4" mt="4|0">
                {iconLinks.map((iconLink, index) => (
                  <a key={index} href={iconLink.href} color="text">
                    <Icon name={iconLink.name} size={5} />
                    <VisuallyHidden>{iconLink.title}</VisuallyHidden>
                  </a>
                ))}
              </div>
            )}
          </div>
        )}
      </div>
    </section>
  )
}

import * as React from "react"
import { Icon } from "reflexjs"
import Block from "../src/components/footer-002"

export default function Example() {
  return (
    <Block
      name="Reflex"
      links={[
        {
          title: "Features",
          href: "#",
          items: [
            {
              title: "For developers",
              href: "#",
            },
            {
              title: "For marketers",
              href: "#",
            },
          ],
        },
        {
          title: "Pricing",
          href: "#",
          items: [
            {
              title: "Basic",
              href: "#",
            },
            {
              title: "Professional",
              href: "#",
            },
            {
              title: "Business",
              href: "#",
            },
          ],
        },
        {
          title: "Learn",
          href: "#",
          items: [
            {
              title: "Docs",
              href: "#",
            },
            {
              title: "GitHub",
              href: "#",
            },
          ],
        },
        {
          title: "Support",
          href: "#",
          items: [
            {
              title: "Forum",
              href: "#",
            },
            {
              title: "Discord",
              href: "#",
            },
          ],
        },
      ]}
      iconLinks={[
        {
          title: "Follow on Twitter",
          href: "#",
          name: "twitter",
        },
        {
          title: "Follow on Instagram",
          href: "#",
          name: "instagram",
        },
      ]}
      copyright={`Copyright © ${new Date().getFullYear()} Reflex Inc. All rights reserved.`}
    >
      <p variant="text" my="4">
        Perspiciatis doloribus dignissimos delectus exercitationem ipsum
        voluptates.
      </p>
      <a
        href="mailto:#"
        variant="text"
        display="inline-flex"
        alignItems="center"
        _hover={{
          color: "primary",
        }}
      >
        <Icon name="mail" size="6" mr="2" /> hey@reflexjs.org
      </a>
    </Block>
  )
}