feat: create modal

src/routes/(console)/project-[project]/sites/createSiteModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { LabelCard, Modal } from '$lib/components';
+    import { Card, LabelCard, Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Image, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import RepoDark from './(images)/repositoryDark.svg';
@@ -9,6 +9,7 @@
     import TemplateDark from './(images)/templateDark.svg';
     import TemplateLight from './(images)/templateLight.svg';
     import { app } from '$lib/stores/app';
+    import { Link } from '$lib/elements';
 
     export let show = false;
     let behaviour: 'repositories' | 'templates';
@@ -18,48 +19,46 @@
     }
 </script>
 
-<Modal title="Create site" bind:show>
+<Modal title="Create site" bind:show hideFooter>
     <Layout.Stack direction="row" gap="m" wrap="wrap">
         <div style="flex-grow: 1; min-width: 245px">
-            <Layout.Stack direction="column" justifyContent="center">
-                <LabelCard
-                    variant="secondary"
-                    padding="xs"
-                    radius="s"
-                    imageRadius="xxs"
-                    src={$app?.themeInUse === 'dark' ? RepoDark : RepoLight}
-                    title="Connect a repository"
-                    name="connect"
-                    bind:group={behaviour}
-                    value="repositories">
-                    Connect to one of your existing Git repositories
-                </LabelCard>
-            </Layout.Stack>
+            <Card
+                variant="secondary"
+                padding="xs"
+                radius="s"
+                href={`${base}/project-${$page.params.project}/sites/create-site/repositories`}>
+                <Image
+                    alt="repositories"
+                    radius="xxs"
+                    src={$app?.themeInUse === 'dark' ? TemplateDark : TemplateLight} />
+                <Layout.Stack gap="s">
+                    <Typography.Text variant="m-600">Clone a template</Typography.Text>
+                    Clone a pre-built template to quickly set up your site
+                </Layout.Stack>
+            </Card>
         </div>
         <div style="flex-grow: 1; min-width: 245px">
-            <Layout.Stack direction="column" justifyContent="center">
-                <LabelCard
-                    variant="secondary"
-                    padding="xs"
-                    radius="s"
-                    imageRadius="xxs"
-                    src={$app?.themeInUse === 'dark' ? TemplateDark : TemplateLight}
-                    title="Clone a template"
-                    name="clone"
-                    bind:group={behaviour}
-                    value="templates">
-                    Clone a pre-built template to quickly set up your site
-                </LabelCard>
-            </Layout.Stack>
+            <Card
+                variant="secondary"
+                padding="xs"
+                radius="s"
+                href={`${base}/project-${$page.params.project}/sites/create-site/templates`}>
+                <Image
+                    alt="repositories"
+                    radius="xxs"
+                    src={$app?.themeInUse === 'dark' ? RepoDark : RepoLight} />
+
+                <Layout.Stack gap="s">
+                    <Typography.Text variant="m-600">Connect a repository</Typography.Text>
+                    Connect to one of your existing Git repositories
+                </Layout.Stack>
+            </Card>
         </div>
     </Layout.Stack>
-    <svelte:fragment slot="footer">
-        <Button text size="s" on:click={() => (show = false)}>Cancel</Button>
-        <Button
-            disabled={!behaviour}
-            size="s"
-            href={`${base}/project-${$page.params.project}/sites/create-site/${behaviour}`}>
-            Next
-        </Button>
-    </svelte:fragment>
+    <Typography.Text variant="m-400">
+        Or simply drag and drop your files to create a site <Link
+            href={`${base}/project-${$page.params.project}/sites/create-site/manual`}>
+            manually</Link
+        >.
+    </Typography.Text>
 </Modal>