From 4fde400c87ae9ce5c5fc8ca8fbdb6bae99f096ca Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 1 Apr 2025 15:40:54 +0200
Subject: [PATCH] Org page setup

---
 .../(studio)/org-[organization]/+page.svelte  | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/routes/(studio)/org-[organization]/+page.svelte b/src/routes/(studio)/org-[organization]/+page.svelte
index f55e2f435..b97b46e7c 100644
--- a/src/routes/(studio)/org-[organization]/+page.svelte
+++ b/src/routes/(studio)/org-[organization]/+page.svelte
@@ -1,5 +1,30 @@
 <script lang="ts">
-    import { Card } from '@appwrite.io/pink-svelte';
+    import { Card, Typography, Layout, Divider, Button } from '@appwrite.io/pink-svelte';
+    import { base } from '$app/paths';
+
+    export let data;
 </script>
 
-<Card.Base>dus</Card.Base>
+<Card.Base>
+    <Layout.Stack>
+        <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Typography.Text variant="m-500" color="--fgcolor-neutral-secondary"
+                >Projects</Typography.Text>
+            <Button.Button size="s">Create project</Button.Button>
+        </Layout.Stack>
+
+        <Divider />
+
+        <Layout.Grid gap="l" columnsS={3} columns={4} columnsL={4} columnsXL={5}>
+            {#each data.projects as project}
+                <a href={`${base}/proj-${project.$id}`}
+                    ><Card.Media
+                        src="https://picsum.photos/260/150"
+                        alt=""
+                        description={project.description}
+                        title={project.name}></Card.Media
+                    ></a>
+            {/each}
+        </Layout.Grid>
+    </Layout.Stack>
+</Card.Base>