refactor utils directory, add labels (#72)

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

@@ -4,13 +4,14 @@ 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";
 
 export const columns: ColumnDef<TutorFormEventsQuery['events'][0]>[] = [
   {
     accessorKey: "isSelected",
     header: "",
     cell: ({ row }) => (
-      <div className="w-full flex flex-row justify-center">
         <Checkbox
           className={"mx-auto"}
           checked={row.getIsSelected()}
@@ -26,12 +27,21 @@ export const columns: ColumnDef<TutorFormEventsQuery['events'][0]>[] = [
           }}
           aria-label="Ich kann diese Vorlesung halten"
         />
-      </div>
     ),
   },
   {
     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>
+    ),
   },
   {
     accessorKey: "from",

frontend/components/ui/badge.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils/tailwindUtils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground",
+        outline: "text-foreground",
+        event: "border-transparent bg-secondary text-secondary-foreground disabled"
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+function EventLabelBadge({ className, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant: 'event' }), className)} {...props} />
+  )
+}
+
+export { EventLabelBadge, Badge, badgeVariants }

frontend/components/ui/button.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/tailwindUtils"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",

frontend/components/ui/checkbox.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { Check } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/tailwindUtils"
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,

frontend/components/ui/input.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/tailwindUtils"
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}

frontend/components/ui/table.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/tailwindUtils"
 
 const Table = React.forwardRef<
   HTMLTableElement,

frontend/lib/gql/generated/gql.ts

@@ -14,7 +14,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  */
 const documents = {
     "mutation addTutor($firstName: String!, $lastName: String!, $email: String!, $eventsAvailable: [Int!]) {\n  addTutor(\n    tutor: {fn: $firstName, sn: $lastName, mail: $email, eventsAvailable: $eventsAvailable}\n  )\n}": types.AddTutorDocument,
-    "query tutorFormEvents {\n  events(needsTutors: true) {\n    ID\n    title\n    from\n    to\n  }\n}": types.TutorFormEventsDocument,
+    "query tutorFormEvents {\n  events(needsTutors: true) {\n    ID\n    title\n    from\n    to\n    topic {\n      name\n      color\n    }\n    type {\n      name\n      color\n    }\n  }\n}": types.TutorFormEventsDocument,
     "query tutors {\n  tutors {\n    fn\n    sn\n    mail\n    confirmed\n  }\n}": types.TutorsDocument,
 };
 
@@ -39,7 +39,7 @@ export function graphql(source: "mutation addTutor($firstName: String!, $lastNam
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "query tutorFormEvents {\n  events(needsTutors: true) {\n    ID\n    title\n    from\n    to\n  }\n}"): (typeof documents)["query tutorFormEvents {\n  events(needsTutors: true) {\n    ID\n    title\n    from\n    to\n  }\n}"];
+export function graphql(source: "query tutorFormEvents {\n  events(needsTutors: true) {\n    ID\n    title\n    from\n    to\n    topic {\n      name\n      color\n    }\n    type {\n      name\n      color\n    }\n  }\n}"): (typeof documents)["query tutorFormEvents {\n  events(needsTutors: true) {\n    ID\n    title\n    from\n    to\n    topic {\n      name\n      color\n    }\n    type {\n      name\n      color\n    }\n  }\n}"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */