main-site/src/lib/components/Card.svelte

<svelte:options runes={true} />

<script lang="ts">
    import {OpenInNewWindow} from "radix-icons-svelte";
    import {quintInOut} from "svelte/easing";
    import { slide } from "svelte/transition";

    let {service} = $props();

    let hover = $state({
        title: false,
        link: false,
        ext: false
    })
</script>

<div class="flex flex-col border-t-4 rounded-xl bg-black/55 border-maintenance p-4 gap-y-2 w-[30rem] h-48">
    <div class="flex flex-row justify-between pb-4">
        <div class="flex flex-row gap-1 items-center" on:mouseover={() => hover.title = true} on:mouseleave={() => hover.title = false}>
            {#if service.icon}
                <img width="24px" class="h-6 w-6 cursor-pointer" src={service.icon} alt="{service.name} Logo">
            {:else}
            {/if}
            <a href={service.href} class="text-accent font-bold {hover.title ? 'text-primary': 'text-secondary'}">{service.name}</a>
            {#if hover.title}
                <div  transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }} class="grid items-center">
                    <OpenInNewWindow color={ hover.title ? "hsl(var(--primary))" : "hsl(var(--secondary)"} class="self-center"/>
                </div>
            {/if}
        </div>

        <h1 class="border-b-2 rounded-md text-sm text-center w-16 text-maintenance border-maintenance">Loading</h1>
    </div>
    <p class="text-sm text-center text-accent text-wrap">{service.desc}</p>
    <p class="text-sm text-center font-bold text-destructive">{service.warn}</p>
    <div class="grid {service.extLink ? 'grid-cols-2' : 'grid-cols-1'} justify-items-center mt-auto">
        <a
                class="flex flex-row text-sm border-x-2 rounded-md px-2 text-accent hover:border-primary hover:text-primary"
                href={service.href}
                on:mouseover={() => hover.link = true}
                on:mouseleave={() => hover.link = false}
        >
            Open
            {#if hover.link}
                <div transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }} class="pl-1 pr-0 grid items-center">
                    <OpenInNewWindow color={ hover.link ? "hsl(var(--primary))" : "hsl(var(--secondary)"} class="self-center"/>
                </div>
            {/if}
        </a>
        {#if service.extLink}
            <a
                    class="flex flex-row text-sm border-x-2 rounded-md px-2 text-accent hover:border-primary hover:text-primary"
                    href={service.extLink}
                    on:mouseover={() => hover.ext = true}
                    on:mouseleave={() => hover.ext = false}
            >
                Official Site
                {#if hover.ext}
                    <div  transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }} class="pl-1 pr-0 grid items-center">
                        <OpenInNewWindow color={ hover.ext ? "hsl(var(--primary))" : "hsl(var(--secondary)"} class="self-center"/>
                    </div>
                {/if}
            </a>
        {/if}
    </div>
</div>