feat: add entry links to Tag template

src/components/DataTable.tsx

@@ -3,7 +3,6 @@ import {
    getCoreRowModel,
    useReactTable,
    getPaginationRowModel,
-	SortingState,
    getSortedRowModel,
 } from "@tanstack/react-table"
 

src/templates/Tag.tsx

@@ -1,7 +1,47 @@
 import { useParams } from "react-router"
 import Page from "./Page"
+import { useQuery } from "@tanstack/react-query"
+import api from "@/api/eolas-api"
+import { DataTable } from "@/components/DataTable"
+import { ArrowUpDown } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Link } from "react-router"
+
+const columns = [
+   {
+      accessorKey: "entry_title",
+      header: ({ column }) => {
+         return (
+            <Button
+               variant="ghost"
+               className="rounded-none"
+               onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+            >
+               Title
+               <ArrowUpDown className="ml-2 h-4 w-4" />
+            </Button>
+         )
+      },
+      cell: ({ cell, row }) => {
+         return (
+            <Link to={`/entries/${row.original.entry_title}`}>
+               <span className="text-foreground underline-offset-3 underline hover:text-gray-700 dark:hover:text-green-300">
+                  {row.original.entry_title.replace(/_/g, " ")}
+               </span>
+            </Link>
+         )
+      },
+   },
+]
+
 export default function Tag() {
    const { tag } = useParams()
+
+   const { data, isLoading } = useQuery({
+      queryKey: [`entries_for_tag_${tag}`],
+      queryFn: () => api.get(`/entries/tag/${tag}`).then((res) => res.data),
+   })
+
    return (
       <Page
          titleComponent={
@@ -10,6 +50,7 @@ export default function Tag() {
                <span>{tag}</span>
             </>
          }
+         pageBody={<DataTable columns={columns} data={data?.data || []} loading={isLoading} />}
       />
    )
 }