From c419d3344e3cdfdd7a5f80ebaabc76d43e20b605 Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Sun, 14 Dec 2025 18:03:54 +0000
Subject: [PATCH] IssuesTable component

---
 packages/frontend/src/Index.tsx               | 37 +------------------
 .../frontend/src/components/issues-table.tsx  | 28 ++++++++++++++
 2 files changed, 30 insertions(+), 35 deletions(-)
 create mode 100644 packages/frontend/src/components/issues-table.tsx

diff --git a/packages/frontend/src/Index.tsx b/packages/frontend/src/Index.tsx
index f85bd01..34a5989 100644
--- a/packages/frontend/src/Index.tsx
+++ b/packages/frontend/src/Index.tsx
@@ -1,25 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
+import { IssuesTable } from "@/components/issues-table";
 import type { IssueRecord, ProjectRecord } from "@issue/shared";
-import {
-    Table,
-    TableBody,
-    TableCaption,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "@/components/ui/table";
-
-function IssueRow({ issue }: { issue: IssueRecord }) {
-    return (
-        <TableRow key={issue.id}>
-            <TableCell className="font-medium">{issue.id}</TableCell>
-            <TableCell>{issue.title}</TableCell>
-            <TableCell>{issue.description}</TableCell>
-        </TableRow>
-    );
-}
 
 function Index() {
     const [projects, setProjects] = useState<ProjectRecord[]>([]);
@@ -63,22 +45,7 @@ function Index() {
     return (
         <main className="w-full h-[100vh] flex flex-col items-start justify-start">
             <div id={"issues-table"} className="w-[80%] border">
-                <Table>
-                    <TableCaption>All Issues</TableCaption>
-                    <TableHeader>
-                        <TableRow>
-                            <TableHead className="w-[100px]">a</TableHead>
-                            <TableHead>a</TableHead>
-                            <TableHead>a</TableHead>
-                            <TableHead className="text-right">a</TableHead>
-                        </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                        {issues.map((issue) => (
-                            <IssueRow key={issue.id} issue={issue} />
-                        ))}
-                    </TableBody>
-                </Table>
+                <IssuesTable issues={issues} />
             </div>
         </main>
     );
diff --git a/packages/frontend/src/components/issues-table.tsx b/packages/frontend/src/components/issues-table.tsx
new file mode 100644
index 0000000..f3dce14
--- /dev/null
+++ b/packages/frontend/src/components/issues-table.tsx
@@ -0,0 +1,28 @@
+import type { IssueRecord } from "@issue/shared";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+
+export function IssuesTable({ issues }: { issues: IssueRecord[] }) {
+    return (
+        <Table>
+            <TableHeader>
+                <TableRow>
+                    <TableHead>ID</TableHead>
+                    <TableHead>Title</TableHead>
+                    <TableHead>Description</TableHead>
+                    {/* below is kept blank to fill the space, used as the "Assignee" column */}
+                    <TableHead></TableHead>
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                {issues.map((issue) => (
+                    <TableRow key={issue.id}>
+                        <TableCell className="font-medium">{issue.id}</TableCell>
+                        <TableCell>{issue.title}</TableCell>
+                        <TableCell>{issue.description}</TableCell>
+                        <TableCell>?</TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    );
+}