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

Add Link Icon to card

Browse source
This commit is contained in:
Neshura 2024-01-01 18:40:02 +01:00
parent 6c2f29afa6
commit bfd9dcaa7d
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
3 changed files with 71 additions and 27 deletions
src/lib/components
Card.svelte

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

@ -1,24 +1,66 @@
<svelte:options runes={true} />
<script lang="ts">
import {OpenInNewWindow} from "radix-icons-svelte";
import {quintInOut} from "svelte/easing";
import { slide } from "svelte/transition";
let {service} = $props();
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">
<h1>ICO</h1>
<a href={service.href} class="text-accent font-bold hover:text-primary">{service.name}</a>
<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}>
{: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>
<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 text-destructive">{service.warn}</p>
<div class="flex flex-row justify-around mt-auto">
<a class="text-sm border-x-2 rounded-md px-2 text-accent hover:border-primary hover:text-primary" href={service.href}>Open</a>
<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="text-sm border-x-2 rounded-md px-2 text-accent hover:border-primary hover:text-primary" href={service.extLink}>Official Site</a>
<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>