glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(FontSamler): rewrite component to use existed shared ui label wrappers

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-27 18:42:20 +03:00
parent 2046394906
commit 5946f66e69
1 changed files with 35 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
View File

@@ -10,8 +10,12 @@ import {
} from '$entities/Font';
import { controlManager } from '$features/SetupFont';
import {
Badge,
ContentEditable,
Divider,
Footnote,
Stat,
StatGroup,
} from '$shared/ui';
import { fly } from 'svelte/transition';
@@ -46,10 +50,12 @@ const stats = $derived([
in:fly={{ y: 20, duration: 400, delay: index * 50 }}
class="
group relative
w-full h-full
bg-paper dark:bg-dark-card
border border-black/5 dark:border-white/10
hover:border-brand dark:hover:border-brand
hover:shadow-[5px_5px_0px_0px_theme('colors.brand')]
hover:shadow-brand/10
hover:shadow-[5px_5px_0px_0px]
transition-all duration-200
overflow-hidden
flex flex-col
@@ -68,12 +74,11 @@ const stats = $derived([
"
>
<!-- Left: index · name · type badge -->
<div class="flex items-center gap-2 sm:gap-4 min-w-0">
<div class="flex items-center gap-2 sm:gap-4 min-w-0 shrink-0">
<span class="font-mono text-[0.625rem] tracking-widest text-neutral-400 uppercase leading-none shrink-0">
{String(index + 1).padStart(2, '0')}
</span>
<div class="w-px h-3 bg-black/10 dark:bg-white/10 shrink-0"></div>
<Divider orientation="vertical" class="h-3 shrink-0" />
<span
class="font-primary font-bold text-sm text-swiss-black dark:text-neutral-200 leading-none tracking-tight uppercase truncate"
@@ -82,37 +87,34 @@ const stats = $derived([
</span>
{#if fontType}
<span
class="
hidden sm:inline-block shrink-0
px-2 py-0.5
border border-black/10 dark:border-white/10 rounded-full
text-[0.5rem] font-secondary font-medium uppercase
text-neutral-500 tracking-wide leading-none
"
>
<Badge size="xs" variant="default" class="text-nowrap font-mono">
{fontType}
</span>
</Badge>
{/if}
</div>
<!-- Right: stats, hidden on mobile, fade in on group hover -->
<div class="hidden md:flex items-center gap-3 lg:gap-4 opacity-50 group-hover:opacity-100 transition-opacity duration-200 shrink-0 ml-4">
{#each stats as stat, i}
<div class="flex items-center gap-1">
<span class="font-mono text-[0.5rem] tracking-widest text-neutral-400 uppercase">
{stat.label}:
</span>
<span
class="font-mono text-[0.5rem] font-bold tracking-widest text-swiss-black dark:text-neutral-200 uppercase"
>
{stat.value}
</span>
</div>
{#if i < stats.length - 1}
<div class="w-px h-2 bg-black/10 dark:bg-white/10"></div>
{/if}
{/each}
<div
class="
flex-1 min-w-0
hidden md:block @container
opacity-50 group-hover:opacity-100
transition-opacity duration-200 ml-4
"
>
<!-- Switches: narrow → 2×2, wide enough → 1 row -->
<div
class="
max-w-64 ml-auto
grid grid-cols-2 gap-x-3 gap-y-2
@[160px]:grid-cols-4 @[160px]:gap-y-0
items-center
"
>
{#each stats as stat}
<Stat label={stat.label} value={stat.value} />
{/each}
</div>
</div>
</div>
@@ -143,10 +145,11 @@ const stats = $derived([
<!-- ── Red hover line ─────────────────────────────────────────────── -->
<div
class="
absolute bottom-0 left-0
absolute bottom-0 left-0 right-0
w-full h-0.5 bg-brand
scale-x-0 group-hover:scale-x-100
transition-transform origin-left duration-300
transition-transform cubic-bezier(0.25, 0.1, 0.25, 1) origin-left duration-400
z-10
"
>
</div>