teoldalad/lib/components/bio/profile/SocialLink.svelte
2024-03-13 00:30:45 +01:00

31 lines
732 B
Svelte

<script lang="ts">
import type { Site } from '$lib/models/socials';
export let hoverInvert: boolean = false;
export let minimal: boolean = false;
export let site: Site | undefined;
export let social: BioSiteSocialLink;
</script>
{#if site}
<a
class="flex-grow"
style="--color: {site.color}"
href={`${site.type == 'EMAIL' ? 'mailto:' : site.baseUrl}${social.value}`}
target="_blank"
title={site.name}>
<div
class="w-full min-w-[95px] h-10 hover:opacity-80 transition-opacity rounded-lg flex justify-center items-center">
<img class="w-5 h-5" alt="Icon" src={site.icon} />
</div>
</a>
{/if}
<!-- -->
<style lang="postcss">
div {
background: var(--color);
}
</style>