mirror of
https://github.com/KevinMidboe/immich.git
synced 2025-10-29 17:40:28 +00:00
feat(web) styling server stats page (#866)
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
export let logo: any;
|
||||
export let title: string;
|
||||
export let value: string;
|
||||
export let unit: string | undefined = undefined;
|
||||
|
||||
$: zeros = () => {
|
||||
let result = '';
|
||||
const maxLength = 9;
|
||||
const valueLength = parseInt(value).toString().length;
|
||||
const zeroLength = maxLength - valueLength;
|
||||
for (let i = 0; i < zeroLength; i++) {
|
||||
result += '0';
|
||||
}
|
||||
return result;
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="w-[180px] h-[140px] bg-immich-gray rounded-3xl p-5 flex flex-col justify-between">
|
||||
<div class="flex place-items-center gap-4">
|
||||
<svelte:component this={logo} size="40" color={'#4250af'} />
|
||||
<p class="text-immich-primary">{title}</p>
|
||||
</div>
|
||||
|
||||
<div class="relative text-center font-mono font-semibold text-2xl">
|
||||
<span class="text-[#DCDADA]">{zeros()}</span><span class="text-immich-primary"
|
||||
>{parseInt(value)}</span
|
||||
>
|
||||
{#if unit}
|
||||
<span class="absolute -top-5 right-2 text-base font-light text-gray-400">{unit}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user