DenozordecandCursor
62be7af0c3
Build, Test, and Push CFDM Docker Image / test (push) Successful in 3m31s
Build, Test, and Push CFDM Docker Image / build-and-push (push) Successful in 1m45s
Build, Test, and Push CFDM Docker Image / create-release (push) Skipped
Build, Test, and Push CFDM Docker Image / update-wiki (push) Successful in 5s
- Added children prop to CountedLineTabs for improved flexibility in rendering additional content. - Introduced CompactNumberField for better handling of numeric inputs in HealthCheckConfigFields, enhancing user experience. - Refactored ServiceEditSheet and ServiceGroupEditSheet to utilize CountedLineTabs and streamline health check configurations. - Updated SettingRow component to simplify its export and improve code organization. Co-authored-by: Cursor <cursoragent@cursor.com>
86 lines
2.0 KiB
TypeScript
86 lines
2.0 KiB
TypeScript
import { type ReactNode } from 'react'
|
|
|
|
import { cn } from '@cfdm/ui/lib/utils'
|
|
import {
|
|
Field,
|
|
FieldContent,
|
|
FieldDescription,
|
|
FieldLabel,
|
|
FieldSeparator,
|
|
FieldTitle,
|
|
} from '@cfdm/ui/components/field'
|
|
|
|
export interface SettingRowProps {
|
|
title: string
|
|
description?: ReactNode
|
|
children: ReactNode
|
|
last?: boolean
|
|
compact?: boolean
|
|
stacked?: boolean
|
|
labelFor?: string
|
|
contentClassName?: string
|
|
className?: string
|
|
titleAddon?: ReactNode
|
|
}
|
|
|
|
/** Compact settings row (REUI PRO profile-1 / settings-9 pattern). */
|
|
export function SettingRow({
|
|
title,
|
|
description,
|
|
children,
|
|
last,
|
|
compact,
|
|
stacked,
|
|
labelFor,
|
|
contentClassName,
|
|
className,
|
|
titleAddon,
|
|
}: SettingRowProps) {
|
|
return (
|
|
<>
|
|
<Field
|
|
orientation={stacked ? 'vertical' : 'responsive'}
|
|
className={cn('gap-4 px-5 py-4', className)}
|
|
>
|
|
<div className="flex min-w-0 flex-1 flex-col gap-0.5 @md/field-group:max-w-sm">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{labelFor ? (
|
|
<FieldLabel htmlFor={labelFor}>{title}</FieldLabel>
|
|
) : (
|
|
<FieldTitle>{title}</FieldTitle>
|
|
)}
|
|
{titleAddon}
|
|
</div>
|
|
|
|
{description ? (
|
|
<FieldDescription className="text-sm">{description}</FieldDescription>
|
|
) : null}
|
|
</div>
|
|
|
|
<FieldContent
|
|
className={cn(
|
|
'w-full min-w-0 @md/field-group:flex-1',
|
|
stacked
|
|
? 'max-w-none'
|
|
: compact
|
|
? '@md/field-group:max-w-[17rem] @md/field-group:shrink-0'
|
|
: '@md/field-group:max-w-[34rem]',
|
|
contentClassName,
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
'flex w-full justify-start',
|
|
stacked ? 'justify-start' : '@md/field-group:justify-end',
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
{!last ? <FieldSeparator /> : null}
|
|
</>
|
|
)
|
|
}
|