generated from Dicken/dickendock
55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import { forwardRef, type InputHTMLAttributes } from "react";
|
|
|
|
export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
|
|
/** Wird links im Suchfeld angezeigt, z. B. ein Tastaturkürzel-Hinweis. */
|
|
hint?: string;
|
|
}
|
|
|
|
/**
|
|
* Zentrales Sucheingabefeld im Raycast/Spotlight-Stil.
|
|
* Bewusst schlicht gehalten: großer Text, viel Weißraum, keine Ablenkung.
|
|
*/
|
|
export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
|
|
({ hint, className = "", ...props }, ref) => {
|
|
return (
|
|
<div
|
|
className={`flex items-center gap-3 rounded-2xl border border-black/10 bg-white/80
|
|
px-5 py-4 shadow-lg backdrop-blur-md transition-colors
|
|
focus-within:border-black/20 dark:border-white/10 dark:bg-white/5
|
|
dark:focus-within:border-white/20 ${className}`}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="h-5 w-5 shrink-0 text-black/40 dark:text-white/40"
|
|
>
|
|
<circle cx="11" cy="11" r="7" />
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
|
</svg>
|
|
<input
|
|
ref={ref}
|
|
type="text"
|
|
autoComplete="off"
|
|
spellCheck={false}
|
|
className="w-full bg-transparent text-lg text-black outline-none placeholder:text-black/30
|
|
dark:text-white dark:placeholder:text-white/30"
|
|
{...props}
|
|
/>
|
|
{hint ? (
|
|
<span className="shrink-0 rounded-md border border-black/10 px-1.5 py-0.5 text-xs
|
|
text-black/40 dark:border-white/10 dark:text-white/40">
|
|
{hint}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
SearchInput.displayName = "SearchInput";
|