FormHeader.tsx35 lines · main

1	import { ReactNode } from 'react'
2	import { cn } from 'ui'
3
4	import { DocsButton } from '../DocsButton'
5
6	export const FormHeader = ({
7	title,
8	description,
9	docsUrl,
10	actions,
11	className,
12	}: {
13	title: string
14	description?: string
15	docsUrl?: string
16	actions?: ReactNode
17	className?: string
18	}) => {
19	return (
20	<div
21	className={cn(
22	`w-full mb-6 flex flex-col sm:flex-row md:items-center justify-between gap-4 md:h-(--header-height) ${className}`
23	)}
24	>
25	<div className="space-y-1">
26	<h3 className="text-foreground text-xl prose">{title}</h3>
27	{description && <p className="prose text-sm max-w-2xl">{description}</p>}
28	</div>
29	<div className="flex flex-col sm:flex-row md:items-center gap-x-2">
30	{docsUrl !== undefined && <DocsButton href={docsUrl} />}
31	{actions}
32	</div>
33	</div>
34	)
35	}