{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mist-comparator-1",
  "type": "registry:block",
  "title": "Comparator One",
  "description": "Mist Kit Comparator block, variant one",
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "../../packages/mist-kit/blocks/comparator/one/index.tsx",
      "content": "import { Button } from '@/components/ui/button'\nimport { Check, Sparkles, Star } from 'lucide-react'\nimport Link from 'next/link'\n\nconst tableData = [\n    {\n        feature: 'Feature 1',\n        free: true,\n        pro: true,\n        startup: true,\n    },\n    {\n        feature: 'Feature 2',\n        free: true,\n        pro: true,\n        startup: true,\n    },\n    {\n        feature: 'Feature 3',\n        free: false,\n        pro: true,\n        startup: true,\n    },\n    {\n        feature: 'Tokens',\n        free: '',\n        pro: '20 Users',\n        startup: 'Unlimited',\n    },\n    {\n        feature: 'Video calls',\n        free: '',\n        pro: '12 Weeks',\n        startup: '56',\n    },\n    {\n        feature: 'Support',\n        free: '',\n        pro: 'Secondes',\n        startup: 'Unlimited',\n    },\n    {\n        feature: 'Security',\n        free: '',\n        pro: '20 Users',\n        startup: 'Unlimited',\n    },\n]\n\nexport default function PricingComparator() {\n    return (\n        <section className=\"bg-muted py-16 md:py-32\">\n            <div className=\"mx-auto max-w-5xl px-6\">\n                <div className=\"w-full overflow-auto lg:overflow-visible\">\n                    <table className=\"w-[200vw] border-separate border-spacing-x-3 md:w-full dark:[--color-muted:var(--color-zinc-900)]\">\n                        <thead className=\"bg-muted/95 sticky top-0\">\n                            <tr className=\"*:py-4 *:text-left *:font-medium\">\n                                <th className=\"lg:w-2/5\"></th>\n                                <th className=\"space-y-3\">\n                                    <span className=\"block\">Free</span>\n\n                                    <Button\n                                        asChild\n                                        variant=\"neutral\">\n                                        <Link href=\"#\">Get Started</Link>\n                                    </Button>\n                                </th>\n                                <th className=\"space-y-3\">\n                                    <span className=\"block\">Pro</span>\n                                    <Button asChild>\n                                        <Link href=\"#\">Get Started</Link>\n                                    </Button>\n                                </th>\n                                <th className=\"space-y-3\">\n                                    <span className=\"block\">Startup</span>\n                                    <Button\n                                        asChild\n                                        variant=\"neutral\">\n                                        <Link href=\"#\">Get Started</Link>\n                                    </Button>\n                                </th>\n                            </tr>\n                        </thead>\n                        <tbody>\n                            <tr className=\"*:py-4\">\n                                <td className=\"flex items-center gap-2 font-medium\">\n                                    <Star className=\"size-4\" />\n                                    <span>Features</span>\n                                </td>\n                                <td></td>\n                                <td className=\"border-none px-4\"></td>\n                                <td></td>\n                            </tr>\n                            {tableData.slice(-4).map((row, index) => (\n                                <tr\n                                    key={index}\n                                    className=\"*:border-b *:py-4\">\n                                    <td className=\"text-muted-foreground\">{row.feature}</td>\n                                    <td>\n                                        {row.free === true ? (\n                                            <Check\n                                                className=\"text-primary size-3\"\n                                                strokeWidth={3.5}\n                                            />\n                                        ) : (\n                                            row.free\n                                        )}\n                                    </td>\n                                    <td>\n                                        {row.pro === true ? (\n                                            <Check\n                                                className=\"text-primary size-3\"\n                                                strokeWidth={3.5}\n                                            />\n                                        ) : (\n                                            row.pro\n                                        )}\n                                    </td>\n                                    <td>\n                                        {row.startup === true ? (\n                                            <Check\n                                                className=\"text-primary size-3\"\n                                                strokeWidth={3.5}\n                                            />\n                                        ) : (\n                                            row.startup\n                                        )}\n                                    </td>\n                                </tr>\n                            ))}\n                            <tr className=\"*:pb-4 *:pt-8\">\n                                <td className=\"flex items-center gap-2 font-medium\">\n                                    <Sparkles className=\"size-4\" />\n                                    <span>AI Models</span>\n                                </td>\n                                <td></td>\n                                <td className=\"bg-muted border-none px-4\"></td>\n                                <td></td>\n                            </tr>\n                            {tableData.map((row, index) => (\n                                <tr\n                                    key={index}\n                                    className=\"*:border-b *:py-4\">\n                                    <td className=\"text-muted-foreground\">{row.feature}</td>\n                                    <td>\n                                        {row.free === true ? (\n                                            <Check\n                                                className=\"text-primary size-3\"\n                                                strokeWidth={3.5}\n                                            />\n                                        ) : (\n                                            row.free\n                                        )}\n                                    </td>\n                                    <td>\n                                        {row.pro === true ? (\n                                            <Check\n                                                className=\"text-primary size-3\"\n                                                strokeWidth={3.5}\n                                            />\n                                        ) : (\n                                            row.pro\n                                        )}\n                                    </td>\n                                    <td>\n                                        {row.startup === true ? (\n                                            <Check\n                                                className=\"text-primary size-3\"\n                                                strokeWidth={3.5}\n                                            />\n                                        ) : (\n                                            row.startup\n                                        )}\n                                    </td>\n                                </tr>\n                            ))}\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n        </section>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/pricing-comparator-one.tsx"
    }
  ]
}