{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"mist-comparator-1","type":"registry:block","title":"Comparator 1","description":"Tailark Mist comparator variant 1 block","registryDependencies":["@tailark-oss/mist-button"],"meta":{"aspect-ratio":"90/70","width":686,"height":534},"files":[{"path":"mist/blocks/comparator/one.tsx","type":"registry:component","target":"@components/comparator-1.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-20\">\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                                    >\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                                    >\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                                >\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                                >\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"}]}