区块卡片区块

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

export default function Block({
  subheading,
  heading,
  text,
  buttons,
  cards,
  columns = 3,
  ...props
}) {
  return (
    <section py="4|6|12|20" {...props}>
      <div variant="container">
        <div textAlign="center">
          {subheading && <p variant="subheading">{subheading}</p>}
          {heading && (
            <h2 variant="heading.h1" lineHeight="1">
              {heading}
            </h2>
          )}
          {text && (
            <p variant="text.lead" mt="2">
              {text}
            </p>
          )}
        </div>
        {cards && (
          <div display="grid" col={`1|2|${columns}`} gap="4|8" my="8|12">
            {cards.map((card, index) => (
              <Card key={index} {...card} />
            ))}
          </div>
        )}
        {buttons}
      </div>
    </section>
  )
}

export function Card({
  heading,
  text,
  icon = { name: "check" },
  link,
  ...props
}) {
  return (
    <div
      display="flex"
      flexDirection="column"
      textAlign="center"
      borderWidth="1"
      rounded="lg"
      p="8"
      {...props}
    >
      {icon && (
        <div
          display="flex"
          alignItems="center"
          justifyContent="center"
          size="18"
          rounded="full"
          mb="4"
          mx="auto"
          bg={icon.bg || "secondary"}
        >
          <Icon size="10" color="white" {...icon} />
        </div>
      )}
      <div flex="1">
        <h4 variant="heading.h4">{heading}</h4>
        {text && (
          <p variant="text.paragraph text.sm" mt="1">
            {text}
          </p>
        )}
        {link}
      </div>
    </div>
  )
}

import { Icon } from "reflexjs"
import Block from "../src/components/cards-001"

export default function Example() {
  return (
    <Block
      subheading="Subheading"
      heading="Unlock your creativity"
      text="Dicta minus iusto quisquam doloribus temporibus."
      cards={[
        {
          heading: "Marketing Strategies",
          text:
            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
          icon: {
            name: "activity",
          },
          link: (
            <a display="inline-flex" alignItems="center" href="#">
              Learn more <Icon name="arrow-right" size="4" ml="2" />
            </a>
          ),
        },
        {
          heading: "Business Planning",
          text:
            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
          icon: {
            name: "credit-card",
          },
          link: (
            <a display="inline-flex" alignItems="center" href="#">
              Learn more <Icon name="arrow-right" size="4" ml="2" />
            </a>
          ),
        },
        {
          heading: "Premium Support",
          text:
            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
          icon: {
            name: "gift",
          },
          link: (
            <a display="inline-flex" alignItems="center" href="#">
              Learn more <Icon name="arrow-right" size="4" ml="2" />
            </a>
          ),
        },
      ]}
    />
  )
}