Denozordec
6008cd763a
quality / commitlint (push) Skipped
CD / update-wiki (push) Successful in 8s
quality / changes (push) Successful in 5s
quality / api (push) Skipped
quality / docker-check (push) Skipped
quality / web (push) Successful in 58s
CD / quality (push) Successful in 1m6s
CD / publish (push) Successful in 1m44s
- Removed unused imports and alerts related to Cloudflare, Globalping, and Local health checks from the HealthCheckConfigFields component. - Simplified the logic for rendering health check sources and improved layout responsiveness by adding min-width classes. - Introduced new Cloudflare and Globalping SVG icons for better visual representation in the HealthSourceTiles component. - Refactored the TilePanel component to enhance its structure and ensure proper handling of minimum width for child elements. This commit streamlines the health check configuration UI, improving maintainability and user experience.
89 lines
2.2 KiB
TypeScript
89 lines
2.2 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
|
|
/** Opt-in FieldSeparator after the row (default off — ReUI settings use Frame+gap). */
|
|
separated?: 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,
|
|
separated = false,
|
|
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 min-w-0 justify-start',
|
|
stacked ? 'justify-start' : '@md/field-group:justify-end',
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
{separated && !last ? <FieldSeparator /> : null}
|
|
</>
|
|
)
|
|
}
|