dify/web/features/deployments/shared/components/section.tsx

'use client'

import type { ReactNode } from 'react'
import { cn } from '@langgenius/dify-ui/cn'

type SectionProps = {
  title: string
  description?: string
  action?: ReactNode
  children: ReactNode
  layout?: 'block' | 'row'
  tone?: 'default' | 'destructive'
  showDivider?: boolean
}

export function Section({
  title,
  description,
  action,
  children,
  layout = 'block',
  tone = 'default',
  showDivider = true,
}: SectionProps) {
  const hasAction = Boolean(action)
  const titleClassName = cn(
    'system-sm-semibold',
    tone === 'destructive'
      ? 'text-util-colors-red-red-700'
      : layout === 'row'
        ? 'text-text-secondary'
        : 'text-text-primary',
  )
  const descriptionClassName = cn(
    'mt-1 body-xs-regular',
    tone === 'destructive' ? 'text-util-colors-red-red-600' : 'text-text-tertiary',
  )

  if (layout === 'row') {
    return (
      <section
        className={cn(
          'py-4 first:pt-0 last:pb-0',
          showDivider && 'border-b border-divider-subtle last:border-b-0',
        )}
      >
        <div className="flex flex-col gap-3 sm:flex-row sm:gap-x-6">
          <div className="flex min-w-0 shrink-0 flex-col sm:w-40 sm:pt-1">
            <div className={titleClassName}>{title}</div>
            {description && <p className={descriptionClassName}>{description}</p>}
          </div>
          <div className="min-w-0 grow">
            {hasAction ? (
              <div className="flex min-w-0 items-start gap-3">
                <div className="min-w-0 grow">{children}</div>
                <div className="shrink-0">{action}</div>
              </div>
            ) : (
              children
            )}
          </div>
        </div>
      </section>
    )
  }

  return (
    <section
      className={cn(
        'py-6 first:pt-0 last:pb-0',
        showDivider && 'border-b border-divider-subtle last:border-b-0',
      )}
    >
      <div className="mb-3 flex min-w-0 flex-col">
        <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2">
          <div className={titleClassName}>{title}</div>
          {hasAction && <div className="shrink-0">{action}</div>}
        </div>
        {description && <p className={cn(descriptionClassName, 'max-w-150')}>{description}</p>}
      </div>
      <div className="min-w-0">{children}</div>
    </section>
  )
}