50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import type { UiServiceRow } from "../types";
|
|
import { IconGlyph } from "./IconGlyph";
|
|
import { StatusBadge } from "./StatusBadge";
|
|
|
|
export interface ServiceRowProps {
|
|
service: UiServiceRow;
|
|
}
|
|
|
|
export function ServiceRow({ service }: ServiceRowProps) {
|
|
const target = service.link?.external ? "_blank" : undefined;
|
|
const rel = service.link?.external ? "noreferrer" : undefined;
|
|
const content = (
|
|
<>
|
|
<IconGlyph name={service.icon} />
|
|
<div className="service-row__main">
|
|
<h3>{service.label}</h3>
|
|
<p>{service.description}</p>
|
|
</div>
|
|
{service.detail ? (
|
|
<StatusBadge label={service.detail} severity={service.severity} />
|
|
) : null}
|
|
</>
|
|
);
|
|
|
|
if (service.link) {
|
|
return (
|
|
<a
|
|
className="service-row"
|
|
data-severity={service.severity}
|
|
data-model-id={service.id}
|
|
href={service.link.href}
|
|
target={target}
|
|
rel={rel}
|
|
aria-label={service.link.label}
|
|
>
|
|
{content}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<article
|
|
className="service-row"
|
|
data-severity={service.severity}
|
|
data-model-id={service.id}
|
|
>
|
|
{content}
|
|
</article>
|
|
);
|
|
}
|