website refactor
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Box } from '@/ui/Box';
|
||||
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;
|
||||
@@ -32,43 +32,41 @@ export function RecentActivityTable({ items }: RecentActivityTableProps) {
|
||||
};
|
||||
|
||||
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>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeader>
|
||||
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Type</Text>
|
||||
</TableHeader>
|
||||
<TableHeader>
|
||||
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Description</Text>
|
||||
</TableHeader>
|
||||
<TableHeader>
|
||||
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Time</Text>
|
||||
</TableHeader>
|
||||
<TableHeader>
|
||||
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Status</Text>
|
||||
</TableHeader>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{items.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>
|
||||
<Text font="mono" color="var(--color-telemetry)" size="xs">{item.type}</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text color="var(--color-text-med)" size="xs">{item.description}</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text color="var(--color-text-low)" size="xs">{item.timestamp}</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<StatusDot color={getStatusColor(item.status)} size={1.5} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user