mirror of
https://github.com/hex248/sprint.git
synced 2026-02-08 10:33:01 +00:00
IssuesTable component
This commit is contained in:
@@ -1,25 +1,7 @@
|
|||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { IssuesTable } from "@/components/issues-table";
|
||||||
import type { IssueRecord, ProjectRecord } from "@issue/shared";
|
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() {
|
function Index() {
|
||||||
const [projects, setProjects] = useState<ProjectRecord[]>([]);
|
const [projects, setProjects] = useState<ProjectRecord[]>([]);
|
||||||
@@ -63,22 +45,7 @@ function Index() {
|
|||||||
return (
|
return (
|
||||||
<main className="w-full h-[100vh] flex flex-col items-start justify-start">
|
<main className="w-full h-[100vh] flex flex-col items-start justify-start">
|
||||||
<div id={"issues-table"} className="w-[80%] border">
|
<div id={"issues-table"} className="w-[80%] border">
|
||||||
<Table>
|
<IssuesTable issues={issues} />
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
|
|||||||
28
packages/frontend/src/components/issues-table.tsx
Normal file
28
packages/frontend/src/components/issues-table.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user