From 8e996b1fe1fee4a2c541c2900a78fc4ef47a7555 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 28 Oct 2024 15:05:10 +0100
Subject: [PATCH] feat: templates screen

---
 src/lib/components/tabs.svelte                |  2 +-
 .../sites/create-site/templates/+page.svelte  | 29 +++++------
 .../sites/create-site/templates/+page.ts      | 52 ++++++++++++++++++-
 3 files changed, 66 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/tabs.svelte b/src/lib/components/tabs.svelte
index 3ece386eb..bbf83f466 100644
--- a/src/lib/components/tabs.svelte
+++ b/src/lib/components/tabs.svelte
@@ -33,7 +33,7 @@
 
 <svelte:window on:resize={throttle(onScroll, 25)} />
 
-<div style="margin-block-start: auto; margin-block-end: 1rem;">
+<div style="margin-block-start: auto; ">
     {#if showLeft}
         <button
             class="tabs-button-scroll is-start"
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte
index 4987f16d2..aae44f0f6 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte
@@ -160,21 +160,20 @@
         <ul
             class="grid-box"
             style="--grid-item-size:18rem; --grid-item-size-small-screens:19rem; --grid-gap: 12px">
-            {#each new Array(3) as _}
-                {#each data.templates as template}
-                    {@const templateFrameworks = template.frameworks.map((t) => t.name)}
-                    <Card.Link
-                        variant="secondary"
-                        href={`${base}/project-${$page.params.project}/sites/create-site/templates/template-${template.id}`}
-                        padding="xs">
-                        <Card.Media
-                            title={template.name}
-                            description={templateFrameworks.join(', ')}
-                            src="https://f002.backblazeb2.com/file/meldiron-public/Desktop+-+2.png"
-                            alt={template.name}>
-                        </Card.Media>
-                    </Card.Link>
-                {/each}
+            {#each data.templates as template}
+                {@const templateFrameworks = template.frameworks.map((t) => t.name)}
+                <Card.Link
+                    variant="secondary"
+                    href={`${base}/project-${$page.params.project}/sites/create-site/templates/template-${template.key}`}
+                    padding="xs">
+                    <Card.Media
+                        title={template.name}
+                        description={templateFrameworks.join(', ')}
+                        src={template.preview ??
+                            'https://f002.backblazeb2.com/file/meldiron-public/Desktop+-+2.png'}
+                        alt={template.name}>
+                    </Card.Media>
+                </Card.Link>
             {/each}
         </ul>
     {:else}
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts
index 4021b8679..4ad972432 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts
@@ -49,7 +49,57 @@ export const load = async ({ url, route }) => {
         }
     });
 
-    console.log(frameworks, useCases, templates);
+    templates.push(
+        {
+            name: 'Dashboard',
+            preview:
+                'https://upload.wikimedia.org/wikipedia/commons/4/40/Ceph_Dashboard_landing_page.webp',
+            frameworks: [
+                {
+                    key: 'sveltekit',
+                    name: 'SvelteKit',
+                    installCommand: 'npm install --force',
+                    buildCommand: 'npm run build',
+                    outputDirectory: './build',
+                    serveRuntime: 'static-1',
+                    buildRuntime: 'node-22',
+                    providerRootDirectory: './'
+                },
+                {
+                    key: 'nextjs',
+                    name: 'Next.js',
+                    installCommand: 'npm install --force',
+                    buildCommand: 'npm run build',
+                    outputDirectory: './build',
+                    serveRuntime: 'static-1',
+                    buildRuntime: 'node-22',
+                    providerRootDirectory: './'
+                }
+            ],
+            useCases: ['chatbot'],
+            $id: 'sadsadarwwa'
+        },
+        {
+            name: 'Personal Blog',
+            preview:
+                'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/05724439-bbdf-4da1-b9dc-a2ec88879412/d4i24mv-71bd02d0-9d6c-4957-9a70-0dc90eba8122.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzA1NzI0NDM5LWJiZGYtNGRhMS1iOWRjLWEyZWM4ODg3OTQxMlwvZDRpMjRtdi03MWJkMDJkMC05ZDZjLTQ5NTctOWE3MC0wZGM5MGViYTgxMjIuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.FVKeww4kI23jYfCq8m6wt8kOEy0FK_HZKVDYSZJQ57o',
+            frameworks: [
+                {
+                    key: 'sveltekit',
+                    name: 'SvelteKit',
+                    installCommand: 'npm install --force',
+                    buildCommand: 'npm run build',
+                    outputDirectory: './build',
+                    serveRuntime: 'static-1',
+                    buildRuntime: 'node-22',
+                    providerRootDirectory: './'
+                }
+            ],
+            useCases: ['chatbot'],
+            $id: 'sadsadarwwa'
+        }
+    );
+    console.dir(...templates);
 
     return {
         offset,