38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
interface ExpandableSectionProps {
|
|
title: string;
|
|
children: React.ReactNode;
|
|
defaultOpen?: boolean;
|
|
}
|
|
|
|
export function ExpandableSection({
|
|
title,
|
|
children,
|
|
defaultOpen = false,
|
|
}: ExpandableSectionProps) {
|
|
const [open, setOpen] = useState(defaultOpen);
|
|
|
|
return (
|
|
<div className="border-t border-gray-100 dark:border-gray-800">
|
|
<button
|
|
onClick={() => setOpen(!open)}
|
|
className="w-full flex items-center justify-between py-2 px-1 text-left text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors"
|
|
>
|
|
<span>{title}</span>
|
|
<svg
|
|
className={`w-4 h-4 transition-transform ${open ? "rotate-90" : ""}`}
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
{open && <div className="pb-3 px-1">{children}</div>}
|
|
</div>
|
|
);
|
|
}
|