main-site/src/lib/components/ServiceCard.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 {IconType, type Service} from '$lib/types/data-types';
	import {onMount} from "svelte";
	import {Skeleton} from "$lib/components/ui/skeleton";

	let { service, icons } = $props<{ service: Service, icons: Array<string> }>();

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

	let img_source: string = $state("");

	function checkForImage(service: Service) {
		const rootSplit = service.icon.split('/');
		const root = rootSplit[rootSplit.length - 1]

		if (icons.includes(`${root}.${service.iconType}`)) {
			img_source = `${service.icon}.${service.iconType}`
		}
		else {
			img_source = ""
		}
	}

	$effect(() => {
		if (icons.length != 0) {
			const rootSplit = service.icon.split('/');
			const root = rootSplit[rootSplit.length - 1]

			if (service.iconType === IconType.SVG) {
				checkForImage(service)
			}
			else {
				if (icons.includes(`${root}-36.${service.iconType}`)) {
					img_source = `${service.icon}-36.${service.iconType}`
				}
				else {
					checkForImage(service)
				}
			}
		}
	});

</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}
				{#if img_source != ""}
					<img
							width="24px"
							class="h-6 w-6 cursor-pointer"
							src={img_source}
							alt="{service.name} Logo"
					/>
				{:else}
					<Skeleton class="h-6 w-6 rounded-full" />
				{/if}
			{: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>