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

59
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,46 +64,74 @@ function toggleFilters() {
} }
</script> </script>
<div class="flex flex-col gap-2 relative"> <div class="flex flex-col gap-3 relative">
<div class="relative">
<SearchBar <SearchBar
id="font-search" id="font-search"
class="w-full" class="w-full"
placeholder="Search fonts by name..." placeholder="search_typefaces..."
label="query_input"
bind:value={filterManager.queryValue} bind:value={filterManager.queryValue}
bind:isOpen bind:isOpen
> />
<SuggestedFonts />
</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">
<div class="w-px h-5 bg-gray-300/60"></div>
<div style:transform="scale({transform.current.scale})">
<Button <Button
class={cn( class={cn(
'cursor-pointer will-change-transform hover:bg-inherit hover:*:stroke-indigo-500', 'w-9 h-9 rounded-lg flex items-center justify-center',
showFilters ? 'hover:*:stroke-indigo-500/80' : 'hover:*:stroke-indigo-500', 'transition-all duration-200',
'hover:bg-gray-100',
showFilters
? 'bg-gray-100 ring-1 ring-gray-300/50'
: 'bg-transparent',
)} )}
variant="ghost" variant="ghost"
size="icon" size="icon"
onclick={toggleFilters} onclick={toggleFilters}
> >
<FunnelIcon <SlidersHorizontalIcon
class={cn( class={cn(
'size-8 stroke-indigo-600/50 transition-all duration-150', 'size-4 transition-colors duration-200',
showFilters ? 'stroke-indigo-600' : 'stroke-indigo-600/50', showFilters ? 'stroke-gray-900' : 'stroke-gray-500',
)} )}
/> />
</Button> </Button>
</div> </div>
</div> </div>
</div>
</div>
{#if showFilters} {#if showFilters}
<div <div
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
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 /> <Filters />
<FilterControls class="ml-auto py-1" /> </div>
<div class="mt-4 pt-4 border-t border-gray-300/40">
<FilterControls class="ml-auto" />
</div>
</div> </div>
</div> </div>
{/if} {/if}