<script lang="ts">
    import { Avatar } from "@skeletonlabs/skeleton";
    export let name: string;
    export let icon: string;
    export let link: string;
</script>

<div class="grid grid-cols-1 sm:grid-cols-2 card p-4 bg-card-alt">
    <Avatar class="w-fit md:w-24" alt="{name} Icon" src="{icon}" />
    <p class="my-auto mx-auto p-2 fit-text-in-div font-bold text-center text-white">
        <a href="{link}">{name}</a>
    </p>
</div>

<style lang="postcss">
    .bg-card-alt {
        background-color: #1a202c;
    }

    .fit-text-in-div {
        padding: 0;
        font-size: 125%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>