SearchBar

SearchBar.tsx

import React, { useState, useCallback } from 'react';
import './SearchBar.css';

type SearchBarProps = {
  onSearch: (searchText: string) => void;
}

const SearchBar = (props: SearchBarProps) => {
  const { onSearch } = props;
  const [searchText, setSearchText] = useState<string>('');

  const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchText(event.target.value);
  }, []);

  const handleSearchSubmit = useCallback((event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onSearch(searchText);
  }, [onSearch, searchText]);

  return (
    <form className="search-bar" onSubmit={handleSearchSubmit}>
      <input
        className="search-bar__input"
        type="text"
        placeholder="Search..."
        value={searchText}
        onChange={handleSearchChange}
      />
      <button className="search-bar__button" type="submit">Search</button>
    </form>
  );
}

export default SearchBar;

const searchData = [
  {
    id: 1,
    title: 'React for Beginners',
    author: 'John Smith',
    date: '2022-01-01',
  },
  {
    id: 2,
    title: 'Advanced React Techniques',
    author: 'Jane Doe',
    date: '2022-02-01',
  },
  {
    id: 3,
    title: 'React Hooks in Action',
    author: 'Bob Johnson',
    date: '2022-03-01',
  },
  {
    id: 4,
    title: 'Mastering React and Redux',
    author: 'Sarah Lee',
    date: '2022-04-01',
  },
];

SearchBar.module.css

.search-bar {
  display: flex;
  align-items: center;
  margin: 8px;
}

.search-bar__input {
  flex: 1;
  margin-right: 8px;
  padding: 8px;
  border-radius: 4px;
  border: none;
}

.search-bar__button {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  background-color: #0077ff;
  color: white;
  cursor: pointer;
}

.search-bar__button:hover {
  background-color: #005ae6;
}