29 lines
865 B
TypeScript
29 lines
865 B
TypeScript
import { useId } from "react";
|
|
import type { UiTelemetryCard } from "../types";
|
|
import { TelemetryCard } from "./TelemetryCard";
|
|
|
|
export interface TelemetryGridProps {
|
|
cards: UiTelemetryCard[];
|
|
}
|
|
|
|
export function TelemetryGrid({ cards }: TelemetryGridProps) {
|
|
const headingId = useId();
|
|
const metricCount = `${cards.length} ${cards.length === 1 ? "Metric" : "Metrics"}`;
|
|
|
|
return (
|
|
<section className="telemetry-section" aria-labelledby={headingId}>
|
|
<header className="telemetry-section__header">
|
|
<div>
|
|
<p>Signal Matrix</p>
|
|
<h2 id={headingId}>Telemetry</h2>
|
|
</div>
|
|
<span>{metricCount}</span>
|
|
</header>
|
|
<div className="telemetry-grid">
|
|
{cards.map((card, index) => (
|
|
<TelemetryCard key={card.id} card={card} index={index + 1} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|