From 45802296b579672ccd4419bae3503b0fc2e1bb86 Mon Sep 17 00:00:00 2001
From: Claas <claas@claas.dev>
Date: Tue, 9 Jun 2026 13:24:58 +0000
Subject: [PATCH] Load organizations

---
 client/src/routes/_app/organizations.tsx | 28 +++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/client/src/routes/_app/organizations.tsx b/client/src/routes/_app/organizations.tsx
index 6e4de55..8d47453 100644
--- a/client/src/routes/_app/organizations.tsx
+++ b/client/src/routes/_app/organizations.tsx
@@ -1,5 +1,5 @@
-import { createFileRoute, redirect } from "@tanstack/solid-router";
-import { createResource } from "solid-js";
+import { createFileRoute } from "@tanstack/solid-router";
+import { createResource, For, type VoidProps } from "solid-js";
 
 import { Title } from "../../Title";
 import { useUserContext } from "../../userContext";
@@ -14,6 +14,21 @@ type Organization = {
   name: string;
 };
 
+function Card(properties: VoidProps<{ organization: Organization }>) {
+  return (
+    <li class="contents">
+      {/* TODO accessbility, the whole content should not be wrapped in a link as that messes withs screen readers */}
+      <a
+        href={`/organizations/${properties.organization.id}`}
+        class="bg-surface-container rounded-large block p-4"
+      >
+        <span class="sr-only">Open</span>
+        {properties.organization.name}
+      </a>
+    </li>
+  );
+}
+
 function Organizations() {
   const userContext = useUserContext();
 
@@ -32,7 +47,14 @@ function Organizations() {
   return (
     <>
       <Title>Organizations</Title>
-      <main class="bg-slate-50"></main>
+      {/* TODO overflow, pagination, scrolling */}
+      <main class="text-title-lg px-6">
+        <ul>
+          <For each={organizations()} fallback={<p>Loading organizations...</p>}>
+            {(organization) => <Card organization={organization} />}
+          </For>
+        </ul>
+      </main>
     </>
   );
 }
-- 
2.51.2