Create SearchPage.jsx

SearchPage.jsx

@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const filterOptions = ["real", "ai", "futanari", "vanilla"];
+
+const SearchPage = () => {
+  const [query, setQuery] = useState('');
+  const [filters, setFilters] = useState({
+    real: true, ai: true, futanari: false, vanilla: false,
+  });
+  const [result, setResult] = useState(null);
+  const [history, setHistory] = useState([]);
+
+  const token = localStorage.getItem("token");
+
+  const runSearch = async (customQuery) => {
+    try {
+      const res = await axios.post(
+        "https://your-hf-space.hf.space/search",
+        { query: customQuery || query, filters },
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+      setResult(res.data);
+    } catch {
+      alert("Error or Unauthorized.");
+    }
+  };
+
+  useEffect(() => {
+    const fetchHistory = async () => {
+      try {
+        const res = await axios.get("https://your-hf-space.hf.space/history", {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+        setHistory(res.data);
+      } catch {
+        // ignore
+      }
+    };
+    fetchHistory();
+  }, [token]);
+
+  const handleCheckbox = (e) => {
+    const { name, checked } = e.target;
+    setFilters((prev) => ({ ...prev, [name]: checked }));
+  };
+
+  const clearHistory = async () => {
+    if (!window.confirm("Are you sure you want to clear your search history?")) return;
+    try {
+      await axios.delete("https://your-hf-space.hf.space/history", {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      setHistory([]);
+    } catch {
+      alert("Could not clear history.");
+    }
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto p-6">
+      <h1 className="text-3xl font-bold mb-6">NSFW AI Search</h1>
+      <div className="mb-4">
+        <h3 className="text-sm font-semibold mb-1">Filters:</h3>
+        <div className="flex flex-wrap gap-4">
+          {filterOptions.map((f) => (
+            <label key={f} className="flex items-center gap-1 text-sm">
+              <input
+                type="checkbox"
+                name={f}
+                checked={filters[f]}
+                onChange={handleCheckbox}
+                className="accent-purple-600"
+              />
+              {f.charAt(0).toUpperCase() + f.slice(1)}
+            </label>
+          ))}
+        </div>
+      </div>
+      <div className="flex space-x-4 mb-4">
+        <input
+          type="text"
+          placeholder="Enter fantasy or prompt"
+          className="flex-1 px-4 py-2 border rounded-lg"
+          value={query} onChange={e => setQuery(e.target.value)}
+        />
+        <button
+          className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700"
+          onClick={() => runSearch()}
+        >
+          Search
+        </button>
+      </div>
+      {result && (
+        <div className="bg-white rounded-xl p-4 shadow-md space-y-3">
+          <h2 className="text-xl font-bold">Preview:</h2>
+          <img src={result.ai_preview} alt="AI preview" className="w-full rounded-xl" />
+          <h2 className="text-xl font-bold mt-4">Links:</h2>
+          <ul>
+            {result.results.map((r, idx) => (
+              <li key={idx}>
+                <a href={r.url} target="_blank" className="text-blue-500 underline">{r.title}</a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+      <div className="mt-8">
+        <div className="flex justify-between items-center mb-2">
+          <h2 className="text-xl font-semibold">Search History</h2>
+          <button
+            onClick={clearHistory}
+            className="text-sm bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600"
+          >
+            Clear History
+          </button>
+        </div>
+        <ul className="space-y-1 text-sm">
+          {history.map((h, i) => (
+            <li
+              key={i}
+              onClick={() => {
+                setQuery(h.query);
+                runSearch(h.query);
+              }}
+              className="text-blue-600 cursor-pointer hover:underline flex justify-between items-center"
+            >
+              <span>{h.query}</span>
+              <span className="text-gray-400 text-xs">{new Date(h.timestamp).toLocaleString()}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default SearchPage;