Function SectionHeader

apps/public/src/components/section.tsx:25–62

({
  label,
  title,
  description,
  className,
  align,
  as = 'h2',
  variant = 'default',
}: {
  label?: string;
  title: string | React.ReactNode;
  description?: string | React.ReactNode;
  className?: string;
  align?: 'center' | 'left';
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
  variant?: keyof typeof variants;
})

};

export function SectionHeader({
  label,
  title,
  description,
  className,
  align,
  as = 'h2',
  variant = 'default',
}: {
  label?: string;
  title: string | React.ReactNode;
  description?: string | React.ReactNode;
  className?: string;
  align?: 'center' | 'left';
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
  variant?: keyof typeof variants;
}) {
  const Heading = as;
  return (
    <div
      className={cn(
        'col gap-4',
        align === 'center'
          ? 'center-center text-center'
          : 'items-start text-left',
        className,
      )}
    >
      {label && <SectionLabel>{label}</SectionLabel>}
      <Heading className={cn(variants[variant], 'max-w-3xl leading-tight')}>
        {title}
      </Heading>
      {description && (
        <p className={cn('text-muted-foreground max-w-3xl')}>{description}</p>
      )}
    </div>
  );
}

export function SectionLabel({
  children,