ProjectSegfault/website
4
2
Fork 1
mirror of https://github.com/ProjectSegfault/website.git synced 2024-11-23 00:22:59 +05:30
Code Issues 1 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"> <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 dayjs from "dayjs";
import type { PageData } from "../$types"; import type { PageData } from "./$types";
export let data: PageData; export let data: PageData;
</script> </script>
@ -21,24 +22,19 @@
{#each group.data as item} {#each group.data as item}
<CardInner <CardInner
title={item.name} title={item.name}
position={item.status === 200 ? "Up" : "Down"}
positionStyles={item.status === 200 ? "color: #4ade80;" : "color: #f87171;"}
description={item.description} description={item.description}
icon={item.icon} icon={item.icon}
> >
<LinksOuter> <LinksOuter>
<Link url={item.link} class="web"> <InstanceLink url={item.link} {item} type="main" />
<div class="withText">
<div class="i-fa6-solid:globe" /> {#if item.us}
<span>Instance link</span> <InstanceLink url={item.us} {item} type="us" />
</div> {/if}
</Link>
<Link url={item.project} class="link"> {#if item.backup}
<div class="withText"> <InstanceLink url={item.backup} {item} type="backup" />
<div class="i-fa6-solid:circle-info" /> {/if}
<span>Project website</span>
</div>
</Link>
</LinksOuter> </LinksOuter>
</CardInner> </CardInner>
{/each} {/each}
@ -65,11 +61,4 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: 2rem; gap: 2rem;
} }
.withText {
display: flex;
align-items: center;
gap: 4px;
font-size: medium;
}
</style> </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>