import React, useState from 'react';const animeMangaData = anime: [ id: 1, title: "Attack on Titan", genre: "Action", rating: 9.0, episodes: 87, image: "https://via.placeholder.com/150" , id: 2, title: "Demon Slayer", genre: "Action", rating: 8.7, episodes: 55, image: "https://via.placeholder.com/150" , id: 3, title: "Death Note", genre: "Thriller", rating: 8.9, episodes: 37, image: "https://via.placeholder.com/150" , id: 4, title: "One Punch Man", genre: "Comedy", rating: 8.5, episodes: 24, image: "https://via.placeholder.com/150" , id: 5, title: "My Hero Academia", genre: "Action", rating: 8.3, episodes: 113, image: "https://via.placeholder.com/150" ], manga: [ id: 6, title: "Berserk", genre: "Dark Fantasy", rating: 9.2, chapters: 364, image: "https://via.placeholder.com/150" , id: 7, title: "One Piece", genre: "Adventure", rating: 9.1, chapters: 1088, image: "https://via.placeholder.com/150" , id: 8, title: "Jujutsu Kaisen", genre: "Action", rating: 8.6, chapters: 250, image: "https://via.placeholder.com/150" , id: 9, title: "Chainsaw Man", genre: "Dark Fantasy", rating: 8.8, chapters: 167, image: "https://via.placeholder.com/150" , id: 10, title: "Vagabond", genre: "Historical", rating: 9.3, chapters: 327, image: "https://via.placeholder.com/150" ] ;
const PopularRecommendations = () => const [type, setType] = useState('anime'); const [genre, setGenre] = useState('All'); const [recommendation, setRecommendation] = useState(null);
const genres = ['All', ...new Set(animeMangaData[type].map(item => item.genre))];
const filteredList = animeMangaData[type].filter(item => genre === 'All' ? true : item.genre === genre ); Baca Komik Manga Hentai Sub Indo Online - Google
const getRandomRecommendation = () => if (filteredList.length === 0) return; const randomIndex = Math.floor(Math.random() * filteredList.length); setRecommendation(filteredList[randomIndex]); ;
return ( <div className="max-w-5xl mx-auto p-6 bg-gray-900 text-white rounded-2xl shadow-xl"> <h1 className="text-4xl font-bold mb-2 text-center">📺 Popular Anime & Manga</h1> <p className="text-center text-gray-400 mb-6">Discover top-rated series + random recommendations</p>
/* Toggle Buttons */ <div className="flex justify-center gap-4 mb-6"> <button onClick=() => setType('anime'); setRecommendation(null); className=`px-6 py-2 rounded-full font-semibold transition $type === 'anime' ? 'bg-red-600' : 'bg-gray-700'` > 🎬 Anime </button> <button onClick=() => setType('manga'); setRecommendation(null); className=`px-6 py-2 rounded-full font-semibold transition $type === 'manga' ? 'bg-blue-600' : 'bg-gray-700'` > 📖 Manga </button> </div> /* Genre Filter */ <div className="flex flex-wrap justify-center gap-2 mb-6"> genres.map(g => ( <button key=g onClick=() => setGenre(g); setRecommendation(null); className=`px-3 py-1 rounded-full text-sm $genre === g ? 'bg-purple-600' : 'bg-gray-800'` > g </button> )) </div> /* Random Recommendation Button */ <div className="text-center mb-8"> <button onClick=getRandomRecommendation className="bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-6 rounded-full shadow-lg transition" > 🎲 Recommend me something! </button> </div> /* Recommendation Result */ recommendation && ( <div className="mb-8 p-4 bg-gray-800 rounded-xl border border-yellow-500"> <h2 className="text-2xl font-bold text-yellow-400">✨ Your Recommendation</h2> <div className="flex gap-4 mt-2"> <img src=recommendation.image alt=recommendation.title className="w-24 h-32 object-cover rounded-lg" /> <div> <p className="text-xl font-semibold">recommendation.title</p> <p>Genre: recommendation.genre</p> <p>⭐ Rating: recommendation.rating</p> <p>type === 'anime' ? `Episodes: $recommendation.episodes` : `Chapters: $recommendation.chapters`</p> </div> </div> </div> ) /* Full List */ <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"> filteredList.map(item => ( <div key=item.id className="bg-gray-800 rounded-xl p-4 hover:scale-105 transition"> <img src=item.image alt=item.title className="w-full h-40 object-cover rounded-lg mb-2" /> <h3 className="text-lg font-bold">item.title</h3> <p className="text-sm text-gray-400">item.genre</p> <p className="text-yellow-400">⭐ item.rating</p> </div> )) </div> </div>); ;
export default PopularRecommendations;
Why it’s popular: It is chaotic, horny, violent, and surprisingly philosophical. Creator Tatsuki Fujimoto loves movies and it shows in the cinematic paneling. The Hook: Denji is a destitute teenager who merges with his chainsaw devil dog, Pochita, to become "Chainsaw Man." He joins a government agency, but all he really wants is to touch a boob and eat toast with jam. Warning: Not for children. It is rated M for mature for a reason (gore and dark themes). import React, useState from 'react'; const animeMangaData =
These series dominate global popularity charts due to their compelling fights, character growth, and epic story arcs.
| Title | Medium | Why It’s Recommended | |-------|--------|----------------------| | One Piece | Anime & Manga | The gold standard of long-running shonen. The Final Saga is unfolding in both anime (remake by Wit Studio announced) and manga, offering unmatched world-building and emotional payoffs. | | Jujutsu Kaisen | Anime & Manga | Renowned for fluid animation (MAPPA) and a darker, unpredictable plot. The manga’s “Shinjuku Showdown” arc has been a cultural phenomenon. | | Chainsaw Man | Anime & Manga | Gritty, chaotic, and genre-subverting. Part 2 of the manga is ongoing; the anime’s cinematic style and rock soundtrack set a new standard. | | Frieren: Beyond Journey’s End | Anime & Manga | A contemplative twist on fantasy action. Focuses on an elf mage processing time and loss after defeating the Demon King. Critically acclaimed as a modern masterpiece. |
| If you want... | Start with... | |----------------|----------------| | Non-stop action | Jujutsu Kaisen (anime) | | A good cry | Frieren or To Your Eternity (anime) | | Laughter | Spy x Family (anime/manga) or Dandadan | | Intellectual thriller | Monster (anime/manga) or Pluto (manga) | | Cozy comfort | Skip and Loafer (anime/manga) | ); ; export default PopularRecommendations;
With so many popular anime series and manga recommendations, here is a cheat sheet based on your mood:
For when you want complexity, gray morals, and consequences.