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';
	import type { Service } from '$lib/types/data-types';

	let { service: Service } = $props();

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

<div
	class="flex h-48 w-[30rem] flex-col gap-y-2 rounded-xl border-t-4 border-maintenance bg-black/55 p-4"
>
	<div class="flex flex-row justify-between pb-4">
		<div
			class="flex flex-row items-center gap-1"
			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="font-bold text-accent {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="w-16 rounded-md border-b-2 border-maintenance text-center text-sm text-maintenance">
			Loading
		</h1>
	</div>
	<p class="text-wrap text-center text-sm text-accent">{service.desc}</p>
	<p class="text-center text-sm font-bold text-destructive">{service.warn}</p>
	<div class="grid {service.extLink ? 'grid-cols-2' : 'grid-cols-1'} mt-auto justify-items-center">
		<a
			class="flex flex-row rounded-md border-x-2 px-2 text-sm 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="grid items-center pl-1 pr-0"
				>
					<OpenInNewWindow
						color={hover.link ? 'hsl(var(--primary))' : 'hsl(var(--secondary)'}
						class="self-center"
					/>
				</div>
			{/if}
		</a>
		{#if service.extLink}
			<a
				class="flex flex-row rounded-md border-x-2 px-2 text-sm 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="grid items-center pl-1 pr-0"
					>
						<OpenInNewWindow
							color={hover.ext ? 'hsl(var(--primary))' : 'hsl(var(--secondary)'}
							class="self-center"
						/>
					</div>
				{/if}
			</a>
		{/if}
	</div>
</div>