65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Text } from '@/ui/Text';
|
|
import { StatusDot } from '@/ui/StatusDot';
|
|
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
|
|
|
|
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.
|
|
*/
|
|
export function RecentActivityTable({ items }: RecentActivityTableProps) {
|
|
return (
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeader>
|
|
<Text size="xs" weight="bold" uppercase variant="low">Type</Text>
|
|
</TableHeader>
|
|
<TableHeader>
|
|
<Text size="xs" weight="bold" uppercase variant="low">Description</Text>
|
|
</TableHeader>
|
|
<TableHeader>
|
|
<Text size="xs" weight="bold" uppercase variant="low">Time</Text>
|
|
</TableHeader>
|
|
<TableHeader>
|
|
<Text size="xs" weight="bold" uppercase variant="low">Status</Text>
|
|
</TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{items.map((item) => (
|
|
<TableRow key={item.id}>
|
|
<TableCell>
|
|
<Text font="mono" variant="telemetry" size="xs">{item.type}</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text variant="med" size="xs">{item.description}</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text variant="low" size="xs">{item.timestamp}</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<StatusDot intent={item.status === 'info' ? 'primary' : item.status} size="sm" />
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
);
|
|
}
|