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

chore: replace custom components with footnote and logo components

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-06 15:56:48 +03:00
parent 492c3573d0
commit 0d572708c0
4 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,6 +11,7 @@ import {
import { controlManager } from '$features/SetupFont'; import { controlManager } from '$features/SetupFont';
import { import {
ContentEditable, ContentEditable,
Footnote,
// IconButton, // IconButton,
} from '$shared/ui'; } from '$shared/ui';
// import XIcon from '@lucide/svelte/icons/x'; // import XIcon from '@lucide/svelte/icons/x';
@@ -66,13 +67,13 @@ function removeSample() {
> >
<div class="px-4 sm:px-5 md:px-6 py-2.5 sm:py-3 border-b border-gray-200/60 flex items-center justify-between"> <div class="px-4 sm:px-5 md:px-6 py-2.5 sm:py-3 border-b border-gray-200/60 flex items-center justify-between">
<div class="flex items-center gap-2 sm:gap-2.5"> <div class="flex items-center gap-2 sm:gap-2.5">
<span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.25em] text-gray-500 font-medium"> <Footnote>
typeface_{String(index).padStart(3, '0')} typeface_{String(index).padStart(3, '0')}
</span> </Footnote>
<div class="w-px h-2 sm:h-2.5 bg-gray-300/60"></div> <div class="w-px h-2 sm:h-2.5 bg-gray-300/60"></div>
<span class="font-mono text-[9px] sm:text-[10px] tracking-[0.15em] font-bold uppercase text-gray-900"> <Footnote class="tracking-[0.15em] font-bold text-gray-900">
{font.name} {font.name}
</span> </Footnote>
</div> </div>
<!-- <!--
@@ -101,20 +102,20 @@ function removeSample() {
</div> </div>
<div class="px-4 sm:px-5 md:px-6 py-1.5 sm:py-2 border-t border-gray-200/40 w-full flex flex-row gap-2 sm:gap-4 bg-gray-50/30 mt-auto"> <div class="px-4 sm:px-5 md:px-6 py-1.5 sm:py-2 border-t border-gray-200/40 w-full flex flex-row gap-2 sm:gap-4 bg-gray-50/30 mt-auto">
<span class="text-[7px] sm:text-[8px] font-mono text-gray-400 uppercase tracking-wider ml-auto"> <Footnote class="text-[7px] sm:text-[8px] tracking-wider ml-auto">
SZ:{fontSize}PX SZ:{fontSize}PX
</span> </Footnote>
<div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/40 hidden sm:block"></div> <div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/60 hidden sm:block"></div>
<span class="text-[7px] sm:text-[8px] font-mono text-gray-400 uppercase tracking-wider"> <Footnote class="text-[7px] sm:text-[8px] tracking-wider">
WGT:{fontWeight} WGT:{fontWeight}
</span> </Footnote>
<div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/40 hidden sm:block"></div> <div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/60 hidden sm:block"></div>
<span class="text-[7px] sm:text-[8px] font-mono text-gray-400 uppercase tracking-wider"> <Footnote class="text-[7px] sm:text-[8px] tracking-wider">
LH:{lineHeight?.toFixed(2)} LH:{lineHeight?.toFixed(2)}
</span> </Footnote>
<div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/40 hidden sm:block"></div> <div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/60 hidden sm:block"></div>
<span class="text-[7px] sm:text-[8px] font-mono text-gray-400 uppercase tracking-wider"> <Footnote class="text-[0.4375rem] sm:text-[0.5rem] tracking-wider">
LTR:{letterSpacing} LTR:{letterSpacing}
</span> </Footnote>
</div> </div>
</div> </div>

9
src/routes/Page.svelte
View File

@@ -5,7 +5,10 @@
<script lang="ts"> <script lang="ts">
import { scrollBreadcrumbsStore } from '$entities/Breadcrumb'; import { scrollBreadcrumbsStore } from '$entities/Breadcrumb';
import { cn } from '$shared/shadcn/utils/shadcn-utils'; import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { Section } from '$shared/ui'; import {
Logo,
Section,
} from '$shared/ui';
import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte'; import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
import { FontSearch } from '$widgets/FontSearch'; import { FontSearch } from '$widgets/FontSearch';
import { SampleList } from '$widgets/SampleList'; import { SampleList } from '$widgets/SampleList';
@@ -52,9 +55,7 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
Project_Codename Project_Codename
</span> </span>
{/snippet} {/snippet}
<h2 class={cn('font-[Barlow] font-thin text-5xl sm:text-6xl md:text-7xl lg:text-8xl text-justify [text-align-last:justify] [text-justify:inter-character]')}> <Logo />
GLYPHDIFF
</h2>
</Section> </Section>
<!-- <!--
<Section class="my-12 gap-8" index={1} onTitleStatusChange={handleTitleStatusChanged}> <Section class="my-12 gap-8" index={1} onTitleStatusChange={handleTitleStatusChanged}>

17
src/shared/ui/Section/Section.svelte
View File

@@ -11,6 +11,7 @@ import {
type FlyParams, type FlyParams,
fly, fly,
} from 'svelte/transition'; } from 'svelte/transition';
import { Footnote } from '..';
interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> { interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
/** /**
@@ -91,17 +92,21 @@ $effect(() => {
out:fly={flyParams} out:fly={flyParams}
> >
<div class="flex flex-col gap-2 sm:gap-3" bind:this={titleContainer}> <div class="flex flex-col gap-2 sm:gap-3" bind:this={titleContainer}>
<div class="flex items-center gap-2 sm:gap-3 opacity-60"> <div class="flex items-center gap-2 sm:gap-3">
{#if icon} {#if icon}
{@render icon({ className: 'size-3 sm:size-4 stroke-gray-900 stroke-1' })} {@render icon({ className: 'size-3 sm:size-4 stroke-gray-900 stroke-1 opacity-60' })}
<div class="w-px h-2.5 sm:h-3 bg-gray-400/50"></div> <div class="w-px h-2.5 sm:h-3 bg-gray-300/60"></div>
{/if} {/if}
{#if description} {#if description}
{@render description({ className: 'font-mono text-[9px] sm:text-[10px] uppercase tracking-[0.2em] text-gray-600' })} <Footnote>
{#snippet render({ class: className })}
{@render description({ className })}
{/snippet}
</Footnote>
{:else if typeof index === 'number'} {:else if typeof index === 'number'}
<span class="font-mono text-[9px] sm:text-[10px] uppercase tracking-[0.2em] text-gray-600"> <Footnote>
Component_{String(index).padStart(3, '0')} Component_{String(index).padStart(3, '0')}
</span> </Footnote>
{/if} {/if}
</div> </div>

13
src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
View File

@@ -13,6 +13,7 @@ import {
import { springySlideFade } from '$shared/lib'; import { springySlideFade } from '$shared/lib';
import { cn } from '$shared/shadcn/utils/shadcn-utils'; import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { import {
Footnote,
IconButton, IconButton,
SearchBar, SearchBar,
} from '$shared/ui'; } from '$shared/ui';
@@ -107,14 +108,12 @@ function toggleFilters() {
shadow-[0_1px_3px_rgba(0,0,0,0.04)] shadow-[0_1px_3px_rgba(0,0,0,0.04)]
" "
> >
<div class="flex items-center gap-2 sm:gap-2.5 mb-3 sm:mb-4 opacity-70"> <div class="flex items-center gap-2 sm:gap-2.5 mb-3 sm:mb-4">
<div class="w-1 h-1 rounded-full bg-gray-900"></div> <div class="w-1 h-1 rounded-full bg-gray-900 opacity-70"></div>
<div class="w-px h-2.5 bg-gray-400/50"></div> <div class="w-px h-2.5 bg-gray-300/60"></div>
<span <Footnote>
class="font-mono text-[9px] sm:text-[10px] uppercase tracking-[0.2em] text-gray-500 font-medium"
>
filter_params filter_params
</span> </Footnote>
</div> </div>
<div class="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"> <div class="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">