Spaces:
Sleeping
Sleeping
| "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> | |
| ); | |
| } | |