WIP

src/routes/(console)/onboarding/create-project/+page.svelte

@@ -1,9 +1,20 @@
 <script lang="ts">
     import { Card, Layout, Typography, Input } from '@appwrite.io/pink-svelte';
     import { CustomId } from '$lib/components/index.js';
-
+    import type { RegionList } from '$lib/sdk/billing';
+    import { onMount } from 'svelte';
+    import { isCloud } from '$lib/system';
+    import { sdk } from '$lib/stores/sdk';
+    import { Flag } from '$lib/elements';
     let showCustomId = true;
     let id: string;
+
+    let regions: RegionList;
+    onMount(async () => {
+        if (isCloud) {
+            regions = await sdk.forConsole.billing.listRegions();
+        }
+    });
 </script>
 
 <div class="page-container u-flex-vertical u-cross-child-center u-main-center u-cross-center">
@@ -23,18 +34,35 @@
         ><Layout.Stack direction="column" gap="xxl">
             <Typography.Title size="l">Create your project</Typography.Title>
             <form>
-                <div>
-                    <Input.Text label="Name" placeholder="Project name" />
-                    <CustomId bind:show={showCustomId} name="Project" isProject bind:id />
-                </div>
+                <Layout.Stack direction="column" gap="xl">
+                    <div>
+                        <Input.Text label="Name" placeholder="Project name" />
+                        <CustomId bind:show={showCustomId} name="Project" isProject bind:id />
+                    </div>
+                    <Input.Select
+                        options={[{ label: '🇩️Region 1', value: 'region1' }]}
+                        label="Region" />
+                    {#if regions}
+                        ja regions! {regions.total}
+                    {:else}
+                        geen regions
+                    {/if}
+                </Layout.Stack>
             </form>
         </Layout.Stack></Card.Base>
 </div>
 
-<style>
+<style lang="scss">
+    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+
     .page-container {
-        width: 700px;
+        width: calc(100% - 2rem);
+        margin: 0 1rem;
         min-height: 100vh;
         gap: 4.5rem;
+
+        @media #{$break2open} {
+            width: 700px;
+        }
     }
 </style>