Collapsible

1'use client'
2
3import * as React from 'react'
4import { ChevronsUpDown } from 'lucide-react'
5
6import { Button } from '@/components/ui/button'
7import {
8    Collapsible,
9    CollapsibleContent,
10    CollapsibleTrigger,
11} from '@/components/ui/collapsible'
12
13export function CollapsibleDemo() {
14    const [isOpen, setIsOpen] = React.useState(false)
15
16    return (
17        <Collapsible
18            open={isOpen}
19            onOpenChange={setIsOpen}
20            className="flex w-[350px] flex-col gap-2"
21        >
22            <div className="text-primary flex items-center justify-between gap-4 px-4">
23                <h4 className="font-semibold">Today’s Tasks</h4>
24                <CollapsibleTrigger asChild>
25                    <Button
26                        variant="ghost"
27                        size="icon"
28                        className="size-8 bg-gray-200"
29                    >
30                        <ChevronsUpDown />
31                        <span className="sr-only">Toggle</span>
32                    </Button>
33                </CollapsibleTrigger>
34            </div>
35
36            <div className="border-border rounded-lg border bg-gray-100 px-4 py-2 text-sm">
37                📝 Design meeting at 10 AM
38            </div>
39
40            <CollapsibleContent className="flex flex-col gap-2">
41                <div className="border-border rounded-lg border bg-gray-100 px-4 py-2 text-sm">
42                    💻 Finish project dashboard
43                </div>
44                <div className="border-border rounded-lg border bg-gray-100 px-4 py-2 text-sm">
45                    📞 Call with client at 3 PM
46                </div>
47            </CollapsibleContent>
48        </Collapsible>
49    )
50}
51