Rewrite page in Svelte 5 #49
1 changed files with 54 additions and 12 deletions
|
@ -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'}"
|
Loading…
Reference in a new issue