32 lines
993 B
TypeScript
32 lines
993 B
TypeScript
import { useId } from "react";
|
|
import type { UiModuleBlock } from "../../types";
|
|
import { IconGlyph } from "../foundation/IconGlyph";
|
|
|
|
export interface ModuleCardProps {
|
|
module: UiModuleBlock;
|
|
}
|
|
|
|
export function ModuleCard({ module }: ModuleCardProps) {
|
|
const generatedId = useId();
|
|
const titleId = `${generatedId}-title`;
|
|
const ariaLabel = module.title ? undefined : module.label || module.id;
|
|
|
|
return (
|
|
<aside
|
|
className="module-card"
|
|
data-severity={module.severity || "neutral"}
|
|
data-model-id={module.id}
|
|
aria-labelledby={module.title ? titleId : undefined}
|
|
aria-label={ariaLabel}
|
|
>
|
|
<div>
|
|
{module.title ? <h2 id={titleId}>{module.title}</h2> : null}
|
|
{module.value ? <strong>{module.value}</strong> : null}
|
|
{module.detail || module.label ? (
|
|
<p>{module.detail || module.label}</p>
|
|
) : null}
|
|
</div>
|
|
{module.icon ? <IconGlyph name={module.icon} size="lg" /> : null}
|
|
</aside>
|
|
);
|
|
}
|