Spaces:
Sleeping
Sleeping
File size: 1,568 Bytes
5081fcb c6f90aa c4412d0 5081fcb c4412d0 5081fcb c6f90aa c4412d0 c6f90aa 5081fcb c6f90aa 5081fcb c6f90aa c4412d0 c6f90aa 5081fcb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
"use client";
/**
* Props interface for the SearchBar component
* @property onSearch - Callback function triggered when search input changes
*/
interface SearchBarProps {
onSearch: (query: string) => void;
}
/**
* SearchBar component that provides a styled search input with an icon
* Features:
* - Real-time search with onChange event
* - Glassmorphic design with backdrop blur
* - Responsive width with max-width constraint
* - Animated focus state with primary color ring
*/
export default function SearchBar({ onSearch }: SearchBarProps) {
return (
<div className="relative max-w-full mx-auto">
{/* Search input field with glassmorphic styling */}
<input
type="text"
placeholder="搜尋 PlayGO AI..."
onChange={(e) => onSearch(e.target.value)}
className="w-full rounded-2xl border border-border/50 bg-background-primary/50 px-4 py-6 pl-12 pr-36
backdrop-blur-sm shadow-lg focus:outline-none focus:ring-2 focus:ring-primary/50
text-lg transition-all duration-200 placeholder:text-text-secondary/50"
/>
{/* Search icon positioned absolutely within the input */}
<svg
className="absolute left-4 top-1/2 h-6 w-6 -translate-y-1/2 text-text-secondary/50"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</div>
);
}
|