mirror of
https://github.com/vinliao/nashboard-old.git
synced 2025-12-22 15:14:53 +01:00
implement basic home components
This commit is contained in:
Vincent Liao
14
src/lib/Activity.svelte
Normal file
14
src/lib/Activity.svelte
Normal file
@@ -0,0 +1,14 @@
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<div class="rounded-md shadow border p-3">
|
||||
<span class="block text-center pb-3">NETWORK ACTIVITY (24H, UTC)</span>
|
||||
<div class="flex flex-col">
|
||||
{#each Array(24) as _}
|
||||
<div class="flex p-2">
|
||||
<span class="flex-1 text-center">1300</span>
|
||||
<span class="flex-1 text-center">24 events</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
13
src/lib/Count.svelte
Normal file
13
src/lib/Count.svelte
Normal file
@@ -0,0 +1,13 @@
|
||||
<div class="rounded-md shadow border p-3">
|
||||
<span class="block text-center pb-3">TOTAL EVENTS</span>
|
||||
<div class="flex">
|
||||
<div class="flex-1">
|
||||
<span class="block text-center text-slate-400">1h</span>
|
||||
<span class="block text-center text-4xl">30</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<span class="block text-center text-slate-400">24h</span>
|
||||
<span class="block text-center text-4xl">999</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,102 +0,0 @@
|
||||
<script>
|
||||
import { spring } from 'svelte/motion';
|
||||
|
||||
let count = 0;
|
||||
|
||||
const displayed_count = spring();
|
||||
$: displayed_count.set(count);
|
||||
$: offset = modulo($displayed_count, 1);
|
||||
|
||||
function modulo(n, m) {
|
||||
// handle negative numbers
|
||||
return ((n % m) + m) % m;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="counter">
|
||||
<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
|
||||
<svg aria-hidden="true" viewBox="0 0 1 1">
|
||||
<path d="M0,0.5 L1,0.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="counter-viewport">
|
||||
<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
|
||||
<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
|
||||
<strong>{Math.floor($displayed_count)}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
|
||||
<svg aria-hidden="true" viewBox="0 0 1 1">
|
||||
<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.counter {
|
||||
display: flex;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.counter button {
|
||||
width: 2em;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
color: var(--text-color);
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.counter button:hover {
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
}
|
||||
|
||||
path {
|
||||
vector-effect: non-scaling-stroke;
|
||||
stroke-width: 2px;
|
||||
stroke: var(--text-color);
|
||||
}
|
||||
|
||||
.counter-viewport {
|
||||
width: 8em;
|
||||
height: 4em;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.counter-viewport strong {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-weight: 400;
|
||||
color: var(--accent-color);
|
||||
font-size: 4rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.counter-digits {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
top: -100%;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
14
src/lib/Relay.svelte
Normal file
14
src/lib/Relay.svelte
Normal file
@@ -0,0 +1,14 @@
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<div class="rounded-md shadow border p-3">
|
||||
<span class="block text-center pb-3">EVENTS PER RELAY (24H)</span>
|
||||
<div class="flex flex-col">
|
||||
{#each Array(5) as _}
|
||||
<div class="flex p-2">
|
||||
<span class="flex-1 mr-10 break-words">wss://relay-name.com</span>
|
||||
<span class="flex-initial">999 events</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@@ -6,7 +6,7 @@
|
||||
<header />
|
||||
|
||||
<main>
|
||||
<div class="px-1">
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -1,16 +1,15 @@
|
||||
<script context="module">
|
||||
export const prerender = true;
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import Counter from '$lib/Counter.svelte';
|
||||
import Count from '$lib/Count.svelte';
|
||||
import Activity from '$lib/Activity.svelte';
|
||||
import Relay from '$lib/Relay.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Home</title>
|
||||
</svelte:head>
|
||||
|
||||
<section>
|
||||
<p class="text-3xl">first time using sveltekit</p>
|
||||
<p class="underline">from tailwind</p>
|
||||
<div class="m-2">
|
||||
<Count/>
|
||||
<div class="mb-3"></div>
|
||||
<Relay/>
|
||||
<div class="mb-3"></div>
|
||||
<Activity/>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user