Rename Card to ServiceCard. Add proper icon handling

This commit is contained in:
Neshura 2024-01-02 02:10:44 +01:00
parent 52593efb62
commit 1a761d60cc
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C

View file

@ -4,15 +4,51 @@
import {OpenInNewWindow} from 'radix-icons-svelte'; import {OpenInNewWindow} from 'radix-icons-svelte';
import {quintInOut} from 'svelte/easing'; import {quintInOut} from 'svelte/easing';
import {slide} from 'svelte/transition'; import {slide} from 'svelte/transition';
import type { Service } from '$lib/types/data-types'; import {IconType, type Service} from '$lib/types/data-types';
import {onMount} from "svelte";
import {Skeleton} from "$lib/components/ui/skeleton";
let { service }: { service: Service } = $props(); let { service, icons } = $props<{ service: Service, icons: Array<string> }>();
let hover = $state({ let hover = $state({
title: false, title: false,
link: false, link: false,
ext: 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> </script>
<div <div
@ -25,13 +61,19 @@
on:mouseleave={() => (hover.title = false)} on:mouseleave={() => (hover.title = false)}
> >
{#if service.icon} {#if service.icon}
{#if img_source != ""}
<img <img
width="24px" width="24px"
class="h-6 w-6 cursor-pointer" class="h-6 w-6 cursor-pointer"
src={service.icon} src={img_source}
alt="{service.name} Logo" alt="{service.name} Logo"
/> />
{:else}{/if} {:else}
<Skeleton class="h-6 w-6 rounded-full" />
{/if}
{:else}
{/if}
<a <a
href={service.href} href={service.href}
class="font-bold text-accent {hover.title ? 'text-primary' : 'text-secondary'}" class="font-bold text-accent {hover.title ? 'text-primary' : 'text-secondary'}"