Form

interface ReactProps {
  children?: ReactNode
}

import type { FC, ReactNode } from 'react'
 
import FormItem from './Item'
 
export interface Props extends ReactProps {
  title: string
  description?: ReactNode
}
interface State {
  isOpen: boolean
}
 
const Form: FC<Props> = ({ title, description, children }) => {
  return (
    <div className="flex gap-10">
      <div className="flex-1">
        <div className="flex items-center gap-2 text-lg font-semibold">
          {title}
        </div>
        {!!description && <div className="mt-1">{description}</div>}
      </div>
      <div className="flex-1 space-y-4">{children}</div>
    </div>
  )
}
 
export default Object.assign(Form, { Item: FormItem })

import type { FC } from 'react'
import classnames from 'classnames'
 
export interface Props extends ReactProps {
  label?: string
  required?: boolean
}
interface State {}
 
const FormItem: FC<Props> = ({ label, children, required }) => {
  return (
    <label className="block">
      {!!label && (
        <span
          className={classnames(
            'cursor-pointer text-xs font-semibold text-neutral-600 dark:text-neutral-500',
            { 'after:text-red-500 after:content-["*"]': required }
          )}
        >
          {label}
        </span>
      )}
      <div className="mt-1">{children}</div>
    </label>
  )
}
 
export default FormItem

<Form title="Title" descripton={<span>description</span>}>
  <Form.Item label="Label" required>
    children
  </Form.Item>
  <Form.Item label="Label 1" required>
    children 1
  </Form.Item>
  <Form.Item label="Label 2">children 2</Form.Item>
</Form>