35 lines
1.5 KiB
JavaScript
35 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
|
|
export default function FaqSearchInput({ value, onChange, onClear, resultCount }) {
|
|
return (
|
|
<div className="rounded-[26px] border border-white/10 bg-black/20 p-4 md:p-5">
|
|
<label htmlFor="groups-faq-search" className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">
|
|
Search questions
|
|
</label>
|
|
<div className="mt-3 flex gap-3">
|
|
<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="groups-faq-search"
|
|
value={value}
|
|
onChange={(event) => onChange(event.target.value)}
|
|
placeholder="Search roles, invites, contributor credit, review, troubleshooting..."
|
|
className="w-full rounded-[20px] border border-white/10 bg-white/[0.04] py-3 pl-11 pr-4 text-sm text-white outline-none placeholder:text-slate-500"
|
|
/>
|
|
</div>
|
|
{value ? (
|
|
<button
|
|
type="button"
|
|
onClick={onClear}
|
|
className="rounded-[20px] border border-white/10 bg-white/[0.04] px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.06]"
|
|
>
|
|
Clear
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
<p className="mt-3 text-sm text-slate-400">{resultCount} question{resultCount === 1 ? '' : 's'} visible</p>
|
|
</div>
|
|
)
|
|
} |