39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { HStack, VStack } from "@astryxdesign/core/Layout";
|
|
import { StatusDot, type StatusDotVariant } from "@astryxdesign/core/StatusDot";
|
|
import { Text } from "@astryxdesign/core/Text";
|
|
|
|
interface StatusCellProps {
|
|
/** Semantic dot variant. */
|
|
variant: StatusDotVariant;
|
|
/** Status label; used for both the dot's a11y label and the visible text. */
|
|
label: string;
|
|
/** Whether the dot should pulse to indicate activity. */
|
|
isPulsing?: boolean;
|
|
/** Optional second supporting line under the status. */
|
|
detail?: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Status indicator for table cells: `StatusDot` + semibold label, with an
|
|
* optional secondary detail line underneath. Extracted from the recurring
|
|
* status columns across the provider/integration list pages.
|
|
*/
|
|
export function StatusCell({ variant, label, isPulsing, detail }: StatusCellProps) {
|
|
return (
|
|
<VStack gap={0}>
|
|
<HStack gap={2} vAlign="center">
|
|
<StatusDot variant={variant} label={label} isPulsing={isPulsing} />
|
|
<Text type="supporting" weight="semibold">
|
|
{label}
|
|
</Text>
|
|
</HStack>
|
|
{detail ? (
|
|
<Text type="supporting" color="secondary">
|
|
{detail}
|
|
</Text>
|
|
) : null}
|
|
</VStack>
|
|
);
|
|
}
|