From 005c496f264e6215aab488079ec8b89d1f76d09a Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 14 Nov 2024 14:57:04 +0100
Subject: [PATCH] Add create button

---
 .../onboarding/create-project/+page.svelte    | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/routes/(console)/onboarding/create-project/+page.svelte b/src/routes/(console)/onboarding/create-project/+page.svelte
index 064499001..92c175982 100644
--- a/src/routes/(console)/onboarding/create-project/+page.svelte
+++ b/src/routes/(console)/onboarding/create-project/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { Card, Layout, Typography, Input } from '@appwrite.io/pink-svelte';
+    import { Card, Layout, Typography, Input, Tag, Icon, Button } from '@appwrite.io/pink-svelte';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
     import { CustomId } from '$lib/components/index.js';
     import type { RegionList } from '$lib/sdk/billing';
     import { onMount } from 'svelte';
@@ -8,7 +9,7 @@
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { Flag } from '@appwrite.io/console';
 
-    let showCustomId = true;
+    let showCustomId = false;
     let id: string;
 
     let regions: RegionList;
@@ -42,10 +43,19 @@
             <Typography.Title size="l">Create your project</Typography.Title>
             <form>
                 <Layout.Stack direction="column" gap="xl">
-                    <div>
+                    <Layout.Stack direction="column" gap="s">
                         <Input.Text label="Name" placeholder="Project name" />
+                        {#if !showCustomId}
+                            <div>
+                                <Tag
+                                    size="s"
+                                    on:click={() => {
+                                        showCustomId = true;
+                                    }}><Icon icon={IconPencil} /> Project ID</Tag>
+                            </div>
+                        {/if}
                         <CustomId bind:show={showCustomId} name="Project" isProject bind:id />
-                    </div>
+                    </Layout.Stack>
                     {#if regions}
                         <Input.Select
                             placeholder="Select a region"
@@ -67,6 +77,10 @@
                                 })}
                             label="Region" />
                     {/if}
+                    <div class="button-container">
+                        <Button.Button type="button" variant="primary" size="m"
+                            >Create</Button.Button>
+                    </div>
                 </Layout.Stack>
             </form>
         </Layout.Stack></Card.Base>
@@ -85,4 +99,8 @@
             width: 700px;
         }
     }
+    .button-container {
+        display: flex;
+        justify-content: end;
+    }
 </style>