CopilotKit/docs/components/react/generative-ui/ecosystem-table.tsx at main · githubali/CopilotKit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
"use client";

interface EcosystemRow {
  approach: string;
  examples: string;
  strengths: string;
  weaknesses: string;
}

interface EcosystemTableProps {
  data: EcosystemRow[];
}

export function EcosystemTable({ data }: EcosystemTableProps) {
  return (
    <div className="my-8">
      {/* Desktop table */}
      <div className="hidden md:block overflow-x-auto">
        <table className="w-full border-collapse">
          <thead>
            <tr className="bg-foreground text-background">
              <th className="p-4 text-left font-semibold">Approach</th>
              <th className="p-4 text-left font-semibold">Examples</th>
              <th className="p-4 text-left font-semibold">Strengths</th>
              <th className="p-4 text-left font-semibold">Weaknesses</th>
            </tr>
          </thead>
          <tbody>
            {data.map((row, index) => (
              <tr
                key={index}
                className={`border-b border-border ${
                  index % 2 === 0 ? "bg-card/50" : "bg-transparent"
                }`}
              >
                <td className="p-4 font-semibold">{row.approach}</td>
                <td className="p-4 text-muted-foreground">{row.examples}</td>
                <td className="p-4 text-muted-foreground">{row.strengths}</td>
                <td className="p-4 text-muted-foreground">{row.weaknesses}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Mobile stacked cards */}
      <div className="md:hidden space-y-4">
        {data.map((row, index) => (
          <div
            key={index}
            className="bg-card border border-border rounded-lg p-4"
          >
            <div className="mb-3">
              <div className="font-semibold text-sm text-muted-foreground mb-1">
                Approach
              </div>
              <div className="font-bold text-lg">{row.approach}</div>
            </div>
            <div className="mb-3">
              <div className="font-semibold text-sm text-muted-foreground mb-1">
                Examples
              </div>
              <div>{row.examples}</div>
            </div>
            <div className="mb-3">
              <div className="font-semibold text-sm text-muted-foreground mb-1">
                Strengths
              </div>
              <div>{row.strengths}</div>
            </div>
            <div>
              <div className="font-semibold text-sm text-muted-foreground mb-1">
                Weaknesses
              </div>
              <div>{row.weaknesses}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}