action-panel.tsx37 lines · main

1	import { ComponentProps, forwardRef } from 'react'
2	import { Button, Card, CardDescription, CardHeader, CardTitle } from 'ui'
3
4	interface ActionPanelProps extends Omit<React.ComponentProps<typeof Card>, 'onClick' | 'type'> {
5	title: string
6	description: string
7	buttonLabel: ComponentProps<typeof Button>['children']
8	onClick: ComponentProps<typeof Button>['onClick']
9	loading: ComponentProps<typeof Button>['loading']
10	icon?: ComponentProps<typeof Button>['icon']
11	type?: ComponentProps<typeof Button>['type']
12	}
13
14	export const ActionPanel = forwardRef<HTMLDivElement, ActionPanelProps>(
15	({ title, description, buttonLabel, onClick, loading, icon, type, ...props }, ref) => {
16	return (
17	<Card
18	className="first:rounded-b-none last:rounded-t-none shadow-none only:rounded-lg"
19	ref={ref}
20	{...props}
21	>
22	<CardHeader className="lg:flex-row lg:items-center gap-3 lg:gap-10 py-4 border-0">
23	<div className="flex flex-col gap-2 flex-1 grow">
24	<CardTitle className="text-sm">{title}</CardTitle>
25	<CardDescription className="max-w-xl">{description}</CardDescription>
26	</div>
27	<div className="flex lg:justify-end flex-">
28	<Button onClick={onClick} loading={loading} icon={icon} type={type}>
29	{buttonLabel}
30	</Button>
31	</div>
32	</CardHeader>
33	</Card>
34	)
35	}
36	)
37	ActionPanel.displayName = 'ActionPanel'