The Searchbar component in goobs-frontend is a customizable search input field that allows users to enter search queries. It provides a user-friendly interface for search functionality with various styling options.

To use the Searchbar component in your project, import it from the goobs-frontend package:

import { Searchbar } from 'goobs-frontend';

Here's a basic example of how to use the Searchbar component:

import React from 'react';
import { Searchbar } from 'goobs-frontend';

const SearchbarExample: React.FC = () => {
  const handleSearch = () => {
    console.log('Search triggered');
  };

  return (
    <Searchbar
      label="Search"
      placeholder="Enter your search query"
      onChange={handleSearch}
    />
  );
};

export default SearchbarExample;

The Searchbar component accepts the following props:

• label: string (optional) - The label for the search input.
• backgroundcolor: string (optional) - Background color of the search input.
• iconcolor: string (optional) - Color of the search icon.
• outlinecolor: string (optional) - Color of the input field outline.
• fontcolor: string (optional) - Color of the text inside the input field.
• placeholder: string (optional) - Placeholder text for the search input.
• onChange: () => void (optional) - Callback function triggered when the search input changes.

1. Customizable Styling: Supports custom colors for background, icon, outline, and font.
2. Search Icon: Includes a built-in search icon for visual clarity.
3. Placeholder Text: Allows setting custom placeholder text.
4. onChange Callback: Provides a callback function for handling search input changes.
5. Accessibility: Includes proper labeling and ARIA attributes for screen readers.

You can customize the appearance of the Searchbar component using the provided props. Here's an example with custom styling:

import React from 'react';
import { Searchbar } from 'goobs-frontend';

const StyledSearchbarExample: React.FC = () => {
  return (
    <Searchbar
      label="Custom Search"
      backgroundcolor="#f0f0f0"
      iconcolor="#1976d2"
      outlinecolor="#333"
      fontcolor="#333"
      placeholder="Search our products..."
      onChange={() => console.log('Search input changed')}
    />
  );
};

export default StyledSearchbarExample;

To optimize performance, especially for real-time search, you can implement debounce functionality:

import React, { useState, useCallback } from 'react';
import { Searchbar } from 'goobs-frontend';
import debounce from 'lodash/debounce';

const DebouncedSearchbarExample: React.FC = () => {
  const [searchResults, setSearchResults] = useState([]);

  const debouncedSearch = useCallback(
    debounce((query) => {
      // Simulating an API call
      console.log('Searching for:', query);
      // In a real application, you would make an API call here
      setSearchResults([`Result for ${query}`]);
    }, 300),
    []
  );

  const handleSearch = () => {
    const query = document.querySelector('input').value;
    debouncedSearch(query);
  };

  return (
    <div>
      <Searchbar
        label="Debounced Search"
        placeholder="Type to search..."
        onChange={handleSearch}
      />
      <ul>
        {searchResults.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
};

export default DebouncedSearchbarExample;

You can enhance the Searchbar component with autocomplete functionality:

import React, { useState } from 'react';
import { Searchbar } from 'goobs-frontend';
import { Autocomplete, TextField } from '@mui/material';

const AutocompleteSearchbarExample: React.FC = () => {
  const [options, setOptions] = useState([]);

  const handleSearch = () => {
    const query = document.querySelector('input').value;
    // Simulating fetching autocomplete options
    const newOptions = [query + '1', query + '2', query + '3'];
    setOptions(newOptions);
  };

  return (
    <Autocomplete
      freeSolo
      options={options}
      renderInput={(params) => (
        <Searchbar
          {...params}
          label="Autocomplete Search"
          placeholder="Type to search..."
          onChange={handleSearch}
        />
      )}
    />
  );
};

export default AutocompleteSearchbarExample;

The Searchbar component is designed with accessibility in mind:

• It uses proper labeling to describe the search input's purpose.
• The search icon is purely decorative and doesn't interfere with screen readers.
• The component is keyboard accessible.

To further enhance accessibility:

1. Provide clear instructions on how to use the search functionality if necessary.
2. Ensure that search results are announced to screen readers when they appear.
3. Consider adding ARIA live regions for dynamic search results.

1. Clear Labeling: Use a clear and concise label that describes the search functionality.
2. Appropriate Placeholder: Use placeholder text to provide an example of what can be searched.
3. Error Handling: Implement proper error handling for failed searches or no results scenarios.
4. Responsive Design: Ensure the searchbar is usable on various device sizes.
5. Feedback: Provide visual feedback when a search is in progress and when results are available.

The Searchbar component itself is lightweight, but consider the following for optimal performance:

• Implement debouncing for real-time search to reduce the number of API calls or search operations.
• For large datasets, consider implementing server-side search and pagination.
• Optimize any search algorithms used in conjunction with this component.

1. Styling Issues: If custom styles are not applying correctly, check the specificity of your CSS and ensure you're using the correct prop names.
2. onChange Not Firing: Verify that the onChange prop is correctly passed and is a valid function.
3. Icon Not Visible: Ensure that the iconcolor prop is set to a color that contrasts with the backgroundcolor.

By leveraging these features and following the best practices, you can effectively use the Searchbar component in your goobs-frontend projects to create user-friendly search interfaces with custom styling and advanced functionality.