feat(web): 2026 font

This commit is contained in:
Alex Tran
2026-01-10 03:22:57 +00:00
parent e8c80d88a5
commit 640e32e1fc
19 changed files with 49 additions and 49 deletions

View File

@@ -13,8 +13,7 @@
const { stats }: Props = $props();
const zeros = (value: number) => {
const maxLength = 13;
const zeros = (value: number, maxLength = 13) => {
const valueLength = value.toString().length;
const zeroLength = maxLength - valueLength;
@@ -40,38 +39,35 @@
<div class="flex flex-wrap gap-x-12">
<div class="flex flex-1 place-items-center gap-4 text-primary">
<Icon icon={mdiCameraIris} size="25" />
<Text fontWeight="bold" class="uppercase">{$t('photos')}</Text>
<Text fontWeight="semi-bold">{$t('photos')}</Text>
</div>
<div class="relative text-center font-mono text-2xl font-semibold">
<span class="text-gray-400 dark:text-gray-600">{zeros(stats.photos)}</span><span class="text-primary"
>{stats.photos}</span
>
<div class="relative text-center font-immich-mono text-2xl font-semibold">
<span class="text-light-300">{zeros(stats.photos)}</span><span class="text-primary">{stats.photos}</span>
</div>
</div>
<div class="flex flex-wrap gap-x-12">
<div class="flex flex-1 place-items-center gap-4 text-primary">
<Icon icon={mdiPlayCircle} size="25" />
<Text fontWeight="bold" class="uppercase">{$t('videos')}</Text>
<Text fontWeight="semi-bold">{$t('videos')}</Text>
</div>
<div class="relative text-center font-mono text-2xl font-semibold">
<span class="text-gray-400 dark:text-gray-600">{zeros(stats.videos)}</span><span class="text-primary"
>{stats.videos}</span
>
<div class="relative text-center font-immich-mono text-2xl font-semibold">
<span class="text-light-300">{zeros(stats.videos)}</span><span class="text-primary">{stats.videos}</span>
</div>
</div>
<div class="flex flex-wrap gap-x-5">
<div class="flex flex-1 flex-nowrap place-items-center gap-4 text-primary">
<Icon icon={mdiChartPie} size="25" />
<Text fontWeight="bold" class="uppercase">{$t('storage')}</Text>
<Text fontWeight="semi-bold">{$t('storage')}</Text>
</div>
<div class="relative flex text-center font-mono text-2xl font-semibold">
<span class="text-gray-400 dark:text-gray-600">{zeros(statsUsage)}</span><span class="text-primary"
>{statsUsage}</span
>
<Code color="muted" class="font-light">{statsUsageUnit}</Code>
<div class="relative flex text-center font-immich-mono text-2xl font-semibold">
<span class="text-light-300">{zeros(statsUsage)}</span><span class="text-primary">{statsUsage}</span>
<div class="absolute -right-1.5 -bottom-4">
<Code color="muted" class="text-xs font-light font-immich-mono">{statsUsageUnit}</Code>
</div>
</div>
</div>
</div>