Xxx-av20432 Work -
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> ); ;
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
const handleSearch = async (e) => e.preventDefault(); if (!query.trim()) return; setLoading(true); const data = await searchContent(query); setResults(data); setLoading(false); ; return ( <
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(); div className="container mx-auto p-4">
loading && <p>Searching...</p>
export const searchContent = (query, page = 1) => API.get( /search?query=$query&page=$page );
const TMDB_BASE = 'https://api.themoviedb.org/3'; const API_KEY = process.env.TMDB_API_KEY;