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

Rename Card to ServiceCard. Add proper icon handling

Browse source
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
1 changed files with 54 additions and 12 deletions

101
src/lib/components/Card.svelte
View file

@ -1,101 +0,0 @@
<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';
let { service }: { service: Service } = $props();
let hover = $state({
title: false,
link: false,
ext: false
});
</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}
<img
width="24px"
class="h-6 w-6 cursor-pointer"
src={service.icon}
alt="{service.name} Logo"
/>
{: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>