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

<svelte:options runes={true} />

<script lang="ts">
    let {service} = $props();
</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">
            <h1>ICO</h1>
            <a href={service.href} class="text-accent font-bold hover:text-primary">{service.name}</a>
        </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 text-destructive">{service.warn}</p>
    <div class="flex flex-row justify-around mt-auto">
        <a class="text-sm border-x-2 rounded-md px-2 text-accent hover:border-primary hover:text-primary" href={service.href}>Open</a>
        {#if service.extLink}
            <a class="text-sm border-x-2 rounded-md px-2 text-accent hover:border-primary hover:text-primary" href={service.extLink}>Official Site</a>
        {/if}
    </div>
</div>