nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed cursor + search

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-16 17:31:39 +02:00
parent 458ef7612d
commit a731a5f50f
3 changed files with 177 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/react/Search.tsx
+9 -9
View File
@@ -153,25 +153,25 @@ export default function Search() {
{open && (
<div
className="fixed inset-0 z-[200] flex items-start justify-center pt-[10vh] md:pt-[15vh] px-4"
className="search-overlay fixed inset-0 z-[200] flex items-start justify-center pt-[10vh] md:pt-[15vh] px-4"
role="dialog"
aria-modal="true"
aria-label="Search the catalogue"
onClick={() => setOpen(false)}
>
<div
className="absolute inset-0 bg-[var(--crust)]/55 backdrop-blur-md"
className="search-backdrop absolute inset-0 bg-[var(--crust)]/55 backdrop-blur-md"
aria-hidden="true"
/>
<div
className="relative w-full max-w-xl bg-[var(--base)] text-[var(--text)] border border-[var(--surface2)] overflow-hidden flex flex-col max-h-[70vh] animate-in fade-in slide-in-from-top-4 duration-200"
className="search-panel relative w-full max-w-xl bg-[var(--base)] text-[var(--text)] border border-[var(--surface2)] overflow-hidden flex flex-col max-h-[70vh] animate-in fade-in slide-in-from-top-4 duration-200"
style={{
borderRadius: 2,
boxShadow: '0 30px 60px -20px rgba(0,0,0,0.55), 0 8px 20px -8px rgba(0,0,0,0.3), inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent)',
}}
onClick={e => e.stopPropagation()}
>
<div className="flex items-center gap-3 px-4 py-3 border-b border-[var(--surface2)]/60 bg-[var(--surface0)]/40">
<div className="search-bar flex items-center gap-3 px-4 py-3 border-b border-[var(--surface2)]/60 bg-[var(--surface0)]/40">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
@@ -196,7 +196,7 @@ export default function Search() {
onKeyDown={onInputKey}
placeholder="Search the catalogue…"
aria-label="Search query"
className="flex-1 bg-transparent outline-none text-base text-[var(--text)] placeholder:text-[var(--subtext0)] font-display italic"
className="search-input flex-1 bg-transparent outline-none text-base text-[var(--text)] placeholder:text-[var(--subtext0)] font-display italic"
/>
<kbd className="text-[10px] font-mono text-[var(--subtext0)] px-1.5 py-0.5 border border-[var(--surface2)] bg-[var(--surface0)]/60" style={{ borderRadius: 1 }}>
Esc
@@ -216,7 +216,7 @@ export default function Search() {
</div>
)}
{!loading && !error && results.length > 0 && (
<ul ref={listRef} className="py-1">
<ul ref={listRef} className="search-list py-1">
{results.map((p, i) => {
const title = p.title || formatSlug(p.slug);
const active = i === activeIdx;
@@ -225,9 +225,9 @@ export default function Search() {
key={p.slug}
onMouseEnter={() => setActiveIdx(i)}
onClick={() => navigate(p.slug)}
className={`px-4 py-3 cursor-pointer border-l-2 transition-colors ${
className={`search-result px-4 py-3 cursor-pointer border-l-2 transition-colors ${
active
? 'bg-[var(--surface0)] border-[var(--mauve)]'
? 'search-result--active bg-[var(--surface0)] border-[var(--mauve)]'
: 'border-transparent hover:bg-[var(--surface0)]/60'
}`}
>
@@ -254,7 +254,7 @@ export default function Search() {
)}
</div>
<div className="flex items-center justify-between px-4 py-2 border-t border-[var(--surface2)]/60 text-[10px] text-[var(--subtext0)] bg-[var(--surface0)]/40 font-display italic">
<div className="search-foot flex items-center justify-between px-4 py-2 border-t border-[var(--surface2)]/60 text-[10px] text-[var(--subtext0)] bg-[var(--surface0)]/40 font-display italic">
<div className="flex items-center gap-3">
<span className="flex items-center gap-1">
<kbd className="font-mono px-1 border border-[var(--surface2)] bg-[var(--surface0)]/60 not-italic" style={{ borderRadius: 1 }}>↑↓</kbd>