Spaces:
Sleeping
Sleeping
File size: 2,421 Bytes
d70f132 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | import Badge from "@/components/ui/Badge";
import FlagBadges from "@/components/ui/FlagBadges";
import ProvenanceChip from "@/components/ui/ProvenanceChip";
import { categoryLabels, trackLabels } from "@/lib/data";
import type { ModelRow } from "@/lib/types";
import FlagNotes from "./FlagNotes";
export interface ModelHeaderProps {
model: ModelRow;
}
/** "0.6" → "0.6B"; undefined → "—". */
function fmtParams(paramsB?: number): string {
return paramsB === undefined ? "—" : `${paramsB}B`;
}
/**
* Model identity block: serif name, org, mono param count, license /
* track chips, provenance chip, flag icons + plain-language flag notes,
* and the editorial note line.
*/
export default function ModelHeader({ model }: ModelHeaderProps) {
return (
<header className="hairline-b pb-6 spring-up">
<p className="num mb-3 text-[11px] uppercase tracking-[0.22em] text-muted spring-in">
Model profile · {categoryLabels[model.category]}
</p>
<div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
<h1 className="font-display text-4xl leading-[1.05] text-text md:text-5xl spring-in" style={{ animationDelay: "60ms" }}>
{model.name}
</h1>
<div className="mb-1.5 spring-in" style={{ animationDelay: "90ms" }}>
<ProvenanceChip provenance={model.provenance} />
</div>
</div>
<div className="mt-4 flex flex-wrap items-center gap-x-3 gap-y-2 spring-in" style={{ animationDelay: "120ms" }}>
<span className="text-sm text-muted">{model.org}</span>
<span aria-hidden className="text-muted/40">
·
</span>
<span className="num text-sm text-text" title="Parameter count">
{fmtParams(model.paramsB)}
</span>
<Badge variant="outline" title={`License: ${model.license}`}>
{model.license}
</Badge>
<Badge variant="neutral" title={trackLabels[model.track]}>
{trackLabels[model.track]}
</Badge>
<FlagBadges flags={model.flags} />
</div>
{model.note && (
<p className="mt-4 font-display text-lg italic text-muted spring-in" style={{ animationDelay: "180ms" }}>
{model.note}
</p>
)}
<div className="mt-4 max-w-2xl spring-in" style={{ animationDelay: "240ms" }}>
<FlagNotes flags={model.flags} />
</div>
</header>
);
}
|