upend/ui/src/views/Home.svelte

63 lines
1.2 KiB
Svelte
Raw Normal View History

2021-11-11 23:37:42 +01:00
<script lang="ts">
import { Link } from "svelte-navigator";
import type { IFile, VaultInfo } from "upend/types";
let infoData: VaultInfo | undefined;
let latestFiles: IFile[] = [];
fetch("/api/info").then(async (response) => {
infoData = await response.json();
});
fetch("/api/files/latest").then(async (response) => {
latestFiles = await response.json();
});
</script>
<div class="home">
<h1>
Welcome to <em> "{infoData?.name || "UpEnd"}" </em>
</h1>
{#if latestFiles}
<section class="latest">
<h2>Most recently added files</h2>
<ul>
{#each latestFiles as file}
<li>
<div class="file-added">{file.added}</div>
<Link to="/browse/{file.hash}">
<div class="file-path">{file.path}</div>
</Link>
</li>
{/each}
</ul>
</section>
{/if}
</div>
<style lang="scss">
h1 {
text-align: center;
font-weight: normal;
}
.latest {
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
& > * {
margin: 0.1em 0.25em;
}
}
.file-added {
opacity: 0.77;
}
}
</style>