mirror of
https://github.com/vinliao/nashboard-old.git
synced 2025-12-22 07:04:58 +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 />
|
<header />
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div class="px-1">
|
<div>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -1,16 +1,15 @@
|
|||||||
<script context="module">
|
|
||||||
export const prerender = true;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<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>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
|
||||||
<title>Home</title>
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<p class="text-3xl">first time using sveltekit</p>
|
<div class="m-2">
|
||||||
<p class="underline">from tailwind</p>
|
<Count/>
|
||||||
</section>
|
<div class="mb-3"></div>
|
||||||
|
<Relay/>
|
||||||
|
<div class="mb-3"></div>
|
||||||
|
<Activity/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user