191 lines
10 KiB
JavaScript
191 lines
10 KiB
JavaScript
import React from 'react'
|
|
|
|
const OPENING_OR_OPEN = new Set(['opening', 'open'])
|
|
|
|
export default function SearchOverlay({
|
|
phase,
|
|
query,
|
|
inputRef,
|
|
loading,
|
|
artworks,
|
|
users,
|
|
tags,
|
|
activeIdx,
|
|
onQueryChange,
|
|
onClose,
|
|
onSubmit,
|
|
onKeyDown,
|
|
onNavigate,
|
|
}) {
|
|
if (phase === 'closed') return null
|
|
|
|
const hasResults = artworks.length > 0 || users.length > 0 || tags.length > 0
|
|
const isVisible = OPENING_OR_OPEN.has(phase)
|
|
|
|
return (
|
|
<div
|
|
className={`fixed inset-0 z-[1000] md:hidden transition-opacity ${isVisible ? 'opacity-100' : 'opacity-0'} ${phase === 'closing' ? 'duration-150' : 'duration-200'} ease-out`}
|
|
aria-modal="true"
|
|
role="dialog"
|
|
aria-label="Search overlay"
|
|
>
|
|
<div className="absolute inset-0 bg-nova/95 backdrop-blur-sm" onClick={onClose} aria-hidden="true" />
|
|
|
|
<div className={`relative h-full w-full bg-nova border-t border-white/[0.06] transform transition-transform ${isVisible ? 'translate-y-0' : '-translate-y-3'} ${phase === 'closing' ? 'duration-150' : 'duration-200'} ease-out`}>
|
|
<form onSubmit={onSubmit} role="search" className="h-full">
|
|
<div className="h-[72px] px-3 border-b border-white/[0.08] flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
aria-label="Back"
|
|
className="w-11 h-11 rounded-lg inline-flex items-center justify-center text-white/80 hover:bg-white/10 hover:text-white transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.25">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15 18l-6-6 6-6" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div className="relative flex-1">
|
|
<svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-soft pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
|
|
</svg>
|
|
<input
|
|
ref={inputRef}
|
|
type="search"
|
|
value={query}
|
|
onChange={(e) => onQueryChange(e.target.value)}
|
|
onKeyDown={onKeyDown}
|
|
placeholder="Search artworks, creators, tags..."
|
|
aria-label="Search"
|
|
aria-autocomplete="list"
|
|
aria-controls="sb-mobile-suggestions"
|
|
aria-activedescendant={activeIdx >= 0 ? `sb-mobile-item-${activeIdx}` : undefined}
|
|
autoComplete="off"
|
|
className="w-full h-11 bg-white/[0.06] border border-white/[0.12] rounded-lg py-0 pl-9 pr-9 text-sm text-white placeholder-soft outline-none focus:border-accent focus:ring-1 focus:ring-accent/30 transition-colors"
|
|
/>
|
|
{loading && (
|
|
<svg className="absolute right-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 animate-spin text-soft" fill="none" viewBox="0 0 24 24" aria-hidden="true">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"/>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
aria-label="Close search"
|
|
className="w-11 h-11 rounded-lg inline-flex items-center justify-center text-white/80 hover:bg-white/10 hover:text-white transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.25">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="overflow-y-auto overscroll-contain" style={{ height: 'calc(100vh - 72px)' }}>
|
|
{hasResults ? (
|
|
<ul
|
|
id="sb-mobile-suggestions"
|
|
role="listbox"
|
|
aria-label="Search suggestions"
|
|
className="mx-2 my-2 px-2 py-2 rounded-xl border border-white/[0.10] bg-nova-900/95 backdrop-blur-sm shadow-2xl"
|
|
>
|
|
{artworks.length > 0 && (
|
|
<>
|
|
<li role="presentation" className="px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wider text-white/35 select-none">Artworks</li>
|
|
{artworks.map((item, i) => (
|
|
<li key={item.slug ?? i} role="option" id={`sb-mobile-item-${i}`} aria-selected={activeIdx === i}>
|
|
<button
|
|
type="button"
|
|
onClick={() => onNavigate({ type: 'artwork', ...item })}
|
|
className={`w-full min-h-12 flex items-center gap-3 px-3 py-2 text-left rounded-lg transition-colors ${activeIdx === i ? 'bg-white/[0.14]' : 'hover:bg-white/[0.08]'}`}
|
|
>
|
|
{item.thumbnail_url ? (
|
|
<img src={item.thumbnail_url} alt="" aria-hidden="true" className="w-10 h-10 rounded-lg object-cover shrink-0" loading="lazy" />
|
|
) : (
|
|
<span className="w-10 h-10 rounded-lg bg-white/[0.04] border border-white/[0.08] shrink-0" aria-hidden="true" />
|
|
)}
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-medium text-white truncate">{item.title}</div>
|
|
{item.author?.name && <div className="text-xs text-neutral-400 truncate">by {item.author.name}</div>}
|
|
</div>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</>
|
|
)}
|
|
|
|
{users.length > 0 && (
|
|
<>
|
|
<li role="presentation" className={`px-3 pb-1 text-[10px] font-semibold uppercase tracking-wider text-white/35 select-none ${artworks.length > 0 ? 'pt-2 border-t border-white/[0.06]' : 'pt-2'}`}>Creators</li>
|
|
{users.map((user, j) => {
|
|
const flatIdx = artworks.length + j
|
|
return (
|
|
<li key={user.username} role="option" id={`sb-mobile-item-${flatIdx}`} aria-selected={activeIdx === flatIdx}>
|
|
<button
|
|
type="button"
|
|
onClick={() => onNavigate({ type: 'user', ...user })}
|
|
className={`w-full min-h-12 flex items-center gap-3 px-3 py-2 text-left rounded-lg transition-colors ${activeIdx === flatIdx ? 'bg-white/[0.14]' : 'hover:bg-white/[0.08]'}`}
|
|
>
|
|
<img src={user.avatar_url} alt="" aria-hidden="true" className="w-10 h-10 rounded-full object-cover shrink-0 bg-white/[0.04] border border-white/[0.08]" loading="lazy" />
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-medium text-white truncate">@{user.username}</div>
|
|
{user.uploads > 0 && <div className="text-xs text-neutral-400">{user.uploads.toLocaleString()} uploads</div>}
|
|
</div>
|
|
</button>
|
|
</li>
|
|
)
|
|
})}
|
|
</>
|
|
)}
|
|
|
|
{tags.length > 0 && (
|
|
<>
|
|
<li role="presentation" className={`px-3 pb-1 text-[10px] font-semibold uppercase tracking-wider text-white/35 select-none ${artworks.length > 0 || users.length > 0 ? 'pt-2 border-t border-white/[0.06]' : 'pt-2'}`}>Tags</li>
|
|
{tags.map((tag, j) => {
|
|
const flatIdx = artworks.length + users.length + j
|
|
return (
|
|
<li key={tag.slug ?? tag.name ?? j} role="option" id={`sb-mobile-item-${flatIdx}`} aria-selected={activeIdx === flatIdx}>
|
|
<button
|
|
type="button"
|
|
onClick={() => onNavigate({ type: 'tag', ...tag })}
|
|
className={`w-full min-h-12 flex items-center gap-3 px-3 py-2 text-left rounded-lg transition-colors ${activeIdx === flatIdx ? 'bg-white/[0.14]' : 'hover:bg-white/[0.08]'}`}
|
|
>
|
|
<span className="w-10 h-10 rounded-lg bg-white/[0.04] border border-white/[0.07] inline-flex items-center justify-center shrink-0" aria-hidden="true">
|
|
<svg className="w-4 h-4 text-white/45" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
|
|
</svg>
|
|
</span>
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-medium text-white truncate">#{tag.name ?? tag.slug}</div>
|
|
{tag.artworks_count != null && <div className="text-xs text-neutral-400">{tag.artworks_count.toLocaleString()} artworks</div>}
|
|
</div>
|
|
</button>
|
|
</li>
|
|
)
|
|
})}
|
|
</>
|
|
)}
|
|
|
|
<li role="presentation" className="px-3 pt-3 pb-2 border-t border-white/[0.06] mt-2">
|
|
<a href={`/search?q=${encodeURIComponent(query)}`} className="min-h-12 inline-flex items-center gap-1.5 text-sm text-accent hover:text-accent/80 transition-colors">
|
|
See all results for <span className="font-semibold">"{query}"</span>
|
|
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7"/>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
) : (
|
|
<div className="mx-2 my-2 px-6 py-10 rounded-xl border border-white/[0.10] bg-nova-900/95 backdrop-blur-sm shadow-2xl text-sm text-white/60">
|
|
{query.trim().length >= 2 ? 'No results found.' : 'Start typing to search artworks, creators, and tags.'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|