b8dd591428
- Create 16 diet/weight methods across 5 categories with full content - Add MethodsPage with search, filters (category/difficulty/effectiveness) - Add MethodDetailPage with pros/cons, scientific basis, contraindications - Add BmiCalculatorPage with visual BMI scale - Create reusable components: Badge, DifficultyBadge, EffectivenessIndicator, BookmarkButton, MethodCard, SearchBar, FilterPanel - Add useLocalStorage and useBookmarks hooks for localStorage persistence - Set up React Router with all routes Co-authored-by: Cursor <cursoragent@cursor.com>
33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
interface SearchBarProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder?: string;
|
|
}
|
|
|
|
export function SearchBar({ value, onChange, placeholder = "Поиск методик..." }: SearchBarProps) {
|
|
return (
|
|
<div className="relative">
|
|
<svg
|
|
className="absolute left-3.5 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400 dark:text-gray-500"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={1.5}
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
|
|
/>
|
|
</svg>
|
|
<input
|
|
type="search"
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
placeholder={placeholder}
|
|
className="w-full rounded-xl border border-gray-300 bg-white py-3 pl-11 pr-4 text-sm text-gray-900 outline-none transition-colors placeholder:text-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:placeholder:text-gray-500 dark:focus:border-primary-400"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|