Comparison

import { Comparison } from '@hanzo/ui'

export function Default() {
  return <Comparison columns={plans} />
}

export function TwoColumns() {
  return <Comparison columns={plans.slice(0, 2)} />
}

export function FeatureChecklist() {
  const columns: ComparisonColumn[] = [
    {
      title: "Basic",
      items: [
        { label: "API access", value: true },
        { label: "SSO", value: false },
        { label: "Audit log", value: false },
      ],
    },
    {
      title: "Team",
      highlighted: true,
      items: [
        { label: "API access", value: true },
        { label: "SSO", value: true },
        { label: "Audit log", value: false },
      ],
    },
  ]
  return <Comparison columns={columns} />
}

Types

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

export interface ComparisonColumn {
  title: string
  items: ComparisonItem[]
  /** Marks the plan the table wants to sell: a raised border and shadow. */
  highlighted?: boolean
}

export interface ComparisonProps {
  columns: ComparisonColumn[]
  children?: never
}

Exports