mirror of
https://github.com/immich-app/immich.git
synced 2026-01-15 22:42:31 -08:00
feat(web): 2026 font
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user