117 lines
2.8 KiB
Svelte
117 lines
2.8 KiB
Svelte
<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>
|