comparator-one

1<script lang="ts">
2	import Button from "$COMPONENTS$/ui/button/button.svelte";
3	import Cpu from "@lucide/svelte/icons/cpu";
4	import Sparkles from "@lucide/svelte/icons/sparkles";
5 
6	type TableData = {
7		feature: string;
8		free: string | boolean;
9		pro: string | boolean;
10		startup: string | boolean;
11	};
12 
13	let tableData: TableData[] = [
14		{
15			feature: "Feature 1",
16			free: true,
17			pro: true,
18			startup: true,
19		},
20		{
21			feature: "Feature 2",
22			free: true,
23			pro: true,
24			startup: true,
25		},
26		{
27			feature: "Feature 3",
28			free: false,
29			pro: true,
30			startup: true,
31		},
32		{
33			feature: "Tokens",
34			free: "",
35			pro: "20 Users",
36			startup: "Unlimited",
37		},
38		{
39			feature: "Video calls",
40			free: "",
41			pro: "12 Weeks",
42			startup: "56",
43		},
44		{
45			feature: "Support",
46			free: "",
47			pro: "Secondes",
48			startup: "Unlimited",
49		},
50		{
51			feature: "Security",
52			free: "",
53			pro: "20 Users",
54			startup: "Unlimited",
55		},
56	];
57</script>
58 
59<section class="py-16 md:py-32">
60	<div class="mx-auto max-w-5xl px-6">
61		<div class="w-full overflow-auto lg:overflow-visible">
62			<table
63				class="w-[200vw] border-separate border-spacing-x-3 md:w-full dark:[--color-muted:var(--color-zinc-900)]"
64			>
65				<thead class="sticky top-0 bg-background">
66					<tr class="*:py-4 *:text-left *:font-medium">
67						<th class="lg:w-2/5"></th>
68						<th class="space-y-3">
69							<span class="block">Free</span>
70 
71							<Button variant="outline" size="sm">Get Started</Button>
72						</th>
73						<th class="space-y-3 rounded-t-(--radius) bg-muted px-4">
74							<span class="block">Pro</span>
75							<Button size="sm">Get Started</Button>
76						</th>
77						<th class="space-y-3">
78							<span class="block">Startup</span>
79							<Button variant="outline" size="sm">Get Started</Button>
80						</th>
81					</tr>
82				</thead>
83				<tbody class="text-caption text-sm">
84					<tr class="*:py-3">
85						<td class="flex items-center gap-2 font-medium">
86							<Cpu class="size-4" />
87							<span>Features</span>
88						</td>
89						<td></td>
90						<td class="border-none bg-muted px-4"></td>
91						<td></td>
92					</tr>
93					{#each tableData.slice(-4) as row, index}
94						<tr class="*:border-b *:py-3">
95							<td class="text-muted-foreground">{row.feature}</td>
96							<td>
97								{#if typeof row.free === "boolean" && row.free}
98									<svg
99										xmlns="http://www.w3.org/2000/svg"
100										viewBox="0 0 24 24"
101										fill="currentColor"
102										class="size-4"
103									>
104										<path
105// … truncated