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