ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-07 18:23:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

IssuesTable component

Browse Source
This commit is contained in:
Oliver Bryan
2025-12-14 18:03:54 +00:00
parent dc6c398987
commit c419d3344e
2 changed files with 30 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
packages/frontend/src/Index.tsx
View File

@@ -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>
);

28
packages/frontend/src/components/issues-table.tsx Normal file
View File

@@ -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>
);
}