File size: 2,914 Bytes
6e1a53e |
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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
"use client";
import React, { useEffect, useState } from "react";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import Link from "next/link";
import { PlusIcon } from "@radix-ui/react-icons";
export default function Page() {
const [dataSources, setDataSources] = useState([]);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch("/api/v1/admin/data_sources");
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
setDataSources(data);
} catch (error) {
console.error("Fetching error: ", error);
}
};
fetchData();
}, []);
return (
<div className="mt-20 flex justify-center items-stretch">
<div className="max-w-screen-lg w-full bg-background">
<div className="md:p-4 flex flex-col">
<h2 className="text-2xl font-semibold tracking-tight">
Data sources
</h2>
</div>
<div className="md:p-4 flex flex-col">
<div className="flex justify-between items-center mb-2">
<h3 className="text-xl tracking-tight">List of data sources</h3>
<Link
className="flex flex-row items-center justify-start underline underline-offset-2 text-sm"
href="/admin/data/add"
>
<PlusIcon className="text-green-400 mr-1" />
Add data source
</Link>
</div>
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[100px]">App ID</TableHead>
<TableHead>Data type</TableHead>
<TableHead>Data Value</TableHead>
<TableHead className="text-right">Metadata</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{dataSources.map((dataSource) => (
<TableRow key={dataSource.app_id}>
<TableCell className="font-medium">
{dataSource.app_id}
</TableCell>
<TableCell>{dataSource.data_type}</TableCell>
<TableCell>
{dataSource.data_type === "web_page" ? (
<Link
className="underline underline-offset-2"
href={dataSource.data_value}
>
{dataSource.data_value}
</Link>
) : (
dataSource.data_value
)}
</TableCell>
<TableCell>{dataSource.metadata}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
</div>
);
}
|