useEffect(() => const getTrending = async () => const data = await fetchTrending(); setTrending(data); setLoading(false); ; getTrending(); , []);
return ( <div className="container mx-auto p-4"> <form onSubmit=handleSearch className="mb-6"> <input type="text" value=query onChange=(e) => setQuery(e.target.value) placeholder="Search movies, TV shows, people..." className="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" /> <button type="submit" className="mt-2 bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700"> Search </button> </form>
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=item.title className="w-full h-64 object-cover" /> <div className="p-4"> <h3 className="font-bold text-lg truncate"> item.name</h3> <p className="text-gray-600 text-sm"> xxx-av20432
return ( <div className="container mx-auto p-4"> <h1 className="text-3xl font-bold mb-6">🔥 Trending This Week</h1> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> trending.map((item) => ( <ContentCard key=item.id item=item onClick=() => navigate( /details/$item.media_type/$item.id ) /> )) </div> </div> ); ;
);
);
// Get details by ID app.get('/api/details/:type/:id', async (req, res) => const type, id = req.params; // type: 'movie' or 'tv' try const response = await axios.get( $TMDB_BASE/$type/$id?api_key=$API_KEY&append_to_response=videos,credits ); res.json(response.data); catch (error) res.status(500).json( error: error.message ); useEffect(() => const getTrending = async () =>
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();