valknar/sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: apply consistent search/filter style to tags page
All checks were successful
Build and Push Frontend Image / build (push) Successful in 1m18s
Details

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-12 17:36:37 +01:00
parent 8d35202cbf
commit 6d1726ee97
1 changed files with 16 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/frontend/src/routes/tags/[tag]/+page.svelte
View File

@@ -3,7 +3,7 @@
import { Button } from "$lib/components/ui/button"; import { Button } from "$lib/components/ui/button";
import { Card, CardContent } from "$lib/components/ui/card"; import { Card, CardContent } from "$lib/components/ui/card";
import { Input } from "$lib/components/ui/input"; import { Input } from "$lib/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select"; import { FilterPills } from "$lib/components/ui/filter-pills";
import { getAssetUrl } from "$lib/api"; import { getAssetUrl } from "$lib/api";
import Meta from "$lib/components/meta/meta.svelte"; import Meta from "$lib/components/meta/meta.svelte";
import SexyBackground from "$lib/components/background/background.svelte"; import SexyBackground from "$lib/components/background/background.svelte";
@@ -60,41 +60,31 @@
title={$_("tags.title", { values: { tag: data.tag } })} title={$_("tags.title", { values: { tag: data.tag } })}
description={$_("tags.description", { values: { tag: data.tag } })} description={$_("tags.description", { values: { tag: data.tag } })}
> >
<div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto"> <div class="flex flex-col gap-5 max-w-2xl mx-auto">
<div class="relative flex-1"> <div class="relative">
<span <span
class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" class="icon-[ri--search-line] absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground"
></span> ></span>
<Input <Input
placeholder={$_("tags.search_placeholder")} placeholder={$_("tags.search_placeholder")}
bind:value={searchQuery} bind:value={searchQuery}
class="pl-10 bg-background/50 border-primary/20 focus:border-primary" class="pl-12 h-14 text-lg bg-card/50 border-primary/20 focus:border-primary"
/> />
</div> </div>
<Select type="single" bind:value={categoryFilter}> <FilterPills
<SelectTrigger value={categoryFilter}
class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary" options={[
> { value: "all", label: $_("tags.categories.all") },
<span class="icon-[ri--filter-line] w-4 h-4 mr-2"></span> { value: "video", label: $_("tags.categories.video") },
{categoryFilter === "all" { value: "article", label: $_("tags.categories.article") },
? $_("tags.categories.all") { value: "model", label: $_("tags.categories.model") },
: categoryFilter === "video" ]}
? $_("tags.categories.video") onchange={(v) => (categoryFilter = v)}
: categoryFilter === "article" />
? $_("tags.categories.article")
: $_("tags.categories.model")}
</SelectTrigger>
<SelectContent>
<SelectItem value="all">{$_("tags.categories.all")}</SelectItem>
<SelectItem value="video">{$_("tags.categories.video")}</SelectItem>
<SelectItem value="article">{$_("tags.categories.article")}</SelectItem>
<SelectItem value="model">{$_("tags.categories.model")}</SelectItem>
</SelectContent>
</Select>
</div> </div>
</PageHero> </PageHero>
<!-- Items Grid --> <!-- Items Grid -->
<div class="container mx-auto px-4 py-12"> <div class="container mx-auto px-4 pt-6 pb-12">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{#each filteredItems() as item (item.slug)} {#each filteredItems() as item (item.slug)}
<a href={getUrlForItem(item)} class="block group"> <a href={getUrlForItem(item)} class="block group">