75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { StatusDot } from '@/ui/StatusDot';
|
|
|
|
export interface ActivityItem {
|
|
id: string;
|
|
type: string;
|
|
description: string;
|
|
timestamp: string;
|
|
status?: 'success' | 'warning' | 'critical' | 'info';
|
|
}
|
|
|
|
interface RecentActivityTableProps {
|
|
items: ActivityItem[];
|
|
}
|
|
|
|
/**
|
|
* RecentActivityTable
|
|
*
|
|
* A high-density table for displaying recent events and telemetry logs.
|
|
* Uses UI primitives to comply with architectural constraints.
|
|
*/
|
|
export function RecentActivityTable({ items }: RecentActivityTableProps) {
|
|
const getStatusColor = (status?: string) => {
|
|
switch (status) {
|
|
case 'success': return 'var(--color-success)';
|
|
case 'warning': return 'var(--color-warning)';
|
|
case 'critical': return 'var(--color-critical)';
|
|
default: return 'var(--color-primary)';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box overflow="auto">
|
|
<Box as="table" w="full" textAlign="left">
|
|
<Box as="thead">
|
|
<Box as="tr" borderBottom borderColor="var(--color-outline)">
|
|
<Box as="th" pb={2}>
|
|
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Type</Text>
|
|
</Box>
|
|
<Box as="th" pb={2}>
|
|
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Description</Text>
|
|
</Box>
|
|
<Box as="th" pb={2}>
|
|
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Time</Text>
|
|
</Box>
|
|
<Box as="th" pb={2}>
|
|
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Status</Text>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
<Box as="tbody">
|
|
{items.map((item) => (
|
|
<Box key={item.id} as="tr" borderBottom borderColor="rgba(35, 39, 43, 0.5)" hoverBg="rgba(255, 255, 255, 0.05)" transition>
|
|
<Box as="td" py={3}>
|
|
<Text font="mono" color="var(--color-telemetry)" size="xs">{item.type}</Text>
|
|
</Box>
|
|
<Box as="td" py={3}>
|
|
<Text color="var(--color-text-med)" size="xs">{item.description}</Text>
|
|
</Box>
|
|
<Box as="td" py={3}>
|
|
<Text color="var(--color-text-low)" size="xs">{item.timestamp}</Text>
|
|
</Box>
|
|
<Box as="td" py={3}>
|
|
<StatusDot color={getStatusColor(item.status)} size={1.5} />
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|