improved styling of event-card

client/src/app/events/page.tsx

@@ -26,8 +26,6 @@ export default function Events() {
 			if (result.ok) {
 				const data = await result.json();
 
-				console.debug(data);
-
 				return {
 					items: data,
 				};
@@ -72,14 +70,12 @@ export default function Events() {
 			<div className="flex flex-wrap justify-center gap-4">
 				{events.items.filter(showEvent).map((e) => (
 					<Event key={e.eventID} event={e}>
-						<div className="mt-auto">
+						<AssignmentTable
-							<AvailabilitySelector
+							highlightUser={user?.userName}
-								event={e}
+							tasks={e.tasks}
-								className="mb-2"
+							className="mt-auto"
-								startSelection={e.availability}
 						/>
-							<AssignmentTable tasks={e.tasks} />
+						<AvailabilitySelector event={e} startSelection={e.availability} />
-						</div>
 					</Event>
 				))}
 			</div>

client/src/components/Event/AssignmentTable.tsx

@@ -1,5 +1,13 @@
 import { classNames } from "@/lib";
 import { EventData } from "@/Zustand";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableColumn,
+	TableHeader,
+	TableRow,
+} from "@heroui/react";
 
 export default function AssignmentTable({
 	tasks,
@@ -13,10 +21,25 @@ export default function AssignmentTable({
 	className?: string;
 }) {
 	return (
-		<table className={className}>
+		<div className={className}>
-			<tbody>
+			<h4 id="assignmentTableHeader">Tasks</h4>
-				{tasks.map((task) => (
+			<Table
-					<tr
+				aria-labelledby="assignmentTableHeader"
+				hideHeader
+				removeWrapper
+				classNames={{
+					td: "text-base",
+				}}
+				shadow="none"
+				title="Tasks"
+			>
+				<TableHeader>
+					<TableColumn>Task</TableColumn>
+					<TableColumn>Volunteer</TableColumn>
+				</TableHeader>
+				<TableBody items={tasks}>
+					{(task) => (
+						<TableRow
 							key={task.taskID}
 							className={classNames({
 								"text-danger":
@@ -24,15 +47,16 @@ export default function AssignmentTable({
 									task.taskName === highlightTask,
 							})}
 						>
-						<th className="pr-4 text-left">{task.taskName}</th>
+							<TableCell className="font-bold">{task.taskName}</TableCell>
-						<td>
+							<TableCell>
 								{task.userName ?? (
 									<span className="italic text-highlight">missing</span>
 								)}
-						</td>
+							</TableCell>
-					</tr>
+						</TableRow>
-				))}
+					)}
-			</tbody>
+				</TableBody>
-		</table>
+			</Table>
+		</div>
 	);
 }

client/src/components/Event/AvailabilitySelector.tsx

@@ -49,10 +49,12 @@ export default function AvailabilitySelector({
 	return (
 		<Select
 			items={availabilities.items}
-			label="Availability"
+			label={<h4>Availability</h4>}
 			variant="bordered"
 			className={className}
-			isMultiline
+			classNames={{ label: "text-base", trigger: "py-4" }}
+			labelPlacement="outside"
+			placeholder="Set availability"
 			renderValue={(availability) => (
 				<div>
 					{availability.map((a) =>

client/src/components/Event/Event.tsx

@@ -2,7 +2,7 @@
 
 import LocalDate from "../LocalDate";
 import { BaseEvent } from "@/Zustand";
-import { Card, CardBody, CardHeader, Divider, Textarea } from "@heroui/react";
+import { Card, CardBody, CardFooter, CardHeader, Divider } from "@heroui/react";
 import React from "react";
 
 export default function Event({
@@ -10,7 +10,7 @@ export default function Event({
 	children,
 }: {
 	event: BaseEvent;
-	children?: React.ReactNode;
+	children?: React.ReactNode | [React.ReactNode, React.ReactNode];
 }) {
 	return (
 		<Card
@@ -34,15 +34,21 @@ export default function Event({
 			</CardHeader>
 			<Divider />
 			<CardBody>
-				<Textarea
+				{event.description != "" ? (
-					isReadOnly
+					<div>
-					label="Description"
+						<h4>Description</h4>
-					defaultValue={event.description}
+						<div className="ms-2 mt-2">{event.description}</div>
-					variant="bordered"
+					</div>
-				/>
+				) : null}
 
-				{children}
+				{Array.isArray(children) ? children[0] : children}
 			</CardBody>
+			{Array.isArray(children) ? (
+				<>
+					<Divider />
+					<CardFooter>{children[1]}</CardFooter>
+				</>
+			) : null}
 		</Card>
 	);
 }

client/src/lib.ts

@@ -92,15 +92,33 @@ function prepareBody(
 	}
 }
 
-export function classNames(classNames: Record<string, boolean>): string {
+export function classNames(...classNames: (string | undefined)[]): string;
+export function classNames(classNames: string[]): string;
+export function classNames(classNames: Record<string, boolean>): string;
+export function classNames(
+	classNames: string[] | Record<string, boolean> | string | undefined,
+	...rest: (string | undefined)[]
+) {
+	// if rest isn't undefined, use the rest values
+	if (rest !== undefined) {
+		return [classNames, ...rest].join(" ");
+
+		// if classnames is undefined too, return an empty string
+	} else if (classNames === undefined) {
+		return "";
+
+		// if classnames is an array, join it
+	} else if (Array.isArray(classNames)) {
+		return classNames.join(" ");
+
+		// if classnames is an object, join it based on the value
+	} else {
 		return Object.entries(classNames)
-		.map(([classString, value]) => {
+			.filter(([, value]) => value)
-			if (value) {
+			.map(([classString]) => classString)
-				return classString;
-			}
-		})
 			.join(" ");
 	}
+}
 
 export class DateFormatter {
 	private formatter;