website refactor

apps/website/components/dashboard/RecentActivityTable.tsx

@@ -0,0 +1,74 @@
+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>
+  );
+}