111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
import type { StyleData } from "@/lib/types";
|
|
|
|
interface MetadataBadgesProps {
|
|
style: StyleData;
|
|
}
|
|
|
|
type BadgeVariant = "green" | "yellow" | "red" | "blue" | "gray";
|
|
|
|
function Badge({
|
|
label,
|
|
accessibleLabel = label,
|
|
variant,
|
|
}: {
|
|
label: string;
|
|
accessibleLabel?: string;
|
|
variant: BadgeVariant;
|
|
}) {
|
|
const colors = {
|
|
green: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
|
|
yellow: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
|
|
red: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
|
|
blue: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
|
|
gray: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400",
|
|
};
|
|
|
|
return (
|
|
<span className={`inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded-full ${colors[variant]}`}>
|
|
<span className="sr-only">{accessibleLabel}</span>
|
|
<span aria-hidden="true">{label}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function getComplexityVariant(c: string): "green" | "yellow" | "red" {
|
|
if (c === "Low") return "green";
|
|
if (c === "Medium") return "yellow";
|
|
return "red";
|
|
}
|
|
|
|
export function getTaxonomyValue(metadata: string, key: string): string {
|
|
const prefix = `${key}:`;
|
|
const entry = metadata.split("|").find((part) => part.startsWith(prefix));
|
|
return entry?.slice(prefix.length) ?? "unknown";
|
|
}
|
|
|
|
function formatTaxonomyValue(value: string): string {
|
|
return value
|
|
.split("-")
|
|
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
.join(" ");
|
|
}
|
|
|
|
export function getLevelVariant(value: string): BadgeVariant {
|
|
if (value === "low" || value === "supported") return "green";
|
|
if (value === "moderate" || value === "conditional") return "yellow";
|
|
if (value === "high" || value === "not-recommended") return "red";
|
|
return "gray";
|
|
}
|
|
|
|
function TaxonomyBadge({
|
|
accessibleLabel,
|
|
label,
|
|
value,
|
|
}: {
|
|
accessibleLabel: string;
|
|
label: string;
|
|
value: string;
|
|
}) {
|
|
const displayValue = formatTaxonomyValue(value);
|
|
|
|
return (
|
|
<Badge
|
|
accessibleLabel={`${accessibleLabel}: ${displayValue}`}
|
|
label={`${label}: ${displayValue}`}
|
|
variant={getLevelVariant(value)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function MetadataBadges({ style }: MetadataBadgesProps) {
|
|
const performanceCost = getTaxonomyValue(style.performance, "cost");
|
|
const accessibilityRisk = getTaxonomyValue(style.accessibility, "risk");
|
|
|
|
return (
|
|
<div aria-label="Style metadata" className="flex flex-wrap gap-1.5" role="group">
|
|
{style.status !== "active" && (
|
|
<Badge
|
|
label={`Status: ${formatTaxonomyValue(style.status)}`}
|
|
variant={style.status === "deprecated" ? "red" : "blue"}
|
|
/>
|
|
)}
|
|
<Badge
|
|
label={`Complexity: ${style.complexity}`}
|
|
variant={getComplexityVariant(style.complexity)}
|
|
/>
|
|
<TaxonomyBadge
|
|
accessibleLabel="Performance cost"
|
|
label="Cost"
|
|
value={performanceCost}
|
|
/>
|
|
<TaxonomyBadge
|
|
accessibleLabel="Accessibility risk"
|
|
label="A11y risk"
|
|
value={accessibilityRisk}
|
|
/>
|
|
<TaxonomyBadge accessibleLabel="Light mode support" label="Light" value={style.lightMode} />
|
|
<TaxonomyBadge accessibleLabel="Dark mode support" label="Dark" value={style.darkMode} />
|
|
</div>
|
|
);
|
|
}
|