BlocksPricing Block

1import * as React from "react"
2
3export default function Block({ subheading, heading, text, items, ...props }) {
4  return (
5    <section py="4|6|12|20" {...props}>
6      <div variant="container">
7        <div textAlign="center">
8          {subheading && <p variant="subheading">{subheading}</p>}
9          {heading && (
10            <h2 variant="heading.h1" lineHeight="1">
11              {heading}
12            </h2>
13          )}
14          {text && (
15            <p variant="text.lead" mt="4">
16              {text}
17            </p>
18          )}
19        </div>
20        {items && (
21          <div
22            display="grid"
23            col="1|2|3"
24            mt="4|6|8"
25            gap="4|6|0"
26            borderTopWidth="5"
27            borderTopColor="primary"
28          >
29            {items.map((item, index) => (
30              <Pricing key={index} {...item} />
31            ))}
32          </div>
33        )}
34      </div>
35    </section>
36  )
37}
38
39export function Pricing({ heading, price, description, isSelected, ...props }) {
40  return (
41    <div
42      bg={isSelected ? "muted" : "background"}
43      textAlign="center"
44      borderWidth="1px"
45      px="4|4|8|10"
46      py="8|8|12"
47      {...props}
48    >
49      <h3 variant="heading.h2" m="0">
50        {heading}
51      </h3>
52      <p variant="text.paragraph" mt="4" lineHeight="normal">
53        {description}
54      </p>
55      <div display="flex" mt="6|8" alignItems="center" justifyContent="center">
56        <span fontSize="6xl" fontWeight="semibold">
57          ${price}
58        </span>
59        <span fontSize="xs" ml="4">
60          per user <br /> per month
61        </span>
62      </div>
63      <button
64        variant={`button.${isSelected ? "primary" : "muted"}`}
65        mt="6|8"
66        w="100%"
67      >
68        Select Plan
69      </button>
70    </div>
71  )
72}

1import * as React from "react"
2import Block from "../src/components/pricing-002"
3
4export default function Example() {
5  return (
6    <Block
7      subheading="Subheading"
8      heading="Choose your plan"
9      text="Start building for free, and upgrade anytime to unlock other features."
10      items={[
11        {
12          heading: "Basic",
13          description: "For small and medium-sized businesses",
14          price: "49",
15        },
16        {
17          heading: "Plus",
18          isSelected: true,
19          description:
20            "For larger businesses with advanced administration tools",
21          price: "299",
22        },
23        {
24          heading: "Custom",
25          description:
26            "For very large businesses or those in highly regulated industries",
27          price: "499",
28        },
29      ]}
30    />
31  )
32}