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

feat(FontSearch): refactor component styles

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-01 11:57:56 +03:00
parent d94e3cefb2
commit eed3339b0d
1 changed files with 61 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,8 @@ import { springySlideFade } from '$shared/lib';
import { Button } from '$shared/shadcn/ui/button';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { SearchBar } from '$shared/ui';
import FunnelIcon from '@lucide/svelte/icons/funnel';
import SlidersHorizontalIcon from '@lucide/svelte/icons/sliders-horizontal';
import { onMount } from 'svelte';
import { cubicOut } from 'svelte/easing';
import {
@@ -63,35 +64,43 @@ function toggleFilters() {
}
</script>
<div class="flex flex-col gap-2 relative">
<SearchBar
id="font-search"
class="w-full"
placeholder="Search fonts by name..."
bind:value={filterManager.queryValue}
bind:isOpen
>
<SuggestedFonts />
</SearchBar>
<div class="flex flex-col gap-3 relative">
<div class="relative">
<SearchBar
id="font-search"
class="w-full"
placeholder="search_typefaces..."
label="query_input"
bind:value={filterManager.queryValue}
bind:isOpen
/>
<div class="absolute right-5 top-10 translate-y-[-50%] pl-5 border-l-2">
<div style:transform="scale({transform.current.scale}) rotate({transform.current.rotate}deg)">
<Button
class={cn(
'cursor-pointer will-change-transform hover:bg-inherit hover:*:stroke-indigo-500',
showFilters ? 'hover:*:stroke-indigo-500/80' : 'hover:*:stroke-indigo-500',
)}
variant="ghost"
size="icon"
onclick={toggleFilters}
>
<FunnelIcon
class={cn(
'size-8 stroke-indigo-600/50 transition-all duration-150',
showFilters ? 'stroke-indigo-600' : 'stroke-indigo-600/50',
)}
/>
</Button>
<div class="absolute right-4 top-1/2 translate-y-[-50%] z-10">
<div class="flex items-center gap-2">
<div class="w-px h-5 bg-gray-300/60"></div>
<div style:transform="scale({transform.current.scale})">
<Button
class={cn(
'w-9 h-9 rounded-lg flex items-center justify-center',
'transition-all duration-200',
'hover:bg-gray-100',
showFilters
? 'bg-gray-100 ring-1 ring-gray-300/50'
: 'bg-transparent',
)}
variant="ghost"
size="icon"
onclick={toggleFilters}
>
<SlidersHorizontalIcon
class={cn(
'size-4 transition-colors duration-200',
showFilters ? 'stroke-gray-900' : 'stroke-gray-500',
)}
/>
</Button>
</div>
</div>
</div>
</div>
@@ -100,9 +109,29 @@ function toggleFilters() {
transition:springySlideFade|local={slideConfig}
class="will-change-[height,opacity] contain-layout overflow-hidden"
>
<div class="grid gap-1 grid-cols-[repeat(auto-fit,minmax(8em,14em))]">
<Filters />
<FilterControls class="ml-auto py-1" />
<div
class="
p-4 rounded-xl
backdrop-blur-md bg-white/80
border border-gray-300/50
shadow-[0_1px_3px_rgba(0,0,0,0.04)]
"
>
<div class="flex items-center gap-2.5 mb-4 opacity-70">
<div class="w-1 h-1 rounded-full bg-gray-900"></div>
<div class="w-px h-2.5 bg-gray-400/50"></div>
<span class="font-mono text-[9px] uppercase tracking-[0.2em] text-gray-500 font-medium">
filter_params
</span>
</div>
<div class="grid gap-3 grid-cols-[repeat(auto-fit,minmax(8em,14em))]">
<Filters />
</div>
<div class="mt-4 pt-4 border-t border-gray-300/40">
<FilterControls class="ml-auto" />
</div>
</div>
</div>
{/if}