Building Dynamic Business Directories with Roozna Searchbar

Discover how to leverage the Roozna Searchbar to create feature-rich, interactive business directories that provide users with instant access to comprehensive company information.

The Challenge

Creating an effective business directory involves:

Providing fast, accurate search results
Displaying comprehensive company information
Offering filtering and sorting options
Ensuring a smooth, responsive user experience
Keeping company data up-to-date

By integrating the Roozna Searchbar into your business directory application, you can create a powerful, user-friendly interface that addresses these challenges. Here's an example of how to implement this solution:

import React, { useState, useEffect } from 'react';
import { Searchbar } from '@roozna/react-search';

function BusinessDirectory() {
  const [selectedCompany, setSelectedCompany] = useState(null);
  const [recentSearches, setRecentSearches] = useState([]);
  const [industryFilter, setIndustryFilter] = useState('All');

  const handleCompanySelect = (company) => {
    setSelectedCompany(company);
    updateRecentSearches(company);
  };

  const updateRecentSearches = (company) => {
    setRecentSearches(prevSearches => {
      const updatedSearches = [company, ...prevSearches.filter(c => c.id !== company.id)].slice(0, 5);
      localStorage.setItem('recentSearches', JSON.stringify(updatedSearches));
      return updatedSearches;
    });
  };

  useEffect(() => {
    const savedSearches = JSON.parse(localStorage.getItem('recentSearches') || '[]');
    setRecentSearches(savedSearches);
  }, []);

  return (
    <div className="business-directory">
      <h1>Business Directory</h1>
      
      <div className="search-container">
        <Searchbar
          apiKey="your_roozna_api_key_here"
          onSelect={handleCompanySelect}
          placeholderText="Search for a company..."
          size="lg"
          width="100%"
          theme="light"
          styles={{
            container: { marginBottom: '2rem' },
            input: { fontSize: '16px', padding: '12px 16px' },
            dropdown: { boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)' },
          }}
        />
      </div>

      <div className="directory-content">
        <div className="filters">
          <label htmlFor="industry-filter">Filter by Industry:</label>
          <select
            id="industry-filter"
            value={industryFilter}
            onChange={(e) => setIndustryFilter(e.target.value)}
          >
            <option value="All">All Industries</option>
            <option value="Technology">Technology</option>
            <option value="Finance">Finance</option>
            <option value="Healthcare">Healthcare</option>
            {/* Add more industry options as needed */}
          </select>
        </div>

        {selectedCompany && (
          <div className="company-details">
            <h2>{selectedCompany.name}</h2>
            <p><strong>Website:</strong> <a href={selectedCompany.website} target="_blank" rel="noopener noreferrer">{selectedCompany.website}</a></p>
            <p><strong>Industry:</strong> {selectedCompany.industry}</p>
            <p><strong>Description:</strong> {selectedCompany.description}</p>
            {/* Add more company details as available from the Roozna API */}
          </div>
        )}

        <div className="recent-searches">
          <h3>Recent Searches</h3>
          <ul>
            {recentSearches.map(company => (
              <li key={company.id} onClick={() => setSelectedCompany(company)}>
                {company.name}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}

export default BusinessDirectory;

Building Dynamic Business Directories with Roozna Searchbar

The Challenge

The Roozna Searchbar Solution