use Link instead of onClick in data-table 'create button'

src/app/tailwind.css

@@ -873,6 +873,11 @@ body {
   height: var(--radix-select-trigger-height);
 }
 
+.h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
 .h-px {
   height: 1px;
 }
@@ -881,11 +886,6 @@ body {
   height: 100vh;
 }
 
-.h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
-
 .max-h-96 {
   max-height: 24rem;
 }
@@ -894,18 +894,6 @@ body {
   max-height: 100vh;
 }
 
-.min-h-40 {
-  min-height: 10rem;
-}
-
-.min-h-6 {
-  min-height: 1.5rem;
-}
-
-.min-h-8 {
-  min-height: 2rem;
-}
-
 .min-h-10 {
   min-height: 2.5rem;
 }
@@ -918,8 +906,8 @@ body {
   width: 0.5rem;
 }
 
-.w-2\/3 {
+.w-2\/5 {
-  width: 66.666667%;
+  width: 40%;
 }
 
 .w-24 {
@@ -983,14 +971,6 @@ body {
   width: 100vw;
 }
 
-.w-1\/3 {
-  width: 33.333333%;
-}
-
-.w-2\/5 {
-  width: 40%;
-}
-
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -1004,22 +984,18 @@ body {
   min-width: fit-content;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
 
-.max-w-screen-sm {
-  max-width: 640px;
-}
-
 .max-w-sm {
   max-width: 24rem;
 }
 
-.max-w-full {
-  max-width: 100%;
-}
-
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -1140,10 +1116,6 @@ body {
   gap: 0.25rem;
 }
 
-.gap-16 {
-  gap: 4rem;
-}
-
 .gap-2 {
   gap: 0.5rem;
 }
@@ -1152,25 +1124,17 @@ body {
   gap: 1rem;
 }
 
-.gap-y-8 {
+.gap-x-16 {
-  row-gap: 2rem;
+  -moz-column-gap: 4rem;
-}
+       column-gap: 4rem;
-
-.gap-y-2 {
-  row-gap: 0.5rem;
 }
 
 .gap-y-1 {
   row-gap: 0.25rem;
 }
 
-.gap-x-16 {
+.gap-y-8 {
-  -moz-column-gap: 4rem;
+  row-gap: 2rem;
-       column-gap: 4rem;
-}
-
-.gap-y-6 {
-  row-gap: 1.5rem;
 }
 
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
@@ -1227,12 +1191,6 @@ body {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
-.space-y-6 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
-}
-
 .space-y-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1556,22 +1514,6 @@ body {
   line-height: 1;
 }
 
-.leading-10 {
-  line-height: 2.5rem;
-}
-
-.leading-8 {
-  line-height: 2rem;
-}
-
-.leading-6 {
-  line-height: 1.5rem;
-}
-
-.leading-5 {
-  line-height: 1.25rem;
-}
-
 .tracking-tight {
   letter-spacing: -0.025em;
 }

src/app/ui/tables/data-table.tsx

@@ -34,6 +34,7 @@ import {
 import { EyeIcon } from "lucide-react"
 import { usePathname } from "next/navigation"
 import { useRouter } from "next/navigation"
+import Link from "next/link"
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
@@ -107,7 +108,9 @@ export function DataTable<TData, TValue>({
         />
       </div>
 
-      <Button onClick={() => router.push(pathname + "/create")}>Create new {type}</Button>
+      <Link href={pathname + "/create"}>
+        <Button>Create new {type}</Button>
+      </Link>
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>