Xxx-av20432 〈TRUSTED — 2026〉

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();

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>

loading && <p>Searching...</p>

export const fetchTrending = (mediaType = 'all', timeWindow = 'week') => API.get( /trending?mediaType=$mediaType&timeWindow=$timeWindow );

// 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 ); xxx-av20432

useEffect(() => const getTrending = async () => const data = await fetchTrending(); setTrending(data); setLoading(false); ; getTrending(); , []);

export const fetchDetails = (type, id) => API.get( /details/$type/$id ); import React from 'react'; const ContentCard = ( item, onClick ) => const imageUrl = item.poster_path ? https://image.tmdb.org/t/p/w500$item.poster_path : 'https://via.placeholder.com/500x750?text=No+Image'; export default ContentCard

);