Create a search history visualizer

Here’s a simple and interactive Search History Visualizer built using React, Tailwind CSS, and Recharts to show search frequency over time. It includes:

• A search input

• A list of past searches

• A bar chart showing how many times each term was searched

Let me know if you’d like it in plain HTML/JS or another framework.

jsx
CopyEdit
// Type: code/react
export default function SearchHistoryVisualizer() {
  const [search, setSearch] = useState("");
  const [history, setHistory] = useState({});
  const [terms, setTerms] = useState([]);

  const handleSearch = () => {
    if (!search.trim()) return;
    setHistory((prev) => {
      const updated = { ...prev, [search]: (prev[search] || 0) + 1 };
      setTerms(Object.keys(updated));
      return updated;
    });
    setSearch("");
  };

  const data = terms.map((term) => ({
    name: term,
    count: history[term],
  }));

  return (
    <div className="p-6 max-w-3xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">Search History Visualizer</h1>
      <div className="flex gap-2 mb-6">
        <input
          type="text"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="flex-1 p-2 border rounded-xl shadow"
          placeholder="Type your search..."
        />
        <button
          onClick={handleSearch}
          className="px-4 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700"
        >
          Search
        </button>
      </div>

      <div className="mb-6">
        <h2 className="text-xl font-semibold mb-2">Search History</h2>
        <ul className="list-disc list-inside">
          {terms.map((term) => (
            <li key={term}>
              {term} — {history[term]} time{history[term] > 1 ? "s" : ""}
            </li>
          ))}
        </ul>
      </div>

      <div>
        <h2 className="text-xl font-semibold mb-4">Search Frequency Chart</h2>
        <ResponsiveContainer width="100%" height={300}>
          <BarChart data={data}>
            <XAxis dataKey="name" />
            <YAxis allowDecimals={false} />
            <Tooltip />
            <Bar dataKey="count" fill="#3b82f6" radius={[8, 8, 0, 0]} />
          </BarChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}

import { useState } from "react";
import {
  ResponsiveContainer,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
} from "recharts";

Would you like export/download functionality or storage in localStorage next?