f8927b426e
resolves #47 Co-authored-by: johba <johba@harb.eth> Reviewed-on: https://codeberg.org/johba/harb/pulls/54
55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<template>
|
|
<a :href="props.href" target="_blank">
|
|
<div class="social-badge" :style="{ color: color, 'border-color': color }" :class="{ 'social-badge--dark': props.dark }">
|
|
<div class="social-badge-icon">
|
|
<component :color="color" :is="img" />
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import IconDiscord from '@/components/icons/IconDiscord.vue';
|
|
import IconTwitter from '@/components/icons/IconTwitter.vue';
|
|
import IconTelegram from '@/components/icons/IconTelegram.vue';
|
|
|
|
interface Props {
|
|
type?: string;
|
|
dark?: boolean;
|
|
href?: string;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
type: 'discord',
|
|
dark: false,
|
|
href: '',
|
|
});
|
|
|
|
const color = computed(() => (props.dark ? 'white' : 'black'));
|
|
|
|
const icons = {
|
|
discord: IconDiscord,
|
|
twitter: IconTwitter,
|
|
telegram: IconTelegram,
|
|
} as const;
|
|
|
|
const img = computed(() => icons[props.type as keyof typeof icons] ?? null);
|
|
</script>
|
|
<style lang="sass">
|
|
.social-badge
|
|
border-radius: 14px
|
|
display: flex
|
|
border: 1px solid var(--color-social-border)
|
|
padding: 6px 20px
|
|
align-items: center
|
|
flex: 0 1 0
|
|
color: black
|
|
&:hover,&:active,&:focus
|
|
background-color: var(--color-white-hovered)
|
|
cursor: pointer
|
|
&.social-badge--dark
|
|
&:hover, &:active, &:focus
|
|
background-color: var(--color-black-hovered)
|
|
// font-size: 0
|
|
</style>
|