Denozordec
55eb2a6c89
CI / changes (push) Successful in 11s
CI / commitlint (push) Has been skipped
CI / openapi (push) Has been skipped
CI / web (push) Successful in 1m7s
CI / go (push) Has been skipped
CI / bird2 (push) Has been skipped
CI / release (push) Successful in 4m20s
Updated the AnalyticsDashboardSkeleton to utilize a new grid layout for KPI tiles, increasing the number of displayed items and adjusting their size for better visibility. Modified the SettingsSettingField component to accept a ReactNode for the description, allowing for richer content. Refactored the Settings component to improve the organization of API token management and session status display, enhancing clarity and usability. Additionally, integrated new UI elements for theme selection and improved layout consistency across components.
58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import { type ComponentProps, type ReactNode } from 'react'
|
|
|
|
import { Badge } from '@/components/reui/badge'
|
|
import { cn } from '@evobgp/ui/lib/utils'
|
|
import {
|
|
Field,
|
|
FieldContent,
|
|
FieldDescription,
|
|
FieldLabel,
|
|
FieldSeparator,
|
|
FieldTitle,
|
|
} from '@evobgp/ui/components/field'
|
|
|
|
/** settings-3 row pattern for tenant/UI settings. */
|
|
export function SettingsSettingField({
|
|
title,
|
|
description,
|
|
badge,
|
|
children,
|
|
last,
|
|
labelFor,
|
|
contentClassName,
|
|
}: {
|
|
title: string
|
|
description: ReactNode
|
|
badge?: { label: string; variant: ComponentProps<typeof Badge>['variant'] }
|
|
children: ReactNode
|
|
last?: boolean
|
|
labelFor?: string
|
|
contentClassName?: string
|
|
}) {
|
|
return (
|
|
<>
|
|
<Field orientation="responsive" className="gap-4 px-4 py-4">
|
|
<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>
|
|
)}
|
|
{badge ? (
|
|
<Badge variant={badge.variant} size="sm">
|
|
{badge.label}
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
<FieldDescription className="text-xs">{description}</FieldDescription>
|
|
</div>
|
|
<FieldContent className={cn('min-w-0 @md/field-group:w-78', contentClassName)}>
|
|
{children}
|
|
</FieldContent>
|
|
</Field>
|
|
{!last ? <FieldSeparator /> : null}
|
|
</>
|
|
)
|
|
}
|