diff --git a/app/components/Search.tsx b/app/components/Search.tsx new file mode 100644 index 0000000..f7d95e4 --- /dev/null +++ b/app/components/Search.tsx @@ -0,0 +1,78 @@ +"use client"; +import { useState } from "react"; +import styled from "styled-components"; +import Button from "./Button"; +import TextInput from "./TextInput"; + +export type SearchProps = { + placeholder?: string; + onSearch: (searchTerm: string) => void; + onChange?: (value: string) => void; + buttonLabel?: string; + icon?: React.ReactNode; + initialValue?: string; +}; + +/** + * Search component that combines TextInput and Button for search functionality. + * This component can be extended to handle searching based on metrics and database integration. + */ +export default function Search({ + placeholder = "Search...", + onSearch, + onChange, + buttonLabel = "Search", + icon, + initialValue = "", +}: SearchProps) { + const [searchTerm, setSearchTerm] = useState(initialValue); + + const handleInputChange = (value: string) => { + setSearchTerm(value); + onChange?.(value); + }; + + const handleSearch = () => { + onSearch(searchTerm); + }; + + const handleKeyPress = (event: React.KeyboardEvent) => { + if (event.key === "Enter") { + handleSearch(); + } + }; + + return ( + + + ) => + handleInputChange(event.target.value) + } + onKeyPress={handleKeyPress} + placeholder={placeholder} + /> + + +