Spaces:
Running
Running
File size: 4,970 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 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | import React, { useState, useEffect } from 'react';
import { Heart, X, Trash2 } from 'lucide-react';
import BookCard from '../components/BookCard';
const FavoritesView = ({ onRecommend, onViewDetails, onBack }) => {
const [favorites, setFavorites] = useState([]);
useEffect(() => {
const saved = JSON.parse(localStorage.getItem('bookFavorites') || '[]');
setFavorites(saved);
}, []);
const removeFavorite = (title) => {
const updated = favorites.filter(book => book.title !== title);
setFavorites(updated);
localStorage.setItem('bookFavorites', JSON.stringify(updated));
};
const clearAllFavorites = () => {
if (window.confirm('Are you sure you want to clear all favorites?')) {
setFavorites([]);
localStorage.setItem('bookFavorites', JSON.stringify([]));
}
};
return (
<div className="favorites-view animate-in">
{/* Header */}
<section className="bg-gradient-to-r from-[#0369a1] to-[#0891b2] py-16 px-4 text-white">
<div className="container mx-auto max-w-7xl">
<button
onClick={onBack}
className="mb-6 flex items-center gap-2 px-4 py-2 bg-white/20 rounded-lg hover:bg-white/30 transition-all"
>
← Back to Home
</button>
<div className="flex items-center justify-between">
<div>
<h1 className="text-5xl font-bold mb-2 flex items-center gap-3">
<Heart size={40} className="fill-red-500 text-red-500" />
Your Favorites
</h1>
<p className="text-xl text-white/90">
{favorites.length} book{favorites.length !== 1 ? 's' : ''} saved
</p>
</div>
{favorites.length > 0 && (
<button
onClick={clearAllFavorites}
className="flex items-center gap-2 px-6 py-3 bg-red-500 hover:bg-red-600 rounded-xl font-bold transition-all"
>
<Trash2 size={20} />
Clear All
</button>
)}
</div>
</div>
</section>
{/* Content */}
<section className="py-20 px-4">
<div className="container mx-auto max-w-7xl">
{favorites.length === 0 ? (
<div className="text-center py-20 bg-white border border-dashed border-border rounded-3xl">
<Heart size={64} className="mx-auto text-text-muted mb-4 opacity-40" />
<h3 className="text-2xl font-bold text-text-primary mb-2">No Favorites Yet</h3>
<p className="text-text-secondary mb-8 max-w-md mx-auto">
Click the heart icon on any book to add it to your favorites and find them all here.
</p>
<button
onClick={onBack}
className="px-8 py-3 bg-[#0891b2] text-white rounded-lg font-bold hover:bg-[#0369a1] transition-all"
>
Explore Books
</button>
</div>
) : (
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
{favorites.map((book, i) => (
<div key={i} className="relative group">
<BookCard
book={book}
onRecommend={onRecommend}
onViewDetails={onViewDetails}
/>
<button
onClick={() => removeFavorite(book.title)}
className="absolute -top-3 -right-3 bg-red-500 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-all hover:bg-red-600 shadow-lg"
title="Remove from favorites"
>
<X size={16} />
</button>
</div>
))}
</div>
)}
</div>
</section>
</div>
);
};
export default FavoritesView;
|