console/src/lib/components/cardGrid.svelte at 1648808f8f5e0997910a3967ecf778ef9ce7e799 · appwrite/console · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<script lang="ts">
    import { Divider, Layout, Card, Typography } from '@appwrite.io/pink-svelte';

    export let overflow = true;
    export let hideFooter = false;
    export let interactive = false;
    export let gap: 'none' | 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' = 'l';
</script>

<div class="card-grid-wrapper" class:interactive>
    <Card.Base>
        <Layout.Stack gap="xl" justifyContent="space-around">
            <div class="card-grid-content">
                <div class="card-grid-main">
                    <Layout.Stack gap="xxs">
                        <Typography.Title size="s" truncate><slot name="title" /></Typography.Title>
                        {#if $$slots.default}
                            <Typography.Text>
                                <slot />
                            </Typography.Text>
                        {/if}
                    </Layout.Stack>
                </div>
                <div class="card-grid-aside" style:overflow={overflow ? 'visible' : 'hidden'}>
                    <Layout.Stack {gap}>
                        <slot name="aside" />
                    </Layout.Stack>
                </div>
            </div>
            {#if $$slots.actions && !hideFooter}
                <span
                    style="margin-left: calc(-1* var(--space-9));margin-right: calc(-1* var(--space-9));width:auto;">
                    <Divider />
                </span>
                <Layout.Stack direction="row-reverse">
                    <slot name="actions" />
                </Layout.Stack>
            {/if}
        </Layout.Stack>
    </Card.Base>
</div>

<style>
    .card-grid-wrapper.interactive {
    transition:
        transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.card-grid-wrapper.interactive:hover {
    will-change: transform, box-shadow;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 8px 20px rgba(0, 0, 0, 0.12));
}

.card-grid-wrapper.interactive:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm, 0 4px 10px rgba(0, 0, 0, 0.08));
}

.card-grid-content {
    display: grid;
    gap: var(--space-10);
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}

.card-grid-main,
.card-grid-aside {
    min-width: 0;
}

@media (min-width: 769px) {
    .card-grid-content {
        column-gap: var(--space-13);
        row-gap: var(--space-10);
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}
</style>