Prettier changes
This commit is contained in:
parent
d99d508bd6
commit
eeaeca1006
GPG key ID:
B6983AAA6B9A7A6C
11 changed files with 556 additions and 526 deletions
src/lib/components
|
|
@ -1,66 +1,100 @@
|
|||
<svelte:options runes={true} />
|
||||
|
||||
<script lang="ts">
|
||||
import {OpenInNewWindow} from "radix-icons-svelte";
|
||||
import {quintInOut} from "svelte/easing";
|
||||
import { slide } from "svelte/transition";
|
||||
import { OpenInNewWindow } from 'radix-icons-svelte';
|
||||
import { quintInOut } from 'svelte/easing';
|
||||
import { slide } from 'svelte/transition';
|
||||
|
||||
let {service} = $props();
|
||||
let { service } = $props();
|
||||
|
||||
let hover = $state({
|
||||
title: false,
|
||||
link: false,
|
||||
ext: false
|
||||
})
|
||||
let hover = $state({
|
||||
title: false,
|
||||
link: false,
|
||||
ext: false
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col border-t-4 rounded-xl bg-black/55 border-maintenance p-4 gap-y-2 w-[30rem] h-48">
|
||||
<div class="flex flex-row justify-between pb-4">
|
||||
<div class="flex flex-row gap-1 items-center" 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="text-accent font-bold {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>
|
||||
<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="border-b-2 rounded-md text-sm text-center w-16 text-maintenance border-maintenance">Loading</h1>
|
||||
</div>
|
||||
<p class="text-sm text-center text-accent text-wrap">{service.desc}</p>
|
||||
<p class="text-sm text-center font-bold text-destructive">{service.warn}</p>
|
||||
<div class="grid {service.extLink ? 'grid-cols-2' : 'grid-cols-1'} justify-items-center mt-auto">
|
||||
<a
|
||||
class="flex flex-row text-sm border-x-2 rounded-md px-2 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="pl-1 pr-0 grid items-center">
|
||||
<OpenInNewWindow color={ hover.link ? "hsl(var(--primary))" : "hsl(var(--secondary)"} class="self-center"/>
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
{#if service.extLink}
|
||||
<a
|
||||
class="flex flex-row text-sm border-x-2 rounded-md px-2 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="pl-1 pr-0 grid items-center">
|
||||
<OpenInNewWindow color={ hover.ext ? "hsl(var(--primary))" : "hsl(var(--secondary)"} class="self-center"/>
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue