52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { cn } from '@/lib/utils'
|
||
|
|
|
||
|
|
type CompletionStatus = 'complete' | 'warning' | 'error'
|
||
|
|
|
||
|
|
type ConfigSectionHeaderProps = {
|
||
|
|
title: string
|
||
|
|
description?: string
|
||
|
|
status: CompletionStatus
|
||
|
|
summary?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const statusDot: Record<CompletionStatus, string> = {
|
||
|
|
complete: 'bg-emerald-500',
|
||
|
|
warning: 'bg-amber-500',
|
||
|
|
error: 'bg-red-500',
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ConfigSectionHeader({
|
||
|
|
title,
|
||
|
|
description,
|
||
|
|
status,
|
||
|
|
summary,
|
||
|
|
}: ConfigSectionHeaderProps) {
|
||
|
|
return (
|
||
|
|
<div className="flex items-start gap-3">
|
||
|
|
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||
|
|
<span
|
||
|
|
className={cn(
|
||
|
|
'mt-1 h-2.5 w-2.5 rounded-full shrink-0',
|
||
|
|
statusDot[status],
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
<div className="flex-1 min-w-0">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<h3 className="text-base font-semibold">{title}</h3>
|
||
|
|
{summary && (
|
||
|
|
<span className="text-xs text-muted-foreground truncate">
|
||
|
|
— {summary}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{description && (
|
||
|
|
<p className="text-sm text-muted-foreground mt-0.5">{description}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|