Merge pull request #1265 from ItzNotABug/add-info-to-express-builds

Add explainer to Express Build
appwrite · Aug 26, 2024 · 90311dd · 90311dd
2 parents d5479bc + fc82e55
commit 90311dd
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/src/routes/pricing/compare-plans.svelte b/src/routes/pricing/compare-plans.svelte
@@ -4,15 +4,16 @@
     import { visible } from '$lib/actions/visible';
     import { isHeaderHidden } from '$lib/layouts/Main.svelte';
     import { getScrollDir } from '$lib/utils/getScrollDir';
-    import { isVisible } from '$lib/utils/isVisible';
     import { createAccordion, melt } from '@melt-ui/svelte';
     import { writable } from 'svelte/store';
     import { fly } from 'svelte/transition';
+    import Tooltip from '../../lib/components/Tooltip.svelte';
 
     type Table = {
         title: string;
         rows: {
             title: string;
+            info?: string;
             free: string | true;
             pro: string | true;
             scale: string | true;
@@ -232,6 +233,7 @@
                 },
                 {
                     title: 'Express builds',
+                    info: 'Dedicated priority queues for build jobs',
                     free: '-',
                     pro: true,
                     scale: true
@@ -498,7 +500,19 @@
                             <tbody class="web-compare-table-body" use:melt={$content(table.title)}>
                                 {#each table.rows as row}
                                     <tr>
-                                        <th class="web-sub-body-500">{row.title}</th>
+                                        <th class="web-sub-body-500">
+                                            <div class="u-flex u-gap-4">
+                                                {row.title}
+                                                {#if row.info}
+                                                    <Tooltip placement="top">
+                                                        <span class="icon-info" aria-hidden="true" />
+                                                        <svelte:fragment slot="tooltip">
+                                                            {row.info}
+                                                        </svelte:fragment>
+                                                    </Tooltip>
+                                                {/if}
+                                            </div>
+                                        </th>
                                         {#each cols as col, index}
                                             <td
                                                 class="level-{index}"