some hover cards

frontend/app/form-tutor/ui/table/columns.tsx

@@ -1,70 +1,70 @@
-"use client"
+"use client";
 
 import { ColumnDef } from "@tanstack/react-table";
 import { Checkbox } from "@/components/ui/checkbox";
 import { TutorFormEventsQuery } from "@/lib/gql/generated/graphql";
 import { eventBroker } from "@/lib/eventBroker";
-import { EventLabelBadge } from "@/components/ui/badge";
-import { calculateFontColor } from "@/lib/utils/colorUtils";
+import { Badge } from "@/components/ui/badge";
 
-export const columns: ColumnDef<TutorFormEventsQuery['events'][0]>[] = [
+export const columns: ColumnDef<TutorFormEventsQuery["events"][0]>[] = [
   {
     accessorKey: "isSelected",
     header: "",
     cell: ({ row }) => (
-        <Checkbox
-          className={"mx-auto"}
-          checked={row.getIsSelected()}
-          onCheckedChange={(value) => {
-            row.toggleSelected(!!value)
+      <Checkbox
+        className={"mx-auto"}
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => {
+          row.toggleSelected(!!value);
 
-            if(row.getIsSelected()){
-              eventBroker.removeEvent(row.original.ID)
-            } else {
-              eventBroker.addEvent(row.original.ID)
-            }
-
-          }}
-          aria-label="Ich kann diese Vorlesung halten"
-        />
+          if (row.getIsSelected()) {
+            eventBroker.removeEvent(row.original.ID);
+          } else {
+            eventBroker.addEvent(row.original.ID);
+          }
+        }}
+        aria-label="Ich kann diese Vorlesung halten"
+      />
     ),
   },
   {
     accessorKey: "title",
     header: () => <div className="text-left">Veranstaltung</div>,
     cell: ({ row }) => (
       <div>
-        <div className={'mb-0.5'}>{row.original.title}</div>
-        <EventLabelBadge
-          className={`bg-[${row.original.type.color}] text-[${calculateFontColor(row.original.type.color)}]`}
-        >
-          {row.original.type.name}
-        </EventLabelBadge>
+        <div className={"mb-0.5"}>{row.original.title}</div>
+        <Badge color={row.original.type.color}>{row.original.type.name}</Badge>
       </div>
     ),
   },
   {
     accessorKey: "from",
     header: () => <div className="text-left">Datum</div>,
     cell: ({ row }) => {
-      const date = new Date(row.getValue('from'));
+      const date = new Date(row.getValue("from"));
       return date.toLocaleDateString();
-    }
+    },
   },
   {
     accessorKey: "from",
     header: () => <div className="text-left">Von</div>,
     cell: ({ row }) => {
-      const time = new Date(row.getValue('from'));
-      return time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    }
+      const time = new Date(row.getValue("from"));
+      return time.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+    },
   },
   {
     accessorKey: "to",
     header: () => <div className="text-left">Bis</div>,
     cell: ({ row }) => {
-      const time = new Date(row.getValue('to'));
-      return time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    }
+      const time = new Date(row.getValue("to"));
+      return time.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+    },
   },
 ];