ProjectSegfault/website
4
2
Fork 1
mirror of https://github.com/ProjectSegfault/website.git synced 2024-12-24 05:59:50 +05:30
Code Issues Projects Releases Wiki Activity

add second instances

Browse Source
This commit is contained in:
Akis 2022-11-20 20:12:38 +02:00
parent 56369d2d6a
commit c52f4923ff
Signed by untrusted user: akis
GPG Key ID: 267BF5C6677944ED
2 changed files with 43 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/routes/instances/+page.svelte
View File

@ -1,7 +1,8 @@
<script lang="ts">
import { CardInner, CardOuter, LinksOuter, Link } from "$lib/Card";
import { CardInner, CardOuter, LinksOuter } from "$lib/Card";
import InstanceLink from "./InstanceLink.svelte";
import dayjs from "dayjs";
import type { PageData } from "../$types";
import type { PageData } from "./$types";
export let data: PageData;
</script>
@ -21,24 +22,19 @@
{#each group.data as item}
<CardInner
title={item.name}
position={item.status === 200 ? "Up" : "Down"}
positionStyles={item.status === 200 ? "color: #4ade80;" : "color: #f87171;"}
description={item.description}
icon={item.icon}
>
<LinksOuter>
<Link url={item.link} class="web">
<div class="withText">
<div class="i-fa6-solid:globe" />
<span>Instance link</span>
</div>
</Link>
<Link url={item.project} class="link">
<div class="withText">
<div class="i-fa6-solid:circle-info" />
<span>Project website</span>
</div>
</Link>
<InstanceLink url={item.link} {item} type="main" />
{#if item.us}
<InstanceLink url={item.us} {item} type="us" />
{/if}
{#if item.backup}
<InstanceLink url={item.backup} {item} type="backup" />
{/if}
</LinksOuter>
</CardInner>
{/each}
@ -65,11 +61,4 @@
flex-wrap: wrap;
gap: 2rem;
}
.withText {
display: flex;
align-items: center;
gap: 4px;
font-size: medium;
}
</style>

31
src/routes/instances/InstanceLink.svelte Normal file
View File

@ -0,0 +1,31 @@
<script lang="ts">
import { Link } from "$lib/Card";
export let url: string;
export let item: any;
export let type: "main" | "us" | "backup";
</script>
<Link {url} class="web {item.status === 200 ? "" : "pointer-events-none cursor-default opacity-50"}">
<div class="withText">
<div class="{item.status === 200 ? "i-fa6-solid:arrow-up-right-from-square" : "i-fa6-solid:xmark"}" />
<span>
{#if type === "main"}
Visit
{:else if type === "us"}
US
{:else if type === "backup"}
Backup
{/if}
</span>
</div>
</Link>
<style>
.withText {
display: flex;
align-items: center;
gap: 4px;
font-size: medium;
}
</style>