You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
28 lines
892 B
TypeScript
28 lines
892 B
TypeScript
import type { ReactNode } from 'react'
|
|
import { avatarColors, initials } from './avatar'
|
|
|
|
/** Entity header: avatar + name + status pill + one meta line + action cluster. */
|
|
export function RecordHeader(props: {
|
|
name: string
|
|
avatarSeed?: string
|
|
status?: ReactNode
|
|
meta?: ReactNode
|
|
actions?: ReactNode
|
|
}) {
|
|
const seed = props.avatarSeed ?? props.name
|
|
const { bg, fg } = avatarColors(seed)
|
|
return (
|
|
<div className="wf-rec">
|
|
<div className="wf-avatar" style={{ background: bg, color: fg }}>{initials(seed)}</div>
|
|
<div className="wf-rec-body">
|
|
<div className="wf-rec-title">
|
|
<h1>{props.name}</h1>
|
|
{props.status}
|
|
</div>
|
|
{props.meta !== undefined && <div className="wf-rec-meta">{props.meta}</div>}
|
|
</div>
|
|
{props.actions !== undefined && <div className="wf-rec-actions">{props.actions}</div>}
|
|
</div>
|
|
)
|
|
}
|