web/about/community: redesign the page, add descriptions

2024-10-12 19:06:11 +06:00
parent 6cc895c395
commit ebf157862a
3 changed files with 185 additions and 51 deletions
--- a/web/src/components/about/AboutSupport.svelte
+++ b/web/src/components/about/AboutSupport.svelte
@@ -0,0 +1,116 @@
+<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";
+
+    export let platform: "github" | "discord" | "twitter" | "telegram";
+    export let externalLink: string;
+
+    const platformIcons = {
+        github: {
+            icon: IconBrandGithub,
+            color: "var(--secondary)",
+        },
+        discord: {
+            icon: IconBrandDiscord,
+            color: "#5865f2",
+        },
+        twitter: {
+            icon: IconBrandTwitter,
+            color: "#1da1f2",
+        },
+        telegram: {
+            icon: IconBrandTelegram,
+            color: "#1c9efb",
+        },
+    };
+</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}"
+        >
+            <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: left;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+    }
+
+    .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;
+    }
+
+    :global([data-theme="dark"]) .support-icon-github :global(svg) {
+        stroke: var(--primary);
+    }
+</style>