mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
feat: settings billing page (WIP)
This commit is contained in:
Arman
@@ -49,6 +49,7 @@ export { default as Heading } from './heading.svelte';
|
||||
export { default as Output } from './output.svelte';
|
||||
export { default as ViewSelector } from './viewSelector.svelte';
|
||||
export { default as LabelCard } from './labelCard.svelte';
|
||||
export { default as RegionCard } from './regionCard.svelte';
|
||||
export { default as Limit } from './limit.svelte';
|
||||
export { default as PaginationWithLimit } from './paginationWithLimit.svelte';
|
||||
export { default as ClickableList } from './clickableList.svelte';
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
export let name: string;
|
||||
export let group: string;
|
||||
export let value: string | number | boolean;
|
||||
export let disabled = false;
|
||||
export let padding = 1;
|
||||
export let icon: string = null;
|
||||
export let fullHeight = true;
|
||||
export let borderRadius: 'xsmall' | 'small' | 'medium' | 'large' = 'small';
|
||||
|
||||
enum Radius {
|
||||
xsmall = '--border-radius-xsmall',
|
||||
small = '--border-radius-small',
|
||||
medium = '--border-radius-medium',
|
||||
large = '--border-radius-large'
|
||||
}
|
||||
</script>
|
||||
|
||||
<label
|
||||
class="card u-cursor-pointer u-flex u-flex-vertical u-gap-16"
|
||||
class:is-allow-focus={!disabled}
|
||||
class:is-disabled={disabled}
|
||||
class:u-height-100-percent={fullHeight}
|
||||
style:--card-padding={`${padding}rem`}
|
||||
style:--card-border-radius={`var(${Radius[borderRadius]})`}>
|
||||
<input
|
||||
class="is-small u-margin-block-start-2"
|
||||
type="radio"
|
||||
{name}
|
||||
{disabled}
|
||||
{value}
|
||||
bind:group
|
||||
on:click />
|
||||
<slot />
|
||||
</label>
|
||||
@@ -33,7 +33,15 @@
|
||||
{/if}
|
||||
</FormList>
|
||||
|
||||
<p class="text common-section">Plan</p>
|
||||
<p class="body-text-1 u-bold common-section">Plan</p>
|
||||
<p class="text">
|
||||
For more details on our plans, visit our <a
|
||||
class="link"
|
||||
href="http://#"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">pricing page</a
|
||||
>.
|
||||
</p>
|
||||
<ul
|
||||
class="grid-box u-margin-block-start-16"
|
||||
style="--p-grid-item-size:16em; --p-grid-item-size-small-screens:16rem; --grid-gap: 1rem;">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { LabelCard } from '$lib/components';
|
||||
import { RegionCard } from '$lib/components';
|
||||
import { Pill } from '$lib/elements';
|
||||
import { WizardStep } from '$lib/layout';
|
||||
import { sdk } from '$lib/stores/sdk';
|
||||
@@ -45,36 +45,34 @@
|
||||
style="--p-grid-item-size:12em; --p-grid-item-size-small-screens:12rem; --grid-gap: 1rem;">
|
||||
{#each regions as region}
|
||||
<li>
|
||||
<LabelCard
|
||||
<RegionCard
|
||||
name="region"
|
||||
bind:group={$createProject.region}
|
||||
value={region.name}
|
||||
disabled={region.disabled}>
|
||||
<svelte:fragment slot="custom">
|
||||
<div
|
||||
class="u-flex u-flex-vertical u-gap-12 u-justify-main-center u-cross-center u-margin-inline-auto">
|
||||
{#if region.disabled}
|
||||
<img
|
||||
src={getFlag(region.flag)}
|
||||
alt={region.name}
|
||||
width="40"
|
||||
height="30" />
|
||||
{region.label}
|
||||
<Pill button>
|
||||
<span class="icon-bell" aria-hidden="true" />
|
||||
<span class="text">Notify me</span>
|
||||
</Pill>
|
||||
{:else}
|
||||
<img
|
||||
src={getFlag(region.flag)}
|
||||
alt={region.name}
|
||||
width="40"
|
||||
height="30" />
|
||||
{region.label}
|
||||
{/if}
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</LabelCard>
|
||||
<div
|
||||
class="u-flex u-flex-vertical u-gap-12 u-justify-main-center u-cross-center u-margin-inline-auto">
|
||||
{#if region.disabled}
|
||||
<img
|
||||
src={getFlag(region.flag)}
|
||||
alt={region.name}
|
||||
width="40"
|
||||
height="30" />
|
||||
<p class:u-opacity-50={region.disabled}>{region.label}</p>
|
||||
<Pill button>
|
||||
<span class="icon-bell" aria-hidden="true" />
|
||||
<span class="text">Notify me</span>
|
||||
</Pill>
|
||||
{:else}
|
||||
<img
|
||||
src={getFlag(region.flag)}
|
||||
alt={region.name}
|
||||
width="40"
|
||||
height="30" />
|
||||
{region.label}
|
||||
{/if}
|
||||
</div>
|
||||
</RegionCard>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { Heading } from '$lib/components';
|
||||
import { Container } from '$lib/layout';
|
||||
import BudgetCap from './budgetCap.svelte';
|
||||
</script>
|
||||
|
||||
<Container>
|
||||
<Heading tag="h2" size="5">Billing</Heading>
|
||||
<BudgetCap />
|
||||
</Container>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script>
|
||||
import { CardGrid, Heading } from '$lib/components';
|
||||
import { Button, Form, FormList, InputNumber, InputSwitch } from '$lib/elements/forms';
|
||||
|
||||
function update() {
|
||||
console.log('test');
|
||||
}
|
||||
</script>
|
||||
|
||||
<Form onSubmit={update}>
|
||||
<CardGrid>
|
||||
<Heading tag="h2" size="6">Budget Cap</Heading>
|
||||
<p class="text">
|
||||
Restrict your resource usage by setting a budget cap. <a
|
||||
class="link"
|
||||
href="http://#"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Learn more about usage rates</a
|
||||
>.
|
||||
</p>
|
||||
<svelte:fragment slot="aside">
|
||||
<FormList>
|
||||
<InputSwitch label="Budget cap" />
|
||||
<InputNumber label="Budget cap ($USD)" placeholder="Enter budget cap" />
|
||||
</FormList>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="actions">
|
||||
<Button disabled submit>Update</Button>
|
||||
</svelte:fragment>
|
||||
</CardGrid>
|
||||
</Form>
|
||||
Reference in New Issue
Block a user