Loading...
Loading...
A single-open accordion (radio behavior) with smooth height animation and bordered cards.
import { useState } from "react";
const items = [
{ title: "Profile Settings", body: "Manage your personal information, email preferences, and account security settings all in one place." },
{ title: "Billing & Plan", body: "View your current subscription plan, update payment methods, and download invoices for your records." },
{ title: "Team Members", body: "Invite colleagues, assign roles, and manage permissions for your shared workspace." },
{ title: "Notifications", body: "Configure email, push, and in-app notification preferences for different event types." },
];
export function AccordionRadio() {
const [active, setActive] = useState<number>(0);
return (
<div className="max-w-xl mx-auto py-16 px-4">
<h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">Settings</h2>
<div className="space-y-2">
{items.map((item, i) => {
const isOpen = active === i;
return (
<div key={i} className={`rounded-lg border transition-all duration-200 ${isOpen ? 'border-blue-500 bg-blue-50/50 shadow-sm' : 'border-gray-200 bg-white'}`}>
<button
className="w-full flex items-center justify-between px-5 py-3.5 focus:outline-none group"
onClick={() => setActive(i)}
>
<div className="flex items-center gap-3">
<span className={`w-2 h-2 rounded-full transition-colors ${isOpen ? 'bg-blue-500' : 'bg-gray-300'}`} />
<span className={`font-medium transition-colors ${isOpen ? 'text-blue-900' : 'text-gray-700 group-hover:text-gray-900'}`}>
{item.title}
</span>
</div>
<svg className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180 text-blue-500' : 'text-gray-400'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div className={`overflow-hidden transition-all duration-300 ease-in-out ${isOpen ? 'max-h-40 opacity-100' : 'max-h-0 opacity-0'}`}>
<div className="px-5 pb-4 pt-1 text-sm text-gray-600 leading-relaxed pl-10">{item.body}</div>
</div>
</div>
);
})}
</div>
</div>
);
}