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

<svelte:options runes={true} />

<script lang="ts">
	import { Clipboard, Copy, OpenInNewWindow } from 'radix-icons-svelte';
	import { quintInOut } from 'svelte/easing';
	import { slide } from 'svelte/transition';
	import { IconType, type Server } from '$lib/types/data-types';
	import { Skeleton } from '$lib/components/ui/skeleton';
	import type { Heartbeat } from '$lib/types/uptime-kuma-types';
	import { Button } from '$lib/components/ui/button';

	let { server, icons, monitor } = $props<{
		server: Server;
		icons: Array<string>;
	}>();

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

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

	function copyToClipboard(value: string) {
		navigator.clipboard.writeText(value);
	}

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

		if (icons.includes(`${root}.${server.iconType}`)) {
			img_source = `${server.icon}.${server.iconType}`;
		} else {
			img_source = '';
		}
	}

	$effect(() => {
		if (typeof server.id === 'undefined') {
			status = 99;
		}
		if (typeof monitor !== 'undefined') {
			status = monitor.status;
		}
		if (icons.length != 0 && typeof server.icon !== 'undefined') {
			const rootSplit = server.icon.split('/');
			const root = rootSplit[rootSplit.length - 1];

			if (server.iconType === IconType.SVG) {
				checkForImage(server);
			} else {
				if (icons.includes(`${root}-36.${server.iconType}`)) {
					img_source = `${server.icon}-36.${server.iconType}`;
				} else {
					checkForImage(server);
				}
			}
		}
	});
</script>

<div
	class="flex h-48 w-[28rem] flex-col gap-y-3 rounded-xl border-t-4 border-secondary z-0 bg-black/55 p-4 backdrop-blur-sm"
>
	<div class="flex flex-row justify-between">
		<div
			class="flex flex-row items-center gap-1"
			on:mouseover={() => (hover.title = true)}
			on:mouseleave={() => (hover.title = false)}
		>
			{#if typeof server.icon !== 'undefined'}
				{#if img_source != ''}
					<img
						width="24px"
						class="h-6 w-6 cursor-pointer"
						src={img_source}
						alt="{server.name} Logo"
					/>
				{:else}
					<Skeleton class="h-6 w-6 rounded-full" />
				{/if}
			{:else}{/if}
			{#if typeof server.href !== 'undefined'}
				<a href={server.href} class="font-bold {!hover.title || 'text-secondary'}">{server.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(--secondary))' : 'hsl(var(--primary)'}
							class="self-center"
						/>
					</div>
				{/if}
			{:else}
				<h2 class="font-bold">{server.name}</h2>
			{/if}
		</div>
	</div>
	<p class="text-wrap text-center text-sm">{server.desc}</p>
	{#if typeof server.connection !== 'undefined'}
		<div class="flex w-full flex-col items-center">
			<Button
				variant="ghost"
				class="	flex w-fit flex-row items-center gap-1 rounded-sm border px-2 py-1 text-center font-mono text-sm font-bold
							hover:border-primary hover:bg-transparent hover:text-primary/60
							active:border-secondary active:bg-black/70 active:text-secondary"
				on:click={() => copyToClipboard(server.connection)}
			>
				{server.connection}
				<Copy />
			</Button>
		</div>
	{/if}
	<div class="grid {server.extLink ? 'grid-cols-2' : 'grid-cols-1'} mt-auto justify-items-center">
		{#if typeof server.href !== 'undefined'}
			<a
				class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
				href={server.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(--secondary))' : 'hsl(var(--primary)'}
							class="self-center"
						/>
					</div>
				{/if}
			</a>
		{/if}
		{#if server.extLink}
			<a
				class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
				href={server.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(--secondary))' : 'hsl(var(--primary)'}
							class="self-center"
						/>
					</div>
				{/if}
			</a>
		{/if}
	</div>
</div>