Rename Card to ServiceCard. Add proper icon handling

This commit is contained in:
Neshura 2024-01-02 02:10:44 +01:00
parent 0eb25708a0
commit 0a22ba5e08
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C

View file

@ -1,18 +1,54 @@
<svelte:options runes={true} />
<script lang="ts">
import { OpenInNewWindow } from 'radix-icons-svelte';
import { quintInOut } from 'svelte/easing';
import { slide } from 'svelte/transition';
import type { Service } from '$lib/types/data-types';
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 }: { service: Service } = $props();
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
@ -25,13 +61,19 @@
on:mouseleave={() => (hover.title = false)}
>
{#if service.icon}
{#if img_source != ""}
<img
width="24px"
class="h-6 w-6 cursor-pointer"
src={service.icon}
src={img_source}
alt="{service.name} Logo"
/>
{:else}{/if}
{: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'}"