Design non-interactive Participants table

- Include non-interactive version of Participants table showing check-in
  information including UID, name, role, status, and action
- Still need to add filtering, sorting, pagination, and preferences

apps/site/src/app/admin/participants/Participants.tsx

@@ -1,5 +1,91 @@
+"use client";
+
+import Box from "@cloudscape-design/components/box";
+import Header from "@cloudscape-design/components/header";
+import SpaceBetween from "@cloudscape-design/components/space-between";
+import Table from "@cloudscape-design/components/table";
+import TextFilter from "@cloudscape-design/components/text-filter";
+
+import ApplicantStatus from "@/app/admin/applicants/components/ApplicantStatus";
+import useParticipants from "@/lib/admin/useParticipants";
+
+import ParticipantAction from "./components/ParticipantAction";
+import RoleBadge from "./components/RoleBadge";
+
 function Participants() {
-	return <></>;
+	const { participants, loading } = useParticipants();
+
+	// TODO: sorting
+	// TODO: search functionality
+	// TODO: role and status filters
+
+	const emptyMessage = (
+		<Box margin={{ vertical: "xs" }} textAlign="center" color="inherit">
+			<SpaceBetween size="m">
+				<b>No participants</b>
+			</SpaceBetween>
+		</Box>
+	);
+
+	return (
+		<Table
+			// TODO: aria labels
+			columnDefinitions={[
+				{
+					id: "uid",
+					header: "UID",
+					cell: (item) => item._id,
+					sortingField: "uid",
+					isRowHeader: true,
+				},
+				{
+					id: "firstName",
+					header: "First name",
+					cell: (item) => item.first_name,
+					sortingField: "firstName",
+				},
+				{
+					id: "lastName",
+					header: "Last name",
+					cell: (item) => item.last_name,
+					sortingField: "lastName",
+				},
+				{
+					id: "role",
+					header: "Role",
+					cell: RoleBadge,
+					sortingField: "role",
+				},
+				{
+					id: "status",
+					header: "Status",
+					cell: ApplicantStatus,
+					sortingField: "status",
+				},
+				{
+					id: "action",
+					header: "Action",
+					cell: ParticipantAction,
+				},
+			]}
+			header={
+				<Header counter={`(${participants.length})`}>Participants</Header>
+			}
+			items={participants}
+			loading={loading}
+			loadingText="Loading participants"
+			resizableColumns
+			variant="full-page"
+			stickyColumns={{ first: 1, last: 0 }}
+			trackBy="uid"
+			empty={emptyMessage}
+			filter={
+				<TextFilter filteringPlaceholder="Find participants" filteringText="" />
+			}
+			// TODO: pagination
+			// TODO: collection preferences
+		/>
+	);
 }
 
 export default Participants;

apps/site/src/app/admin/participants/components/ParticipantAction.tsx

@@ -0,0 +1,14 @@
+import Button from "@cloudscape-design/components/button";
+
+import { Participant } from "@/lib/admin/useParticipants";
+
+function ParticipantAction({ _id }: Participant) {
+	// TODO: waitlist promotion
+	return (
+		<Button variant="inline-link" ariaLabel={`Check in ${_id}`}>
+			Check In
+		</Button>
+	);
+}
+
+export default ParticipantAction;

apps/site/src/app/admin/participants/components/RoleBadge.tsx

@@ -0,0 +1,10 @@
+import Badge from "@cloudscape-design/components/badge";
+
+import { Participant } from "@/lib/admin/useParticipants";
+
+function RoleBadge({ role }: Participant) {
+	// TODO: custom colors
+	return <Badge>{role}</Badge>;
+}
+
+export default RoleBadge;