Radio Groups

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { 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 RadioGroupsSection() {
29  const [selectedPlan, setSelectedPlan] = useState('pro');
30  const [selectedSize, setSelectedSize] = useState('md');
31
32  return (
33    <SectionCard title="Radio Groups" sourceSlug="/ui/source/ui-elements/radio-groups">
34      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
35        {/* Plan Selection */}
36        <div>
37          <p className="mb-3 text-xs font-medium uppercase tracking-wider text-gray-400">Plan Selection</p>
38          <div className="space-y-2">
39            {[
40              { value: 'free', label: 'Free Plan', desc: '$0/month' },
41              { value: 'pro', label: 'Pro Plan', desc: '$29/month' },
42              { value: 'enterprise', label: 'Enterprise', desc: '$99/month' },
43            ].map((opt) => (
44              <label key={opt.value} className={`flex items-center gap-3 rounded-xl border p-3 cursor-pointer transition-colors ${selectedPlan === opt.value ? 'border-brand-500 bg-brand-50 dark:bg-brand-500/10' : 'border-gray-200 hover:bg-gray-50 dark:border-white/5 dark:hover:bg-white/5'}`}>
45                <div className={`flex size-5 items-center justify-center rounded-full border-2 transition-colors ${selectedPlan === opt.value ? 'border-brand-500' : 'border-gray-300 dark:border-gray-600'}`}>
46                  {selectedPlan === opt.value && <div className="size-2.5 rounded-full bg-brand-500" />}
47                </div>
48                <div className="flex-1">
49                  <p className="text-sm font-medium text-gray-800 dark:text-white/90">{opt.label}</p>
50                  <p className="text-xs text-gray-500 dark:text-gray-400">{opt.desc}</p>
51                </div>
52              </label>
53            ))}
54          </div>
55        </div>
56        {/* Size Selection */}
57        <div>
58          <p className="mb-3 text-xs font-medium uppercase tracking-wider text-gray-400">Size Selection</p>
59          <div className="flex gap-2">
60            {['sm', 'md', 'lg', 'xl'].map((size) => (
61              <label key={size} className={`flex items-center gap-2 rounded-xl border px-4 py-2.5 cursor-pointer transition-colors ${selectedSize === size ? 'border-brand-500 bg-brand-50 dark:bg-brand-500/10' : 'border-gray-200 hover:bg-gray-50 dark:border-white/5 dark:hover:bg-white/5'}`}>
62                <div className={`flex size-4 items-center justify-center rounded-full border-2 transition-colors ${selectedSize === size ? 'border-brand-500' : 'border-gray-300 dark:border-gray-600'}`}>
63                  {selectedSize === size && <div className="size-2 rounded-full bg-brand-500" />}
64                </div>
65                <span className={`text-sm font-medium ${selectedSize === size ? 'text-brand-600 dark:text-brand-400' : 'text-gray-600 dark:text-gray-400'}`}>{size.toUpperCase()}</span>
66              </label>
67            ))}
68          </div>
69        </div>
70      </div>
71    </SectionCard>
72  );
73}