mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Merge branch 'feat-g4' of github.com:appwrite/console into feat-g4
This commit is contained in:
Arman
@@ -16,7 +16,8 @@
|
||||
{
|
||||
href: `${path}/templates`,
|
||||
title: 'Templates',
|
||||
event: 'templates'
|
||||
event: 'templates',
|
||||
experimental: true
|
||||
}
|
||||
];
|
||||
</script>
|
||||
@@ -34,6 +35,13 @@
|
||||
event={tab.event}>
|
||||
{tab.title}
|
||||
</Tab>
|
||||
{#if tab.experimental}
|
||||
<div class="u-flex u-cross-center">
|
||||
<div class="tag eyebrow-heading-3">
|
||||
<span class="text u-x-small">Experimental</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</Tabs>
|
||||
</Cover>
|
||||
|
||||
@@ -86,50 +86,63 @@
|
||||
<span class="icon-x" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<Collapsible>
|
||||
<CollapsibleItem>
|
||||
<svelte:fragment slot="title">Use case</svelte:fragment>
|
||||
{#each [...data.useCases] as useCase}
|
||||
<div class="input-text-wrapper">
|
||||
<input
|
||||
id={`useCase-${useCase}`}
|
||||
type="checkbox"
|
||||
value={$page.url.searchParams.getAll('useCase').includes(useCase)}
|
||||
on:change={(e) => applyFilter('useCase', useCase, e)} />
|
||||
<label for={`useCase-${useCase}`}>{useCase}</label>
|
||||
</div>
|
||||
{/each}
|
||||
</CollapsibleItem>
|
||||
<CollapsibleItem>
|
||||
<svelte:fragment slot="title">Runtime</svelte:fragment>
|
||||
{#each [...data.runtimes] as runtime}
|
||||
{@const icon = getIconFromRuntime(runtime)}
|
||||
<div class="u-flex">
|
||||
<input
|
||||
id={`runtime-${runtime}`}
|
||||
type="checkbox"
|
||||
checked={$page.url.searchParams.getAll('runtime').includes(runtime)}
|
||||
on:change={(e) => applyFilter('runtime', runtime, e)} />
|
||||
<div class="avatar is-size-x-small">
|
||||
<img
|
||||
style:--p-text-size="16px"
|
||||
src={`${base}/icons/${$app.themeInUse}/color/${icon}.svg`}
|
||||
alt={icon}
|
||||
aria-hidden="true"
|
||||
aria-label={icon} />
|
||||
</div>
|
||||
<label for={`runtime-${runtime}`}>{runtime}</label>
|
||||
</div>
|
||||
{/each}
|
||||
</CollapsibleItem>
|
||||
</Collapsible>
|
||||
<div class="u-margin-block-start-24">
|
||||
<Collapsible>
|
||||
<CollapsibleItem>
|
||||
<svelte:fragment slot="title">Use case</svelte:fragment>
|
||||
<ul class="form-list u-row-gap-16">
|
||||
{#each [...data.useCases] as useCase}
|
||||
<li class="form-item">
|
||||
<label class="u-flex u-cross-center u-gap-16">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="is-small"
|
||||
value={$page.url.searchParams
|
||||
.getAll('useCase')
|
||||
.includes(useCase)}
|
||||
on:change={(e) => applyFilter('useCase', useCase, e)} />
|
||||
<div class="u-trim-1">{useCase}</div>
|
||||
</label>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</CollapsibleItem>
|
||||
<CollapsibleItem>
|
||||
<svelte:fragment slot="title">Runtime</svelte:fragment>
|
||||
<ul class="form-list u-row-gap-16">
|
||||
{#each [...data.runtimes] as runtime}
|
||||
{@const icon = getIconFromRuntime(runtime)}
|
||||
<li class="form-item">
|
||||
<label class="u-flex u-cross-center u-gap-16">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="is-small"
|
||||
checked={$page.url.searchParams
|
||||
.getAll('runtime')
|
||||
.includes(runtime)}
|
||||
on:change={(e) => applyFilter('runtime', runtime, e)} />
|
||||
<div class="u-flex u-cross-center u-gap-8">
|
||||
<div class="avatar is-size-x-small">
|
||||
<img
|
||||
src={`${base}/icons/${$app.themeInUse}/color/${icon}.svg`}
|
||||
alt={icon} />
|
||||
</div>
|
||||
<div class="u-trim-1">{runtime}</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</CollapsibleItem>
|
||||
</Collapsible>
|
||||
</div>
|
||||
|
||||
<section class="card u-margin-block-start-24">
|
||||
<h4 class="body-text-1 u-bold">Contribute</h4>
|
||||
<p class="u-margin-block-start-16">
|
||||
Have an idea for a function template? View our <a
|
||||
class="link"
|
||||
href=""
|
||||
href="https://github.com/appwrite/templates/blob/main/CONTRIBUTING.md"
|
||||
target="_blank">contribution guidelines</a
|
||||
>.
|
||||
</p>
|
||||
|
||||
+28
-17
@@ -10,23 +10,34 @@
|
||||
<Container>
|
||||
<div class="grid-300px-1fr">
|
||||
<section>
|
||||
<h3 class="body-text-1 u-bold">Use cases</h3>
|
||||
<div class="u-margin-block-start-8 u-flex u-flex-wrap u-gap-8">
|
||||
{#each $template.usecases as useCase}
|
||||
<Pill>{useCase}</Pill>
|
||||
{/each}
|
||||
</div>
|
||||
<h3 class="body-text-1 u-bold u-margin-block-start-8">Runtimes</h3>
|
||||
<div class="u-margin-block-start-8 u-flex u-flex-wrap u-gap-8">
|
||||
{#each $template.runtimes as runtime}
|
||||
<Pill>{runtime.name}</Pill>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<section class="card u-margin-block-start-24">
|
||||
<h4 class="body-text-1 u-bold">Published by</h4>
|
||||
{$template.providerOwner}
|
||||
</section>
|
||||
<ul class="collapsible">
|
||||
<li class="collapsible-item">
|
||||
<h3 class="body-text-2 u-bold u-padding-block-12">
|
||||
Use cases <span class="inline-tag">{$template.usecases.length}</span>
|
||||
</h3>
|
||||
<div class="collapsible-content u-flex u-flex-wrap u-gap-8">
|
||||
{#each $template.usecases as useCase}
|
||||
<Pill>{useCase}</Pill>
|
||||
{/each}
|
||||
</div>
|
||||
</li>
|
||||
<li class="collapsible-item">
|
||||
<h3 class="body-text-2 u-bold u-padding-block-12">
|
||||
Runtimes <span class="inline-tag">{$template.runtimes.length}</span>
|
||||
</h3>
|
||||
<div class="collapsible-content u-flex u-flex-wrap u-gap-8">
|
||||
{#each $template.runtimes as runtime}
|
||||
<Pill>{runtime.name}</Pill>
|
||||
{/each}
|
||||
</div>
|
||||
</li>
|
||||
<li class="collapsible-item">
|
||||
<section class="card u-margin-block-start-24">
|
||||
<h4 class="body-text-1 u-bold">Published by</h4>
|
||||
{$template.providerOwner}
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<Card>
|
||||
|
||||
Reference in New Issue
Block a user