Comparison Table

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface ComparisonTableProps extends React.HTMLAttributes<HTMLDivElement> {
7  columns: { name: string; highlighted?: boolean }[];
8  features: { name: string; values: (boolean | string)[] }[];
9  label?: string;
10}
11 
12export function ComparisonTable({
13  features,
14  columns,
15  label,
16  className,
17  ...props
18}: ComparisonTableProps) {
19  // Stagger row reveal
20  const [revealedRow, setRevealedRow] = React.useState(-1);
21  React.useEffect(() => {
22    let row = 0;
23    const interval = setInterval(() => {
24      setRevealedRow(row);
25      row++;
26      if (row >= features.length) {
27        clearInterval(interval);
28      }
29    }, 60);
30    return () => clearInterval(interval);
31  }, [features.length]);
32 
33  return (
34    <div
35      data-slot="tron-comparison-table"
36      className={cn(
37        "relative overflow-hidden rounded border border-primary/30 bg-card/80 backdrop-blur-sm",
38        className
39      )}
40      {...props}
41    >
42      {/* Scanline overlay */}
43      <div className="pointer-events-none absolute inset-0 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,0,0,0.03)_2px,rgba(0,0,0,0.03)_4px)]" />
44 
45      {label ? (
46        <div className="border-primary/20 border-b px-4 py-2 text-[10px] text-foreground/50 uppercase tracking-widest">
47          {label}
48        </div>
49      ) : null}
50 
51      <div className="relative overflow-x-auto">
52        <table className="w-full border-collapse">
53          {/* Header */}
54          <thead>
55            <tr>
56              <th className="border-primary/20 border-b px-4 py-3 text-left font-mono text-[10px] text-foreground/40 uppercase tracking-widest">
57                Feature
58              </th>
59              {columns.map((col, i) => (
60                <th
61                  key={i}
62                  className={cn(
63                    "border-primary/20 border-b border-l px-4 py-3 text-center font-mono text-[10px] uppercase tracking-widest",
64                    col.highlighted
65                      ? "bg-primary/5 text-primary"
66                      : "text-foreground/50"
67                  )}
68                >
69                  {col.name}
70                  {col.highlighted ? (
71                    <div className="mx-auto mt-1 h-px w-8 bg-primary/40" />
72                  ) : null}
73                </th>
74              ))}
75            </tr>
76          </thead>
77 
78          {/* Body */}
79          <tbody>
80// … truncated