Spaces:
Running
Running
File size: 2,389 Bytes
72f0edb |
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 |
import React from 'react';
import Header from '../components/Header';
import { useMyList } from '../hooks/use-my-list';
import { useNavigate } from 'react-router-dom';
import { Star } from 'lucide-react';
const MyList: React.FC = () => {
const { myList, removeFromMyList } = useMyList();
const navigate = useNavigate();
const handleItemClick = (id: string) => {
navigate(`/content/${id}`);
};
return (
<div className="min-h-screen bg-netflix-background text-white">
<Header />
<main className="container mx-auto px-4 py-16">
<h1 className="text-4xl font-bold mb-8">Starred</h1>
{myList.length === 0 ? (
<div className="text-center py-12">
<p className="text-xl mb-4">Your list is empty</p>
<p className="text-gray-400">Add items by clicking the star icon on content you like</p>
</div>
) : (
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
{myList.map((item) => (
<div
key={item.id}
className="relative rounded-md overflow-hidden cursor-pointer group"
onClick={() => handleItemClick(item.id)}
>
<img
src={item.imageUrl}
alt={item.title}
className="w-full aspect-square object-cover transition-transform duration-300 group-hover:scale-105"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
<h3 className="text-white text-xl p-4 font-medium">{item.title}</h3>
</div>
{/* Remove from list button */}
<button
className="absolute top-2 right-2 p-2 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10"
onClick={(e) => {
e.stopPropagation();
removeFromMyList(item.id);
}}
>
<Star size={20} className="fill-yellow-400 text-yellow-400" />
</button>
</div>
))}
</div>
)}
</main>
</div>
);
};
export default MyList;
|