Comparison

import { Comparison } from '@hanzo/ui'

Pricing plans

Three columns, boolean and text rows, the middle one highlighted.

Free

5Users

10GBStorage

Support

Custom domain

Pro

25Users

100GBStorage

Support

Custom domain

Enterprise

UnlimitedUsers

1TBStorage

Support

Custom domain

export function Plans() {
  return (
    <Comparison
      columns={[
        {
          title: "Free",
          items: [
            { label: "Users", value: "5" },
            { label: "Storage", value: "10GB" },
            { label: "Support", value: false },
            { label: "Custom domain", value: false },
          ],
        },
        {
          title: "Pro",
          highlighted: true,
          items: [
            { label: "Users", value: "25" },
            { label: "Storage", value: "100GB" },
            { label: "Support", value: true },
            { label: "Custom domain", value: true },
          ],
        },
        {
          title: "Enterprise",
          items: [
            { label: "Users", value: "Unlimited" },
            { label: "Storage", value: "1TB" },
            { label: "Support", value: true },
            { label: "Custom domain", value: true },
          ],
        },
      ]}
    />
  )
}

Two-way

The minimum shape, one plan against another.

Before

2 weeksSetup time

Automated tests

After

1 daySetup time

Automated tests

export function TwoWay() {
  return (
    <Comparison
      columns={[
        {
          title: "Before",
          items: [
            { label: "Setup time", value: "2 weeks" },
            { label: "Automated tests", value: false },
          ],
        },
        {
          title: "After",
          highlighted: true,
          items: [
            { label: "Setup time", value: "1 day" },
            { label: "Automated tests", value: true },
          ],
        },
      ]}
    />
  )
}

Types

export interface ComparisonItem {
  label: string
  value: boolean | string
}

export interface ComparisonColumn {
  title: string
  items: ComparisonItem[]
  highlighted?: boolean
}

export type ComparisonProps = Omit<GridProps, 'columns' | 'children'> & {
  columns: ComparisonColumn[]
}

Exports

Comparisontype ComparisonColumntype ComparisonItemtype ComparisonProps