FormPanel.tsx68 lines · main

1	import { forwardRef, HTMLAttributes } from 'react'
2	import { cn } from 'ui'
3
4	interface Props {
5	children: React.ReactNode
6	header?: React.ReactNode
7	footer?: React.ReactNode
8	/**
9	* Fades the panel and clicks are disabled
10	*/
11	disabled?: boolean
12	}
13
14	/** @deprecated Use Card instead, refer to BasicAuthSettingsForm.tsx for reference */
15	export const FormPanel = ({ children, header, footer }: Props) => (
16	<FormPanelContainer>
17	{header && <FormPanelHeader>{header}</FormPanelHeader>}
18	<FormPanelContent className="divide-y">{children}</FormPanelContent>
19	{footer && <FormPanelFooter>{footer}</FormPanelFooter>}
20	</FormPanelContainer>
21	)
22
23	export const FormPanelContainer = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
24	({ children, ...props }, ref) => (
25	<div
26	ref={ref}
27	{...props}
28	className={cn(
29	'bg-surface-100 border overflow-hidden rounded-md shadow-sm max-w-full',
30	props.className
31	)}
32	>
33	{children}
34	</div>
35	)
36	)
37
38	FormPanelContainer.displayName = FormPanelContainer.displayName
39
40	export const FormPanelHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
41	({ children, ...props }, ref) => (
42	<div ref={ref} {...props} className={cn('border-default border-b px-8 py-4', props.className)}>
43	{children}
44	</div>
45	)
46	)
47
48	FormPanelHeader.displayName = FormPanelHeader.displayName
49
50	export const FormPanelContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
51	({ children, ...props }, ref) => (
52	<div ref={ref} {...props} className={cn('divide-border flex flex-col gap-0', props.className)}>
53	{children}
54	</div>
55	)
56	)
57
58	FormPanelContent.displayName = FormPanelContent.displayName
59
60	export const FormPanelFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
61	({ children, ...props }, ref) => (
62	<div ref={ref} {...props} className={cn('border-t', props.className)}>
63	{children}
64	</div>
65	)
66	)
67
68	FormPanelFooter.displayName = FormPanelFooter.displayName