add genre badges

src/app/story/columns.tsx

@@ -1,14 +1,15 @@
 "use client"
-import { ColumnDef } from "@tanstack/react-table"
-import { Genre, Story } from "@prisma/client"
+import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
+import { StoryWithGenres } from "./page"
 import { ArrowUpDown, MoreHorizontal } from "lucide-react"
 import { Button } from "@/components/ui/button"
-export const columns: ColumnDef<Story & { genres: Array<Genre> }>[] = [
-  // {
-  //   accessorKey: "id",
-  //   header: "Id",
-  //   enableHiding: true,
-  // },
+import { Badge } from "@/components/ui/badge"
+
+
+
+const columnHelper = createColumnHelper<StoryWithGenres>()
+
+export const columns: ColumnDef<StoryWithGenres>[] = [
   {
     accessorKey: "title",
     header: ({ column }) => {
@@ -39,18 +40,25 @@ export const columns: ColumnDef<Story & { genres: Array<Genre> }>[] = [
     },
     enableColumnFilter: false
   },
-  {
-    accessorFn: row => {
-      let unpacked = ""
-      for (let i = 0; i < row.genres.length; i++) {
-        unpacked = unpacked + " " + row.genres[i].name
-      }
-      return unpacked
-    },
-    header: "Genres"
-
-
-  },
+  // {
+  //   accessorFn: row => {
+  //     let unpacked = ""
+  //     for (let i = 0; i < row.genres.length; i++) {
+  //       unpacked = unpacked + " " + row.genres[i].name
+  //     }
+  //     return unpacked
+  //   },
+  //   header: "Genres"
+  //
+  //
+  // },
+  columnHelper.accessor("genres", {
+    cell: props => {
+      const genres = props.getValue()
+        .map(e => <Badge>{e.name}</Badge>)
+      return genres
+    }
+  })
   // {
   //   accessorKey: "deleted",
   //   header: "Deleted"

src/app/ui/forms/genresTrigger.tsx

@@ -3,6 +3,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@radix-ui/react-popover
 import { Checkbox } from "@radix-ui/react-checkbox"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
 export default function GenresTrigger({ value, genres }) {
 	return (
 		<>
@@ -15,8 +16,7 @@ export default function GenresTrigger({ value, genres }) {
 					)}
 				>
 					{value.length !== 0 ? (
-						value.map((e, i) => genres.find(f => e === f.id).name +
-							(i < value.length - 1 ? ', ' : ''))
+						value.map((e, i) => (<Badge>{genres.find(f => e === f.id).name}</Badge>))
 					) : (
 						<FormLabel>Genres</FormLabel>
 					)}