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 { Skeleton } from '$lib/components/ui/skeleton';
	import type {Heartbeat} from "$lib/types/uptime-kuma-types";

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

	let status = $state(4);

	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 (typeof monitor !== "undefined") {
			if (monitor.monitorID == 9) {
				console.log("Vaultwarden: ", monitor.status)
			}
			status = monitor.status;
		}
		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-[28rem] flex-col gap-y-2 rounded-xl border-t-4
		{status == 0 ? 'border-offline' : status == 1 ? 'border-online' : status == 2 ? 'border-pending' : status == 3 ? 'border-maintenance' : '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
			{status == 0 ? 'border-offline' : status == 1 ? 'border-online' : status == 2 ? 'border-pending' : status == 3 ? 'border-maintenance' : 'border-maintenance'}
			text-center text-sm
			{status == 0 ? 'text-offline' : status == 1 ? 'text-online' : status == 2 ? 'text-pending' : status == 3 ? 'text-maintenance' : 'text-maintenance'}">
			{status == 0 ? 'Offline' : status == 1 ? 'Online' : status == 2 ? 'Pending' : status == 3 ? 'Maint.' : '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>