Hugging Face's logo

Spaces:
playingapi
/
cobalt
Sleeping

App Files Community
cobalt
File size: 3,041 Bytes 
43a06dc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
<script lang="ts">
    import { t } from "$lib/i18n/translations";
    import { openURL } from "$lib/download";

    import IconExternalLink from "@tabler/icons-svelte/IconExternalLink.svelte";

    import IconBrandGithub from "@tabler/icons-svelte/IconBrandGithub.svelte";
    import IconBrandTwitter from "@tabler/icons-svelte/IconBrandTwitter.svelte";
    import IconBrandDiscord from "@tabler/icons-svelte/IconBrandDiscord.svelte";
    import IconBrandTelegram from "@tabler/icons-svelte/IconBrandTelegram.svelte";
    import IconBrandBluesky from "@tabler/icons-svelte/IconBrandBluesky.svelte";

    const platformIcons = {
        github: {
            icon: IconBrandGithub,
            color: "#8842cd",
        },
        discord: {
            icon: IconBrandDiscord,
            color: "#5865f2",
        },
        twitter: {
            icon: IconBrandTwitter,
            color: "#1da1f2",
        },
        telegram: {
            icon: IconBrandTelegram,
            color: "#1c9efb",
        },
        bluesky: {
            icon: IconBrandBluesky,
            color: "#0a78ff",
        },
    };

    export let platform: keyof typeof platformIcons;
    export let externalLink: string;
</script>

<button
    class="support-card"
    role="link"
    on:click={() => {
        openURL(externalLink);
    }}
>
    <div class="support-card-header">
        <div
            class="icon-holder support-icon-{platform}"
            style="
                background-color: {platformIcons[platform].color};
                box-shadow: 0 0 90px 10px {platformIcons[platform].color};
            "
        >
            <svelte:component this={platformIcons[platform].icon} />
        </div>
        <div class="support-card-title">
            {platform}
            <IconExternalLink />
        </div>
    </div>
    <div class="subtext support-card-description">
        {$t(`about.support.${platform}`)}
    </div>
</button>

<style>
    .support-card {
        padding: var(--padding);
        gap: 4px;
        height: fit-content;

        text-align: start;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        overflow: hidden;
    }

    .support-card-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .icon-holder {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--gray);

        padding: 4px;
        border-radius: 5px;
    }

    .icon-holder :global(svg) {
        width: 20px;
        height: 20px;
        stroke-width: 1.5px;
        stroke: var(--white);
    }

    .support-card-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    .support-card-title :global(svg) {
        stroke: var(--secondary);
        opacity: 0.5;
        width: 14px;
        height: 14px;
    }

    .support-card-description {
        padding: 0;
    }
</style>