website refactor
This commit is contained in:
@@ -1,3 +1,5 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { StatusDot } from '@/ui/StatusDot';
|
||||
@@ -19,33 +21,23 @@ interface RecentActivityTableProps {
|
||||
* 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 (
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeader>
|
||||
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Type</Text>
|
||||
<Text size="xs" weight="bold" uppercase variant="low">Type</Text>
|
||||
</TableHeader>
|
||||
<TableHeader>
|
||||
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Description</Text>
|
||||
<Text size="xs" weight="bold" uppercase variant="low">Description</Text>
|
||||
</TableHeader>
|
||||
<TableHeader>
|
||||
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Time</Text>
|
||||
<Text size="xs" weight="bold" uppercase variant="low">Time</Text>
|
||||
</TableHeader>
|
||||
<TableHeader>
|
||||
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Status</Text>
|
||||
<Text size="xs" weight="bold" uppercase variant="low">Status</Text>
|
||||
</TableHeader>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
@@ -53,16 +45,16 @@ export function RecentActivityTable({ items }: RecentActivityTableProps) {
|
||||
{items.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>
|
||||
<Text font="mono" color="var(--color-telemetry)" size="xs">{item.type}</Text>
|
||||
<Text font="mono" variant="telemetry" size="xs">{item.type}</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text color="var(--color-text-med)" size="xs">{item.description}</Text>
|
||||
<Text variant="med" size="xs">{item.description}</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text color="var(--color-text-low)" size="xs">{item.timestamp}</Text>
|
||||
<Text variant="low" size="xs">{item.timestamp}</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<StatusDot color={getStatusColor(item.status)} size={1.5} />
|
||||
<StatusDot intent={item.status === 'info' ? 'primary' : item.status} size="sm" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user