/
index.tsx
64 lines (63 loc) · 1.84 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Loader } from "lucide-react";
import Row from "./row";
import { useGetIssues } from "@/lib/hooks";
import { IssueSchema } from "@/lib/schema";
import { Button } from "@/components/ui/button";
import { useIssueModalStore, useIssueStore } from "@/lib/store";
export default function IssuesTable() {
const { isLoading, data } = useGetIssues();
const { setOpen } = useIssueModalStore();
const { setEditIssueId } = useIssueStore();
return (
<>
<div className="w-full flex justify-end">
<Button
onClick={() => {
setEditIssueId("");
setOpen();
}}
>
Create a new issue
</Button>
</div>
{isLoading && <Loader className="w-4 h-4 animate-spin" />}
{!isLoading && (
<div className="border rounded-xl w-full overflow-hidden">
<Table>
<TableHeader>
<TableRow className="bg-secondary rounded-t-xl">
<TableHead>Author</TableHead>
<TableHead>Title</TableHead>
<TableHead>Description</TableHead>
<TableHead>Status</TableHead>
<TableHead>Label</TableHead>
<TableHead></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{data?.length ? (
data?.map((task: IssueSchema, id: number) => {
return <Row key={id} task={task} />;
})
) : (
<TableRow>
<TableCell className="h-24 text-center">
No results.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
)}
</>
);
}