From e9c16f524f70fd656bab601f76c97f8e72eef0e2 Mon Sep 17 00:00:00 2001
From: Clumsy-Coder <19594044+Clumsy-Coder@users.noreply.github.com>
Date: Sun, 31 Dec 2023 21:58:45 -0700
Subject: [PATCH] feat(components): add a Link to the problem page in
 `DataTable` for `/problems`

  ## what
  - add a Link to the problem page in `DataTable` for `/problems`

  ## how

  ## why
  - need to be able to go the problem page for a specific problem number

  ## where
  - ./src/app/problems/components/data-table/columns.tsx

  ## usage
---
 .../components/data-table/columns.tsx         | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/app/problems/components/data-table/columns.tsx b/src/app/problems/components/data-table/columns.tsx
index 9ad4912..6e73792 100644
--- a/src/app/problems/components/data-table/columns.tsx
+++ b/src/app/problems/components/data-table/columns.tsx
@@ -2,6 +2,7 @@
 
 import { ColumnDef } from "@tanstack/react-table"
 import { ArrowUpDown, MoreHorizontal } from "lucide-react"
+import Link from "next/link";
 
 import { Button } from "@/components/ui/button"
 
@@ -24,6 +25,18 @@ export const columns: ColumnDef<Payment>[] = [
           Problem number
           <ArrowUpDown className="ml-2 h-4 w-4" />
         </Button>
+      );
+    },
+    cell: ({ row }) => {
+      return (
+        <div className="hover:underline">
+          <Link
+            href={`/problems/${row.getValue("num")}`}
+            className="p-3"
+          >
+            {row.getValue("num")}
+          </Link>
+        </div>
       )
     },
   },
@@ -38,6 +51,18 @@ export const columns: ColumnDef<Payment>[] = [
           Problem Title
           <ArrowUpDown className="ml-2 h-4 w-4" />
         </Button>
+      );
+    },
+    cell: ({ row }) => {
+      return (
+        <div className="hover:underline">
+          <Link
+            href={`/problems/${row.getValue("num")}`}
+            className="p-3"
+          >
+            {row.getValue("title")}
+          </Link>
+        </div>
       )
     },
   },