Merge pull request #1530 from appwrite/func-templates-tooltips

Func templates tooltips
appwrite · Nov 27, 2024 · 9406399 · 9406399
2 parents a18637e + 214a026
commit 9406399
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 23 deletions.
diff --git a/src/app.css b/src/app.css
@@ -82,10 +82,10 @@
     /* Animations */
     --animate-scale-in: scale-in 200ms ease-out forwards;
     --animate-caret-blink: caret-blink 1s ease-in-out infinite;
-    --animate-text: fade-in 0.75s ease-in-out both, blur 0.75s ease-in-out both,
+    --animate-text: fade 0.75s ease-in-out both, blur 0.75s ease-in-out both,
         up 0.75s ease-in-out both;
     --animate-scroll: scroll 60s linear infinite;
-    --animate-fade-in: fade-in 0.5s ease-in-out both;
+    --animate-fade-in: fade 0.5s ease-in-out both;
     --animate-marquee: marquee var(--speed, 30s) linear infinite var(--direction, forwards);
 
     /* Pink polyfills */

diff --git a/src/routes/products/functions/(components)/Templates.svelte b/src/routes/products/functions/(components)/Templates.svelte
@@ -1,37 +1,49 @@
 <script lang="ts">
+    import Tooltip from '$lib/components/Tooltip.svelte';
+    import { classNames } from '$lib/utils/classnames';
     import Templates from '../(assets)/templates.png';
 
+    const icons = {
+        node: '/images/platforms/nodejs.svg',
+        php: '/images/platforms/php.svg',
+        ruby: '/images/platforms/ruby.svg',
+        python: '/images/platforms/python.svg',
+        dart: '/images/platforms/dart.svg',
+        bun: '/images/platforms/bun.svg',
+        go: '/images/platforms/go.svg'
+    } as const;
+
     const templates = [
         {
             title: 'Prompt ChatGPT',
             description: 'Ask questions and let OpenAI GPT-3.5-turbo answer.',
-            avatar: '/images/platforms/light/nodejs.svg'
+            runtimes: ['node', 'python', 'php'] as const
         },
         {
             title: 'Subscriptions with Stripe',
             description: 'Receive recurring card payments and grant subscribers extra permissions.',
-            avatar: '/images/platforms/light/nodejs.svg'
+            runtimes: ['node'] as const
         },
         {
             title: 'Sync with Algolia',
             description: 'Intuitive search bar for any data in Appwrite Databases.',
-            avatar: '/images/platforms/dark/nodejs.svg'
+            runtimes: ['node', 'python'] as const
         },
         {
             title: 'Query upstash vector',
             description: 'Vector database that stores text embeddings and context.',
-            avatar: '/images/platforms/dark/nodejs.svg'
+            runtimes: ['node'] as const
         },
         {
             title: 'Query MongoDB Atlas',
             description:
                 'Realtime NoSQL document database with geospecial, graph, search, and vector suport.',
-            avatar: '/images/platforms/dark/nodejs.svg'
+            runtimes: ['node'] as const
         },
         {
             title: 'WhatsApp with Vonage',
             description: 'Simple bot to answer WhatsApp messages.',
-            avatar: '/images/platforms/dark/nodejs.svg'
+            runtimes: ['node', 'python', 'php', 'dart', 'bun'] as const
         }
     ];
 </script>
@@ -66,24 +78,42 @@
             >
         </div>
         <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
-            {#each templates as template}
-                <div
-                    class="hidden flex-col gap-2 rounded-2xl border border-black/8 bg-white p-4 md:flex"
-                >
-                    <div class="flex w-full items-center justify-between">
-                        <span class="text-sub-body text-primary font-medium">{template.title}</span>
-                        <img src={template.avatar} class="hidden size-6" alt={template.title} />
-                    </div>
-                    <p class="text-sub-body text-secondary line-clamp-2">{template.description}</p>
-                </div>
-            {/each}
-            {#each templates.slice(0, 3) as template}
+            {#each templates as template, i}
+                {@const baseRuntimes = template.runtimes.slice(0, 2)}
+                {@const hiddenRuntimes = template.runtimes.slice(2)}
                 <div
-                    class="flex flex-col gap-2 rounded-2xl border border-black/8 bg-white p-4 md:hidden"
+                    class={classNames(
+                        'flex-col gap-2 rounded-2xl border border-black/8 bg-white p-4',
+                        {
+                            'hidden md:flex': i > 3
+                        }
+                    )}
                 >
                     <div class="flex w-full items-center justify-between">
                         <span class="text-sub-body text-primary font-medium">{template.title}</span>
-                        <img src={template.avatar} class="hidden size-6" alt={template.title} />
+                        <ul class="flex h-12 gap-1">
+                            {#each baseRuntimes as runtime}
+                                <li
+                                    class="border-smooth -ml-3 flex size-8 items-center justify-center rounded-full border bg-white"
+                                >
+                                    <img src={icons[runtime]} alt={runtime} class="size-5" />
+                                </li>
+                            {/each}
+                            {#if hiddenRuntimes.length > 0}
+                                <Tooltip>
+                                    <li
+                                        class="border-smooth -ml-3 flex size-8 cursor-pointer items-center justify-center rounded-full border bg-white"
+                                    >
+                                        <span class="text-micro text-secondary font-medium">
+                                            +{hiddenRuntimes.length}
+                                        </span>
+                                    </li>
+                                    <svelte:fragment slot="tooltip">
+                                        <span class="text-micro">{hiddenRuntimes.join(', ')}</span>
+                                    </svelte:fragment>
+                                </Tooltip>
+                            {/if}
+                        </ul>
                     </div>
                     <p class="text-sub-body text-secondary line-clamp-2">{template.description}</p>
                 </div>

diff --git a/src/routes/products/functions/+page.svelte b/src/routes/products/functions/+page.svelte
@@ -69,7 +69,6 @@
         <Bento />
         <div class="bg-greyscale-50">
             <Templates />
-            <RegionsMap />
             <Testimonials />
             <OpenSource />
         </div>