101 lines
2.8 KiB
Svelte
101 lines
2.8 KiB
Svelte
<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 } = $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>
|