website refactor

apps/website/components/actions/ActionList.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { ActionItem } from '@/lib/queries/ActionsPageQuery';
+import { ActionStatusBadge } from './ActionStatusBadge';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+import { Text } from '@/ui/Text';
+
+interface ActionListProps {
+  actions: ActionItem[];
+}
+
+export function ActionList({ actions }: ActionListProps) {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Timestamp</TableHeader>
+          <TableHeader>Type</TableHeader>
+          <TableHeader>Initiator</TableHeader>
+          <TableHeader>Status</TableHeader>
+          <TableHeader>Details</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {actions.map((action) => (
+          <TableRow 
+            key={action.id} 
+            clickable
+          >
+            <TableCell>
+              <Text font="mono" size="xs" color="text-gray-400">{action.timestamp}</Text>
+            </TableCell>
+            <TableCell>
+              <Text size="xs" weight="medium" color="text-gray-200">{action.type}</Text>
+            </TableCell>
+            <TableCell>
+              <Text size="xs" color="text-gray-400">{action.initiator}</Text>
+            </TableCell>
+            <TableCell>
+              <ActionStatusBadge status={action.status} />
+            </TableCell>
+            <TableCell>
+              <Text size="xs" color="text-gray-400">
+                {action.details}
+              </Text>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}