Neshweb-Sites/main-site
Neshweb-Sites/main-site
1
0
Fork 0
Code Issues2 Pull requests Releases11 Packages1 Activity Actions

Prettier Changes

Browse source
This commit is contained in:
Neshura 2024-01-02 02:39:22 +01:00
parent 829e911674
commit 5bd01c3a22
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
10 changed files with 69 additions and 79 deletions
src/lib/components
ServiceCard.svelte
ui/skeleton
index.tsskeleton.svelte

54
src/lib/components/ServiceCard.svelte
View file

@ -1,14 +1,14 @@
<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";
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 { service, icons } = $props<{ service: Service; icons: Array<string> }>();
let hover = $state({
title: false,
@ -16,39 +16,35 @@
ext: false
});
let img_source: string = $state("");
let img_source: string = $state('');
function checkForImage(service: Service) {
const rootSplit = service.icon.split('/');
const root = rootSplit[rootSplit.length - 1]
const root = rootSplit[rootSplit.length - 1];
if (icons.includes(`${root}.${service.iconType}`)) {
img_source = `${service.icon}.${service.iconType}`
}
else {
img_source = ""
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]
const root = rootSplit[rootSplit.length - 1];
if (service.iconType === IconType.SVG) {
checkForImage(service)
}
else {
checkForImage(service);
} else {
if (icons.includes(`${root}-36.${service.iconType}`)) {
img_source = `${service.icon}-36.${service.iconType}`
}
else {
checkForImage(service)
img_source = `${service.icon}-36.${service.iconType}`;
} else {
checkForImage(service);
}
}
}
});
</script>
<div
@ -61,19 +57,17 @@
on:mouseleave={() => (hover.title = false)}
>
{#if service.icon}
{#if img_source != ""}
{#if img_source != ''}
<img
width="24px"
class="h-6 w-6 cursor-pointer"
src={img_source}
alt="{service.name} Logo"
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}
{:else}{/if}
<a
href={service.href}
class="font-bold text-accent {hover.title ? 'text-primary' : 'text-secondary'}"

2
src/lib/components/ui/skeleton/index.ts
View file

@ -1,4 +1,4 @@
import Root from "./skeleton.svelte";
import Root from './skeleton.svelte';
export {
Root,

11
src/lib/components/ui/skeleton/skeleton.svelte
View file

@ -1,14 +1,11 @@
<script lang="ts">
import { cn } from "$lib/utils";
import type { HTMLAttributes } from "svelte/elements";
import { cn } from '$lib/utils';
import type { HTMLAttributes } from 'svelte/elements';
type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
</script>
<div
class={cn("animate-pulse rounded-md bg-primary/10", className)}
{...$$restProps}
/>
<div class={cn('animate-pulse rounded-md bg-primary/10', className)} {...$$restProps} />