forked from ProjectSegfault/website
add second instances
This commit is contained in:
parent
56369d2d6a
commit
c52f4923ff
@ -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
31
src/routes/instances/InstanceLink.svelte
Normal 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>
|
Loading…
Reference in New Issue
Block a user