Rename Card to ServiceCard. Add proper icon handling

2024-01-02 02:10:44 +01:00 · 2024-01-02 02:10:44 +01:00 · 0a22ba5e08
commit 0a22ba5e08
parent 0eb25708a0
1 changed files with 54 additions and 12 deletions
--- a/src/lib/components/ServiceCard.svelte
+++ b/src/lib/components/ServiceCard.svelte
@ -0,0 +1,143 @@
+<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>