Spaces:
Sleeping
Sleeping
File size: 3,104 Bytes
806d445 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | import React, { useEffect, useState } from 'react';
import { Clock, X } from 'lucide-react';
const SearchHistory = ({ onSelectBook, onClose }) => {
const [history, setHistory] = useState([]);
useEffect(() => {
const saved = JSON.parse(localStorage.getItem('searchHistory') || '[]');
setHistory(saved.reverse());
}, []);
const clearHistory = () => {
localStorage.setItem('searchHistory', '[]');
setHistory([]);
};
const removeItem = (book) => {
const updated = history.filter(h => h.title !== book.title);
setHistory(updated);
localStorage.setItem('searchHistory', JSON.stringify(updated.reverse()));
};
if (history.length === 0) return null;
return (
<div className="absolute top-full left-0 right-0 mt-2 bg-white border-2 border-border rounded-2xl shadow-2xl z-50 overflow-hidden max-h-96 overflow-y-auto">
<div className="sticky top-0 bg-gradient-to-r from-[#0369a1] to-[#0891b2] text-white px-4 py-3 flex items-center justify-between">
<div className="flex items-center gap-2">
<Clock size={16} />
<span className="font-semibold">Recent Searches</span>
</div>
<button
onClick={clearHistory}
className="text-xs px-2 py-1 bg-white/20 hover:bg-white/30 rounded transition-all"
>
Clear
</button>
</div>
<div>
{history.map((item, i) => (
<button
key={i}
onClick={() => {
onSelectBook(item.title);
onClose();
}}
className="w-full flex items-center gap-3 p-3 hover:bg-bg-hover transition-all border-b border-border/50 last:border-0 group"
>
<img
src={item.image_url}
alt={item.title}
className="w-10 h-14 object-cover rounded shadow-sm group-hover:scale-105 transition-transform"
/>
<div className="flex-1 text-left">
<div className="font-semibold text-text-primary text-sm line-clamp-1">{item.title}</div>
<div className="text-xs text-text-secondary">{item.author}</div>
</div>
<button
onClick={(e) => {
e.stopPropagation();
removeItem(item);
}}
className="opacity-0 group-hover:opacity-100 transition-opacity"
>
<X size={16} className="text-text-muted" />
</button>
</button>
))}
</div>
</div>
);
};
export default SearchHistory;
|