return ( <div className="cursor-pointer rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition transform hover:-translate-y-1 bg-white" onClick=() => onClick(item) > <img src=imageUrl alt= className="w-full h-64 object-cover" /> <div className="p-4"> <h3 className="font-bold text-lg truncate">item.title </h3> <p className="text-gray-600 text-sm"> item.release_date?.slice(0, 4) </p> <p className="text-yellow-500 text-sm">⭐ item.vote_average?.toFixed(1)/10</p> </div> </div> ); ;
export default ContentCard; import React, useEffect, useState from 'react'; import fetchTrending from '../services/api'; import ContentCard from '../components/ContentCard'; import useNavigate from 'react-router-dom'; const Home = () => const [trending, setTrending] = useState([]); const [loading, setLoading] = useState(true); const navigate = useNavigate(); xxx-av20432
useEffect(() => const getTrending = async () => const data = await fetchTrending(); setTrending(data); setLoading(false); ; getTrending(); , []); return ( <
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> results.map((item) => ( <ContentCard key=item.id item=item onClick=() => navigate(`/details/$item.media_type/$item.id`) /> )) </div> </div> ); ; h3 className="font-bold text-lg truncate">
loading && <p>Searching...</p>
const handleSearch = async (e) => e.preventDefault(); if (!query.trim()) return; setLoading(true); const data = await searchContent(query); setResults(data); setLoading(false); ;
// Get trending movies/TV app.get('/api/trending', async (req, res) => const mediaType = 'all', timeWindow = 'week' = req.query; try const response = await axios.get( $TMDB_BASE/trending/$mediaType/$timeWindow?api_key=$API_KEY ); res.json(response.data.results); catch (error) res.status(500).json( error: error.message );