Search
Copy Code
Previous: Accordion
Next: Aspect Ratio
Close Terminal
Light Mode
Order #4189
Status
Shipped
Shipping address100 Market St, San Francisco
Items2x Studio Headphones
collapsible-demo.tsx
collapsible.tsx
prompt.md
Collapse
Reset
Copy Code
Download
Run
1
"use client"
2
3
import * as React from "react"
4
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
5
import { ChevronsUpDown } from "lucide-react"
6
import { cn } from "@/lib/utils"
7
8
export default function CollapsibleDemo() {
9
const [isOpen, setIsOpen] = React.useState(true)
10
11
return (
12
<div className="w-full h-full min-h-[500px] flex items-center justify-center p-10 bg-white dark:bg-[#1C1C1C]">
13
<Collapsible
14
open={isOpen}
15
onOpenChange={setIsOpen}
16
className="w-full max-w-[340px] space-y-4"
17
>
18
<div className="flex items-center justify-between">
19
<h4 className="text-[17px] font-semibold text-zinc-900 dark:text-[#F5F5F7]">
20
Order #4189
21
</h4>
22
<CollapsibleTrigger asChild>
23
<button className="flex items-center justify-center w-8 h-8 rounded-lg bg-black/5 hover:bg-black/10 dark:bg-white/10 dark:hover:bg-white/15 transition-colors text-zinc-500 dark:text-zinc-400 outline-none">
24
<ChevronsUpDown className="w-4 h-4" />
25
<span className="sr-only">Toggle</span>
26
</button>
27
</CollapsibleTrigger>
28
</div>
29
30
<CollapsibleContent className="space-y-3">
31
<div className="flex items-center justify-between rounded-xl border border-black/5 dark:border-white/10 px-4 py-3 bg-white/50 dark:bg-transparent">
32
<span className="text-[14px] text-zinc-500 dark:text-zinc-400">Status</span>
33
<div className="rounded-full bg-emerald-500/10 px-2.5 py-0.5">
34
<span className="text-[13px] font-medium text-emerald-600 dark:text-emerald-400">
35
Shipped
36
</span>
37
</div>
38
</div>
39
40
<div className="flex flex-col gap-1 rounded-xl border border-black/5 dark:border-white/10 px-4 py-3 bg-white/50 dark:bg-transparent">
41
<span className="text-[14px] font-medium text-zinc-900 dark:text-[#E2E2E2]">
42
Shipping address
43
</span>
44
<span className="text-[14px] text-zinc-500 dark:text-zinc-400">
45
100 Market St, San Francisco
46
</span>
47
</div>
48
49
<div className="flex flex-col gap-1 rounded-xl border border-black/5 dark:border-white/10 px-4 py-3 bg-white/50 dark:bg-transparent">
50
<span className="text-[14px] font-medium text-zinc-900 dark:text-[#E2E2E2]">
51
Items
52
</span>
53
<span className="text-[14px] text-zinc-500 dark:text-zinc-400">
54
2x Studio Headphones
55
</span>
56
</div>
57
</CollapsibleContent>
58
</Collapsible>
59
</div>
60
)
61
}
62