BlocksPricing Block

1import * as React from "react"
2import { Icon } from "reflexjs"
3
4export default function Block({ subheading, heading, text, items, ...props }) {
5  return (
6    <section py="4|6|12|20" {...props}>
7      <div variant="container">
8        <div textAlign="center">
9          {subheading && <p variant="subheading">{subheading}</p>}
10          {heading && (
11            <h2 variant="heading.h1" lineHeight="1">
12              {heading}
13            </h2>
14          )}
15          {text && (
16            <p variant="text.lead" mt="4">
17              {text}
18            </p>
19          )}
20        </div>
21        {items && (
22          <div display="grid" col="1|2|3" mt="4|6|8" gap="4|6|0">
23            {items.map((item, index) => (
24              <Pricing key={index} {...item} />
25            ))}
26          </div>
27        )}
28      </div>
29    </section>
30  )
31}
32
33export function Pricing({
34  heading,
35  price,
36  description,
37  list,
38  isSelected,
39  ...props
40}) {
41  return (
42    <div
43      display="flex"
44      flexDirection="column"
45      alignItems="center"
46      borderWidth={isSelected ? 4 : 1}
47      borderColor={isSelected ? "primary" : "border"}
48      rounded="lg"
49      px="4|6|8"
50      py={isSelected ? "4|6|16" : "4|6|8"}
51      my={isSelected ? 0 : "0|0|8"}
52      {...props}
53    >
54      <h3 variant="heading.h3" m="0">
55        {heading}
56      </h3>
57      <p display="flex" alignItems="flex-end" mt="6">
58        <span fontSize="6xl" fontWeight="semibold" lineHeight="none">
59          ${price}
60        </span>
61        <span>/ month</span>
62      </p>
63      <p variant="text" textAlign="center" mt="6" mb="0">
64        {description}
65      </p>
66      <ul listStyle="none" p="0" mt="4" flex="1">
67        {list.map((listItem, index) => (
68          <li
69            key={index}
70            fontWeight="semibold"
71            display="flex"
72            alignItems="center"
73            mb="2"
74          >
75            <Icon name="check" mr="2" color="primary" />
76            {listItem}
77          </li>
78        ))}
79      </ul>
80      <button
81        variant={`button.${isSelected ? "primary" : "muted"}`}
82        mt="8"
83        w="full"
84      >
85        Select Plan
86      </button>
87    </div>
88  )
89}

1import * as React from "react"
2import Block from "../src/components/pricing-001"
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          list: [
16            "Lorem ipsum dolor sit amet",
17            "Consectetur adipiscing",
18            "Accumsan tincidunt",
19          ],
20          roundedRight: "null|null|none",
21          borderRight: "null|null|none",
22        },
23        {
24          heading: "Plus",
25          isSelected: true,
26          description:
27            "For larger businesses with advanced administration tools",
28          price: "299",
29          list: [
30            "Lorem ipsum dolor sit amet",
31            "Consectetur adipiscing",
32            "Nulla porttitor",
33            "Accumsan tincidunt",
34          ],
35        },
36        {
37          heading: "Custom",
38          description:
39            "For very large businesses or those in highly regulated industries",
40          price: "499",
41          list: [
42            "Lorem ipsum dolor sit amet",
43            "Consectetur adipiscing",
44            "Nulla porttitor",
45            "Accumsan tincidunt",
46          ],
47          roundedLeft: "null|null|none",
48          borderLeft: "null|null|none",
49        },
50      ]}
51    />
52  )
53}