39 lines
906 B
Svelte
39 lines
906 B
Svelte
<script lang="ts">
|
|
import type { BoxContent } from "$lib/types/boxContent";
|
|
import { check } from "$lib/scripts/statusChecks";
|
|
import IndicatorDot from "./indicatorDot.svelte";
|
|
|
|
export let boxData: BoxContent
|
|
|
|
if (boxData.img === "auto") {
|
|
boxData.img = `/img/box/${boxData.name.toLowerCase()}.svg`
|
|
}
|
|
</script>
|
|
|
|
<a href="{boxData.link}">
|
|
<div class="box">
|
|
<header>
|
|
{boxData.name.toUpperCase()}
|
|
{#await check(boxData.name)}
|
|
...
|
|
{:then status}
|
|
<IndicatorDot {status} />
|
|
{/await}
|
|
</header>
|
|
</div>
|
|
</a>
|
|
|
|
<style>
|
|
a {
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
.box {
|
|
display: flex;
|
|
background-color: rgba(64,64,64,0.6);
|
|
margin: 10px 10px;
|
|
padding: 10px 10px;
|
|
width: 90%;
|
|
border-radius: 30px;
|
|
}
|
|
</style> |