marsultor/public-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

blog: sharpen cards, search, toc

Browse Source
This commit is contained in:
kbot
2026-07-06 22:06:32 -05:00
parent ca4885301a
commit 76676ddfed
3 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/posts/PostSearch.tsx
View File

@@ -147,7 +147,7 @@ export function PostSearch({ posts }: PostSearchProps) {
return (
<section aria-labelledby="posts-search-heading" className="space-y-8">
<div className="space-y-5 rounded-xl border border-border bg-surface/30 p-4 sm:p-5">
<div className="space-y-5 rounded-lg border border-border bg-surface/30 p-4 sm:p-5">
<div className="space-y-2">
<label id="posts-search-heading" htmlFor="post-search" className="block text-sm font-medium text-ink">
Search posts
@@ -158,7 +158,7 @@ export function PostSearch({ posts }: PostSearchProps) {
type="search"
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder="Search title, excerpt, tag, author, or slug"
placeholder="Search…"
className="min-w-0 flex-1 rounded-lg border border-border bg-canvas px-3 py-2 text-sm text-ink outline-none transition-colors placeholder:text-ink-soft/70 focus:border-accent focus:ring-2 focus:ring-accent/20"
/>
<button
@@ -167,7 +167,7 @@ export function PostSearch({ posts }: PostSearchProps) {
disabled={!query}
className="rounded-lg border border-border px-3 py-2 text-sm text-ink-soft transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:cursor-not-allowed disabled:opacity-50"
>
Clear search
Clear
</button>
</div>
</div>
@@ -185,7 +185,7 @@ export function PostSearch({ posts }: PostSearchProps) {
type="button"
aria-pressed={isSelected}
onClick={() => setSelectedTag(isSelected ? null : tag.slug)}
className="rounded-full border border-border bg-canvas px-3 py-1 text-xs text-ink-soft transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent aria-pressed:border-accent aria-pressed:bg-accent/10 aria-pressed:text-accent"
className="rounded-sm border border-border bg-canvas px-3 py-1 font-mono text-[11px] uppercase tracking-wider text-ink-soft transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent aria-pressed:border-accent aria-pressed:bg-accent/10 aria-pressed:text-accent"
>
{tag.label} <span className="font-mono text-ink-soft/70">{tag.count}</span>
</button>
@@ -209,7 +209,7 @@ export function PostSearch({ posts }: PostSearchProps) {
}}
className="self-start rounded-lg border border-border px-3 py-1.5 text-sm text-ink-soft transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent sm:self-auto"
>
Clear filters
Clear
</button>
)}
</div>
@@ -222,7 +222,7 @@ export function PostSearch({ posts }: PostSearchProps) {
))}
</div>
) : (
<p className="text-ink-soft">No posts match your search.</p>
<p className="text-ink-soft">No matches.</p>
)}
</section>
)