Neshweb-Sites/main-site
Neshweb-Sites/main-site
1
0
Fork 0
Code Issues 2 Pull requests Releases 9 Packages Activity Actions

Adjust ServerCard for usage with Server list

Browse source
This commit is contained in:
Neshura 2024-01-06 03:05:30 +01:00
parent c715471a9a
commit 0f50c43782
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
2 changed files with 60 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
src/lib/components/ServerCard.svelte
View file

@ -1,12 +1,13 @@
<svelte:options runes={true} /> <svelte:options runes={true} />
<script lang="ts"> <script lang="ts">
import { OpenInNewWindow } from 'radix-icons-svelte'; import { Clipboard, Copy, OpenInNewWindow } from 'radix-icons-svelte';
import { quintInOut } from 'svelte/easing'; import { quintInOut } from 'svelte/easing';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import { IconType, type Server } from '$lib/types/data-types'; import { IconType, type Server } from '$lib/types/data-types';
import { Skeleton } from '$lib/components/ui/skeleton'; import { Skeleton } from '$lib/components/ui/skeleton';
import type { Heartbeat } from '$lib/types/uptime-kuma-types'; import type { Heartbeat } from '$lib/types/uptime-kuma-types';
import { Button } from '$lib/components/ui/button';
let { server, icons, monitor } = $props<{ let { server, icons, monitor } = $props<{
server: Server; server: Server;
@ -24,6 +25,10 @@
let img_source: string = $state(''); let img_source: string = $state('');
function copyToClipboard(value: string) {
navigator.clipboard.writeText(value);
}
function checkForImage(server: Server) { function checkForImage(server: Server) {
const rootSplit = server.icon.split('/'); const rootSplit = server.icon.split('/');
const root = rootSplit[rootSplit.length - 1]; const root = rootSplit[rootSplit.length - 1];
@ -60,7 +65,7 @@
</script> </script>
<div <div
class="flex h-48 w-[28rem] flex-col gap-y-2 rounded-xl border-t-4 class="flex h-48 w-[28rem] flex-col gap-y-3 rounded-xl border-t-4
{status == 99 {status == 99
? 'border-primary' ? 'border-primary'
: status == 0 : status == 0
@ -74,7 +79,7 @@
: 'border-maintenance'} : 'border-maintenance'}
z-0 bg-black/55 p-4 backdrop-blur-sm" z-0 bg-black/55 p-4 backdrop-blur-sm"
> >
<div class="flex flex-row justify-between pb-4"> <div class="flex flex-row justify-between">
<div <div
class="flex flex-row items-center gap-1" class="flex flex-row items-center gap-1"
on:mouseover={() => (hover.title = true)} on:mouseover={() => (hover.title = true)}
@ -92,17 +97,21 @@
<Skeleton class="h-6 w-6 rounded-full" /> <Skeleton class="h-6 w-6 rounded-full" />
{/if} {/if}
{:else}{/if} {:else}{/if}
<a href={server.href} class="font-bold {!hover.title || 'text-secondary'}">{server.name}</a> {#if typeof server.href !== 'undefined'}
{#if hover.title} <a href={server.href} class="font-bold {!hover.title || 'text-secondary'}">{server.name}</a>
<div {#if hover.title}
transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }} <div
class="grid items-center" transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
> class="grid items-center"
<OpenInNewWindow >
color={hover.title ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'} <OpenInNewWindow
class="self-center" color={hover.title ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
/> class="self-center"
</div> />
</div>
{/if}
{:else}
<h2 class="font-bold">{server.name}</h2>
{/if} {/if}
</div> </div>
@ -142,27 +151,42 @@
{/if} {/if}
</div> </div>
<p class="text-wrap text-center text-sm">{server.desc}</p> <p class="text-wrap text-center text-sm">{server.desc}</p>
<p class="text-center text-sm font-bold text-destructive">{server.warn}</p> {#if typeof server.connection !== 'undefined'}
<div class="flex w-full flex-col items-center">
<Button
variant="ghost"
class=" flex w-fit flex-row items-center gap-1 rounded-sm border px-2 py-1 text-center font-mono text-sm font-bold
hover:border-primary hover:bg-transparent hover:text-primary/60
active:border-secondary active:bg-black/70 active:text-secondary"
on:click={() => copyToClipboard(server.connection)}
>
{server.connection}
<Copy />
</Button>
</div>
{/if}
<div class="grid {server.extLink ? 'grid-cols-2' : 'grid-cols-1'} mt-auto justify-items-center"> <div class="grid {server.extLink ? 'grid-cols-2' : 'grid-cols-1'} mt-auto justify-items-center">
<a {#if typeof server.href !== 'undefined'}
class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary" <a
href={server.href} class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
on:mouseover={() => (hover.link = true)} href={server.href}
on:mouseleave={() => (hover.link = false)} on:mouseover={() => (hover.link = true)}
> on:mouseleave={() => (hover.link = false)}
Open >
{#if hover.link} Open
<div {#if hover.link}
transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }} <div
class="grid items-center pl-1 pr-0" transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
> class="grid items-center pl-1 pr-0"
<OpenInNewWindow >
color={hover.link ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'} <OpenInNewWindow
class="self-center" color={hover.link ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
/> class="self-center"
</div> />
{/if} </div>
</a> {/if}
</a>
{/if}
{#if server.extLink} {#if server.extLink}
<a <a
class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary" class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"

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

@ -57,7 +57,7 @@
</script> </script>
<div <div
class="flex h-48 w-[28rem] flex-col gap-y-2 rounded-xl border-t-4 class="flex h-48 w-[28rem] flex-col gap-y-3 rounded-xl border-t-4
{status == 0 {status == 0
? 'border-offline' ? 'border-offline'
: status == 1 : status == 1
@ -69,7 +69,7 @@
: 'border-maintenance'} : 'border-maintenance'}
z-0 bg-black/55 p-4 backdrop-blur-sm" z-0 bg-black/55 p-4 backdrop-blur-sm"
> >
<div class="flex flex-row justify-between pb-4"> <div class="flex flex-row justify-between">
<div <div
class="flex flex-row items-center gap-1" class="flex flex-row items-center gap-1"
on:mouseover={() => (hover.title = true)} on:mouseover={() => (hover.title = true)}