add inspect button

src/app/story/columns.tsx

@@ -4,8 +4,9 @@ import { StoryWithGenres } from "./page"
 import { ArrowUpDown, MoreHorizontal } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
-import { Trash2 } from "lucide-react"
+import { Trash2, Search } from "lucide-react"
 import { deleteStory } from "app/lib/del"
+import Link from "next/link"
 
 
 const columnHelper = createColumnHelper<StoryWithGenres>()
@@ -51,11 +52,14 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
   }),
   {
     id: "actions",
-    header: "Actions",
+    // header: "Actions",
     cell: ({ row }) => {
-      return <Button variant="ghost"
-        onClick={() => { deleteStory(row.original.id) }}>
-        <Trash2 color="red" /></Button>
+      return <div className="flex items-center justify-around">
+        <Link href={`/story/${row.original.id}`}><Search /></Link>
+        <Button variant="ghost"
+          onClick={() => { deleteStory(row.original.id) }}>
+          <Trash2 color="red" /></Button>
+      </div>
     }
   }
 

src/app/tailwind.css

@@ -883,6 +883,10 @@ body {
   flex-direction: column-reverse;
 }
 
+.content-center {
+  align-content: center;
+}
+
 .items-start {
   align-items: flex-start;
 }
@@ -903,6 +907,10 @@ body {
   justify-content: space-between;
 }
 
+.justify-around {
+  justify-content: space-around;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }