48 lines
2.1 KiB
JavaScript
48 lines
2.1 KiB
JavaScript
import React from 'react'
|
|
|
|
export default function HelpSearchBar({ value, onChange, onSelectSuggestion, onClear, resultSummary, suggestions = [] }) {
|
|
return (
|
|
<div className="rounded-[30px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.03))] p-4 shadow-[0_22px_70px_rgba(2,6,23,0.22)] md:p-5">
|
|
<label htmlFor="help-center-search" className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">
|
|
Search the help hub
|
|
</label>
|
|
<div className="mt-3 flex flex-col gap-3 lg:flex-row">
|
|
<div className="relative flex-1">
|
|
<span className="pointer-events-none absolute inset-y-0 left-4 flex items-center text-slate-500">
|
|
<i className="fa-solid fa-magnifying-glass" />
|
|
</span>
|
|
<input
|
|
id="help-center-search"
|
|
type="search"
|
|
value={value}
|
|
onChange={(event) => onChange(event.target.value)}
|
|
placeholder="Search upload image, group roles, create card, login issue..."
|
|
className="w-full rounded-[22px] border border-white/10 bg-black/20 py-3.5 pl-11 pr-4 text-sm text-white outline-none placeholder:text-slate-500"
|
|
/>
|
|
</div>
|
|
{value ? (
|
|
<button
|
|
type="button"
|
|
onClick={onClear}
|
|
className="rounded-[22px] border border-white/10 bg-white/[0.05] px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.08]"
|
|
>
|
|
Clear search
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
{suggestions.map((suggestion) => (
|
|
<button
|
|
key={suggestion}
|
|
type="button"
|
|
onClick={() => onSelectSuggestion(suggestion)}
|
|
className="rounded-full border border-white/10 bg-black/20 px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-slate-300 transition hover:border-white/20 hover:text-white"
|
|
>
|
|
{suggestion}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<p className="mt-4 text-sm text-slate-400">{resultSummary}</p>
|
|
</div>
|
|
)
|
|
} |