Comparison Toggle

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { CheckCircle, Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function ComparisonToggleSection() {
29  const [plan, setPlan] = useState<'A' | 'B'>('A');
30
31  return (
32    <SectionCard title="Comparison Toggle" sourceSlug="/ui/source/ui-elements/comparison-toggle">
33      <div className="space-y-5">
34        {/* Plan Toggle */}
35        <div className="inline-flex rounded-xl bg-gray-100 p-1 dark:bg-white/5">
36          {(['A', 'B'] as const).map((p) => (
37            <button key={p} onClick={() => setPlan(p)} className={`rounded-lg px-6 py-2.5 text-sm font-medium transition-all ${plan === p ? 'bg-white text-gray-800 shadow-theme-sm dark:bg-gray-700 dark:text-white/90' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'}`}>
38              Plan {p}
39            </button>
40          ))}
41        </div>
42        {/* Comparison Card */}
43        <div className="max-w-sm rounded-xl border border-gray-200 bg-white p-5 dark:border-white/5 dark:bg-gray-dark">
44          <h4 className="text-lg font-bold text-gray-800 dark:text-white/90">Plan {plan}</h4>
45          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{plan === 'A' ? 'Basic features for individuals' : 'Advanced features for teams'}</p>
46          <div className="mt-3 flex items-baseline gap-1">
47            <span className="text-3xl font-bold text-gray-800 dark:text-white/90">{plan === 'A' ? '$9' : '$29'}</span>
48            <span className="text-sm text-gray-500">/month</span>
49          </div>
50          <ul className="mt-4 space-y-2">
51            {(plan === 'A' ? ['5 Projects', 'Basic Analytics', 'Email Support'] : ['Unlimited Projects', 'Advanced Analytics', 'Priority Support', 'API Access']).map((f) => (
52              <li key={f} className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
53                <CheckCircle className="size-4 text-success-500 shrink-0" /> {f}
54              </li>
55            ))}
56          </ul>
57        </div>
58      </div>
59    </SectionCard>
60  );
61}