SearchBar.jsx

import { useState } from 'react';

const SearchBar = ({ onSearch }) => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearch = () => {
    onSearch(searchTerm);
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      handleSearch();
    }
  };

  return (
    <div className="search-container">
      <div className="search-group">
        <input
          type="text"
          className="search-input"
          placeholder="Enter keywords to search..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          onKeyPress={handleKeyPress}
          aria-label="Search posts"
        />
        <button 
          className="search-button"
          onClick={handleSearch}
          aria-label="Search"
        >
          <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M24.5 22.75H23.16L22.71 22.32C24.24 20.53 25.17 18.24 25.17 15.75C25.17 9.85 20.4 5.08 14.5 5.08C8.6 5.08 3.83 9.85 3.83 15.75C3.83 21.65 8.6 26.42 14.5 26.42C16.99 26.42 19.28 25.49 21.07 23.96L21.5 24.41V25.75L29.67 33.91L32.08 31.5L24.5 22.75ZM14.5 22.75C10.66 22.75 7.5 19.59 7.5 15.75C7.5 11.91 10.66 8.75 14.5 8.75C18.34 8.75 21.5 11.91 21.5 15.75C21.5 19.59 18.34 22.75 14.5 22.75Z" fill="white"/>
          </svg>
        </button>
      </div>
    </div>
  );
};

export default SearchBar;