forked from administration/panel
24 lines
864 B
TypeScript
24 lines
864 B
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Button } from "../ui/button";
|
|
|
|
export function CollapsibleSection({ children, text }: { children: React.ReactNode, text: string }) {
|
|
const [collapsed, setCollapsed] = useState(true);
|
|
|
|
return collapsed ? (
|
|
<div className="cursor-pointer select-none" onClick={() => setCollapsed(false)}>
|
|
<div className="flex flex-row items-center">
|
|
<div className="flex flex-grow h-[1px] bg-slate-200 mx-4" />
|
|
<span className="flex-shrink text-slate-500">{text}</span>
|
|
<div className="flex flex-grow h-[1px] bg-slate-200 mx-4" />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="p-4 border-solid border-slate-200 border-[1px] rounded-lg bg-slate-50">
|
|
<Button variant="outline" className="mb-4" onClick={() => setCollapsed(true)}>Close</Button>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|