const TMDB_BASE = 'https://api.themoviedb.org/3'; const API_KEY = process.env.TMDB_API_KEY;
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> ); ; xxx-av20432
if (loading) return <div className="text-center p-10">Loading trending content...</div>; const TMDB_BASE = 'https://api
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'; const TMDB_BASE = 'https://api.themoviedb.org/3'
// Search content app.get('/api/search', async (req, res) => const query, page = 1 = req.query; if (!query) return res.status(400).json( error: 'Query parameter required' ); try const response = await axios.get( $TMDB_BASE/search/multi?api_key=$API_KEY&query=$encodeURIComponent(query)&page=$page ); res.json(response.data.results); catch (error) res.status(500).json( error: error.message );
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();
const handleSearch = async (e) => e.preventDefault(); if (!query.trim()) return; setLoading(true); const data = await searchContent(query); setResults(data); setLoading(false); ;