25 lines
No EOL
924 B
JavaScript
25 lines
No EOL
924 B
JavaScript
import { Button } from "@/components/ui/button";
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
|
import { ChevronUp, ChevronDown } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
const CollapsibleComponent = ({ children, text }) => {
|
|
const [isOpen, setIsOpen] = useState(true);
|
|
return (
|
|
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
|
|
<CollapsibleTrigger asChild>
|
|
<div className={`flex items-center justify-between cursor-pointer ${!isOpen ? "my-2" : ""}`}>
|
|
<h2 className='font-bold'>{text}</h2>
|
|
<Button variant={"outline"}>
|
|
{isOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
{children}
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
)
|
|
}
|
|
|
|
export default CollapsibleComponent |