Comparison Table

1'use client'
2 
3import { useMemo } from 'react'
4import {
5  flexRender,
6  getCoreRowModel,
7  useReactTable,
8} from '@tanstack/react-table'
9import type { ColumnDef } from '@tanstack/react-table'
10import { Check, X } from 'lucide-react'
11 
12import {
13  Table,
14  TableBody,
15  TableCell,
16  TableHead,
17  TableHeader,
18  TableRow,
19} from '#/components/ui/table'
20import { Button } from '#/components/ui/button'
21import { cn } from '#/lib/utils.ts'
22import type { Feature, FeatureValue, Plan } from './comparison'
23 
24interface ComparisonTableProps {
25  plans: Plan[]
26  features: Feature[]
27}
28 
29function renderValue(value: FeatureValue) {
30  if (typeof value === 'boolean') {
31    return value ? (
32      <Check className="mx-auto h-4 w-4 text-emerald-600 dark:text-emerald-500" />
33    ) : (
34      <X className="mx-auto h-4 w-4 text-muted-foreground/40" />
35    )
36  }
37  return value
38}
39 
40export function ComparisonTable({ plans, features }: ComparisonTableProps) {
41  const columns = useMemo<ColumnDef<Feature>[]>(
42    () => [
43      {
44        id: 'feature',
45        header: '',
46        accessorKey: 'label',
47        cell: ({ getValue }) => (
48          <span className="text-sm text-muted-foreground">
49            {getValue() as string}
50          </span>
51        ),
52      },
53      ...plans.map(
54        (plan): ColumnDef<Feature> => ({
55          id: plan.id,
56          header: plan.name,
57          accessorFn: (feature) => feature.values[plan.id],
58          cell: ({ getValue }) => (
59            <div className="text-center">
60              {renderValue(getValue() as FeatureValue)}
61            </div>
62          ),
63        }),
64      ),
65    ],
66    [plans],
67  )
68 
69  const table = useReactTable({
70    data: features,
71    columns,
72    getCoreRowModel: getCoreRowModel(),
73  })
74 
75  return (
76    <div className="overflow-hidden rounded-md border">
77      <Table>
78        <TableHeader>
79          <TableRow>
80            <TableHead />
81            {plans.map((plan) => (
82              <TableHead
83                key={plan.id}
84                className={cn(
85                  'py-4 align-bottom text-center',
86                  plan.highlighted && 'bg-primary/5',
87                )}
88              >
89                <div className="space-y-1">
90                  <p className="text-sm font-semibold text-foreground">
91                    {plan.name}
92                  </p>
93                  <p className="text-2xl font-bold text-foreground">
94                    {plan.price}
95// … truncated