collapsible-alert.tsx52 lines · main

1	'use client'
2
3	import { type VariantProps } from 'class-variance-authority'
4	import { ChevronDown } from 'lucide-react'
5	import * as React from 'react'
6	import { Button, cn } from 'ui'
7	import { alertVariants } from 'ui/src/components/shadcn/ui/alert'
8	import {
9	Collapsible,
10	CollapsibleContent,
11	CollapsibleTrigger,
12	} from 'ui/src/components/shadcn/ui/collapsible'
13
14	export interface CollapsibleAlertProps
15	extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof alertVariants> {
16	trigger: React.ReactNode
17	defaultOpen?: boolean
18	}
19
20	const CollapsibleAlert = React.forwardRef<HTMLDivElement, CollapsibleAlertProps>(
21	({ className, variant = 'default', trigger, defaultOpen, children, ...props }, ref) => (
22	<div
23	ref={ref}
24	className={cn(
25	alertVariants({ variant }),
26	// Override default padding to be tighter
27	'p-3',
28	className
29	)}
30	{...props}
31	>
32	<Collapsible defaultOpen={defaultOpen}>
33	<div className="flex items-center justify-between gap-2">
34	<span className="font-medium">{trigger}</span>
35	<CollapsibleTrigger asChild>
36	<Button
37	type="outline"
38	size="tiny"
39	className={cn('px-0! w-[26px]', '[&[data-state=open]_svg]:rotate-180')}
40	aria-label="Toggle"
41	icon={<ChevronDown className="transition-transform duration-200" />}
42	/>
43	</CollapsibleTrigger>
44	</div>
45	<CollapsibleContent className="pt-3">{children}</CollapsibleContent>
46	</Collapsible>
47	</div>
48	)
49	)
50	CollapsibleAlert.displayName = 'CollapsibleAlert'
51
52	export { CollapsibleAlert }