perubahan desain frontend
This commit is contained in:
Zeakeers
parent
90adfef859
commit
fd90edfce5
|
|
@ -149,202 +149,236 @@ const App = () => {
|
|||
}
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Header scrollToSection={scrollToSection} />
|
||||
<div id="home" ref={homeRef} className="h-screen w-full bg-cover bg-center bg-no-repeat bg-black bg-opacity-50 flex items-center justify-center"
|
||||
style={{ backgroundImage: "url('/images/bgwebrating.png')", backgroundSize: "105%" }}>
|
||||
<div className={`w-full max-w-lg p-6 text-center relative ${step > 0 || rating ? 'bg-white rounded-lg shadow-md' : ''}`}>
|
||||
{step === 0 && !rating && (
|
||||
<h1 className="text-6xl text-white text-2xl text-left font-bold ">Rating Umur Game</h1>
|
||||
)}
|
||||
{step > 0 && step <= questions.length && (
|
||||
<div className="absolute top-4 right-4 flex space-x-2">
|
||||
|
||||
{/* Hero Section */}
|
||||
<div
|
||||
id="home"
|
||||
ref={homeRef}
|
||||
className="min-h-screen w-full bg-cover bg-center bg-no-repeat bg-black bg-opacity-50 flex items-center justify-center px-4 sm:px-6 lg:px-8 relative overflow-hidden"
|
||||
style={{
|
||||
backgroundImage: "url('/images/bgwebrating.png')",
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundAttachment: "fixed"
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-black/50"></div>
|
||||
<div className={`w-full max-w-2xl p-6 sm:p-8 text-center relative ${step > 0 || rating ? 'bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl' : ''}`}>
|
||||
{step === 0 && !rating && (
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl text-white font-bold tracking-tight mb-8">
|
||||
Rating Umur Game
|
||||
</h1>
|
||||
)}
|
||||
|
||||
{step > 0 && step <= questions.length && (
|
||||
<div className="absolute top-4 right-4 flex space-x-3 z-10">
|
||||
{step > 1 && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setAnswers(answers.slice(0, -1));
|
||||
setStep(step - 1);
|
||||
}}
|
||||
aria-label="Kembali"
|
||||
className="w-8 h-8 bg-yellow-500 rounded-full hover:bg-yellow-600 transition-transform duration-200 flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-yellow-300 border-2 border-white shadow-md hover:scale-110"
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
setAnswers(answers.slice(0, -1));
|
||||
setStep(step - 1);
|
||||
setStep(0);
|
||||
setAnswers([]);
|
||||
setGameName("");
|
||||
}}
|
||||
className="w-6 h-6 bg-yellow-500 rounded-full hover:bg-yellow-700"
|
||||
/>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
setStep(0);
|
||||
setAnswers([]);
|
||||
setGameName("");
|
||||
}}
|
||||
className="w-6 h-6 bg-red-500 rounded-full hover:bg-red-700"
|
||||
aria-label="Reset"
|
||||
className="w-8 h-8 bg-red-500 rounded-full hover:bg-red-600 transition-transform duration-200 flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-red-300 border-2 border-white shadow-md hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{!rating && step === 0 && (
|
||||
<>
|
||||
<p className="mt-4 text-left text-white">Masukkan nama game:</p>
|
||||
<input
|
||||
type="text"
|
||||
value={gameName}
|
||||
onChange={(e) => setGameName(e.target.value)}
|
||||
className="border border-gray-600 bg-gray-100 p-2 w-full mt-2 focus:bg-gray-200 focus:border-black rounded mt-1"
|
||||
/>
|
||||
{suggestions.length > 0 && (
|
||||
<ul className="border border-gray-600 bg-gray-100 w-full mt-2 focus:bg-gray-200 focus:border-black rounded text-left">
|
||||
{suggestions.map((suggestion, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="p-2 cursor-pointer hover:bg-gray-300"
|
||||
onClick={() => handleSelectGame(suggestion)}
|
||||
>
|
||||
{suggestion}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
)}
|
||||
|
||||
{!rating && step === 0 && (
|
||||
<div className="space-y-6">
|
||||
<p className="text-xl text-white font-medium">Masukkan nama game:</p>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
value={gameName}
|
||||
onChange={(e) => setGameName(e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-xl border-2 border-gray-300 focus:border-yellow-500 focus:ring-2 focus:ring-yellow-200 transition-all duration-300 bg-white/90 backdrop-blur-sm"
|
||||
placeholder="Ketik nama game..."
|
||||
/>
|
||||
{suggestions.length > 0 && (
|
||||
<ul className="absolute w-full mt-2 bg-white rounded-xl shadow-lg border border-gray-200 max-h-60 overflow-y-auto z-[9999]">
|
||||
{suggestions.map((suggestion, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="px-4 py-3 hover:bg-yellow-50 cursor-pointer transition-colors duration-200 border-b border-gray-100 last:border-b-0"
|
||||
onClick={() => handleSelectGame(suggestion)}
|
||||
>
|
||||
{suggestion}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={checkGame}
|
||||
className="bg-blue-500 text-white px-4 py-2 rounded mt-4"
|
||||
onClick={checkGame}
|
||||
className="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-semibold px-6 py-3 rounded-xl transition-all duration-300 transform hover:scale-105 disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
disabled={!gameName.trim()}
|
||||
>
|
||||
Cek
|
||||
Cek Rating
|
||||
</button>
|
||||
{/* Daftar 5 game terbaru */}
|
||||
{latestGames.length > 0 && (
|
||||
<div className="mt-6 px-6 bg-yellowlight p-2 rounded">
|
||||
<h2 className="text-black text-bold text-lg text-left font-semibold mb-2">Game Terbaru:</h2>
|
||||
<div className=" flex flex-wrap max-w-full gap-x-6 gap-y-2 ">
|
||||
|
||||
{latestGames.length > 0 && (
|
||||
<div className="mt-8 bg-white/10 backdrop-blur-sm rounded-xl p-6">
|
||||
<h2 className="text-white text-xl font-semibold mb-4">Game Terbaru:</h2>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{latestGames.map((game, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className="text-black text-bold border-b border-gray-400 hover:text-white-300 cursor-pointer text-left whitespace-nowrap"
|
||||
className="px-4 py-2 bg-white/20 hover:bg-white/30 text-white rounded-lg transition-all duration-300"
|
||||
onClick={() => fetchGameRating(game)}
|
||||
>
|
||||
{game}
|
||||
</button>
|
||||
))}
|
||||
{latestGames.length >= 4 && (
|
||||
<a href="/list-games" className="text-blue-800 hover:underline ml-2">
|
||||
<a
|
||||
href="/list-games"
|
||||
className="px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg transition-all duration-300"
|
||||
>
|
||||
Selengkapnya
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{!rating && step > 0 && step <= questions.length && (
|
||||
<>
|
||||
<p className="mt-4">{questions[step - 1]}</p>
|
||||
{options.map((option) => (
|
||||
<button
|
||||
key={option}
|
||||
onClick={() => handleOptionClick(option)}
|
||||
className="block bg-gray-300 text-black px-4 py-2 rounded mt-2 hover:bg-gray-400 w-full"
|
||||
>
|
||||
{option}
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{!rating && step > questions.length && (
|
||||
<>
|
||||
{/* Menampilkan tabel hasil jawaban */}
|
||||
<div className="mt-4">
|
||||
<h2 className="text-lg font-semibold">Hasil Jawaban Anda:</h2>
|
||||
<table className="table-auto w-full border mt-4">
|
||||
<thead>
|
||||
<tr className="bg-gray-200">
|
||||
<th className="border px-4 py-2">Pertanyaan</th>
|
||||
<th className="border px-4 py-2">Jawaban</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{questions.map((question, index) => (
|
||||
<tr key={index}>
|
||||
<td className="border px-4 py-2">{question}</td>
|
||||
<td className="border px-4 py-2">{answers[index]}</td>
|
||||
</tr>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!rating && step > 0 && step <= questions.length && (
|
||||
<div className="space-y-6 pt-8">
|
||||
<h2 className="text-2xl font-semibold text-gray-800 mb-6">
|
||||
{questions[step - 1]}
|
||||
</h2>
|
||||
<div className="grid gap-3">
|
||||
{options.map((option) => (
|
||||
<button
|
||||
key={option}
|
||||
onClick={() => handleOptionClick(option)}
|
||||
className="w-full px-6 py-4 bg-white hover:bg-yellow-50 text-gray-800 rounded-xl border-2 border-gray-200 hover:border-yellow-500 transition-all duration-300 text-left"
|
||||
>
|
||||
{option}
|
||||
</button>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* Tombol kembali ke input game */}
|
||||
<button
|
||||
onClick={() => {
|
||||
setStep(0);
|
||||
setAnswers([]);
|
||||
setGameName("");
|
||||
}}
|
||||
className="bg-red-500 text-white px-4 py-2 rounded mt-4 w-full"
|
||||
>
|
||||
Kembali
|
||||
</button>
|
||||
{/* Tombol untuk konfirmasi hasil */}
|
||||
<button
|
||||
onClick={submitAnswers}
|
||||
className="bg-green-500 text-white px-4 py-2 rounded mt-4 w-full"
|
||||
>
|
||||
Cek Hasil
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{rating && (
|
||||
<>
|
||||
{easterEggActive ? (
|
||||
<h2 className="text-xl font-bold text-center text-red-600 mt-4">
|
||||
🎉 BISMILLAH LULUS 2025 DENGAN SEDIKIT REVISI 🎓
|
||||
</h2>
|
||||
) : (
|
||||
<>
|
||||
<h2 className="text-xl font-semibold mt-4">
|
||||
Game <span className="font-bold text-blue-500">{gameName}</span> memiliki rating
|
||||
<span className="font-bold text-red-500"> {rating}</span>
|
||||
</h2>
|
||||
<p className="mt-2"><strong>Penjelasan:</strong> {ratingDescriptions[rating]}</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!rating && step > questions.length && (
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-2xl font-semibold text-gray-800 mb-6">Hasil Jawaban Anda:</h2>
|
||||
<div className="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-50">
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-600">Pertanyaan</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-600">Jawaban</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{questions.map((question, index) => (
|
||||
<tr key={index} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 text-sm text-gray-800">{question}</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-800">{answers[index]}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => {
|
||||
setStep(0);
|
||||
setAnswers([]);
|
||||
setRating(null);
|
||||
setGameName("");
|
||||
setEasterEggActive(false);
|
||||
window.location.reload();
|
||||
}}
|
||||
className="bg-red-500 text-white px-4 py-2 rounded mt-4 w-full"
|
||||
className="flex-1 bg-red-500 hover:bg-red-600 text-white font-semibold px-6 py-3 rounded-xl transition-all duration-300"
|
||||
>
|
||||
Coba Lagi
|
||||
Kembali
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
onClick={submitAnswers}
|
||||
className="flex-1 bg-green-500 hover:bg-green-600 text-white font-semibold px-6 py-3 rounded-xl transition-all duration-300"
|
||||
>
|
||||
Cek Hasil
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Pop-up konfirmasi pilihan jawaban */}
|
||||
<PopUp
|
||||
isOpen={isPopUpOpen}
|
||||
onClose={() => setIsPopUpOpen(false)}
|
||||
onConfirm={confirmSelection}
|
||||
selectedOption={selectedOption}
|
||||
/>
|
||||
|
||||
{/* Pop-up konfirmasi cek hasil */}
|
||||
<PopUp
|
||||
isOpen={isConfirmPopupOpen}
|
||||
onClose={() => setIsConfirmPopupOpen(false)}
|
||||
onConfirm={confirmSubmit}
|
||||
selectedOption="Apakah Anda yakin ingin melihat hasil rating?"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tentang" ref={tentangRef}>
|
||||
<Tentang />
|
||||
{rating && (
|
||||
<div className="space-y-6">
|
||||
{easterEggActive ? (
|
||||
<div className="text-center">
|
||||
<h2 className="text-3xl font-bold text-red-600 mb-4">
|
||||
🎉 BISMILLAH LULUS 2025 DENGAN SEDIKIT REVISI 🎓
|
||||
</h2>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-semibold text-gray-800 mb-4">
|
||||
Game <span className="font-bold text-blue-600">{gameName}</span> memiliki rating
|
||||
<span className="font-bold text-red-600"> {rating}</span>
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-6">
|
||||
<strong>Penjelasan:</strong> {ratingDescriptions[rating]}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
setStep(0);
|
||||
setAnswers([]);
|
||||
setRating(null);
|
||||
setGameName("");
|
||||
setEasterEggActive(false);
|
||||
window.location.reload();
|
||||
}}
|
||||
className="w-full bg-red-500 hover:bg-red-600 text-white font-semibold px-6 py-3 rounded-xl transition-all duration-300"
|
||||
>
|
||||
Coba Lagi
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<KategoriRating />
|
||||
<div id="kontak" ref={kontakRef}>
|
||||
</div>
|
||||
|
||||
<div id="tentang" ref={tentangRef}>
|
||||
<Tentang />
|
||||
</div>
|
||||
|
||||
<KategoriRating />
|
||||
|
||||
<div id="kontak" ref={kontakRef}>
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
{/* Pop-ups */}
|
||||
<PopUp
|
||||
isOpen={isPopUpOpen}
|
||||
onClose={() => setIsPopUpOpen(false)}
|
||||
onConfirm={confirmSelection}
|
||||
selectedOption={selectedOption}
|
||||
/>
|
||||
|
||||
<PopUp
|
||||
isOpen={isConfirmPopupOpen}
|
||||
onClose={() => setIsConfirmPopupOpen(false)}
|
||||
onConfirm={confirmSubmit}
|
||||
selectedOption="Apakah Anda yakin ingin melihat hasil rating?"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,30 +1,35 @@
|
|||
import react from "react";
|
||||
import React from "react";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div className="bg-black p-4 text-center text-white">
|
||||
<p>© 2025 Rating Umur Game. All rights reserved.</p>
|
||||
<p>
|
||||
Developed by <a href="#" className="text-white hover:text-white">Dimas Adi</a>
|
||||
</p>
|
||||
<ul className="flex justify-center mb-4">
|
||||
<li className="mr-4">
|
||||
<a href="#" className="text-white hover:text-white">
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li className="mr-4">
|
||||
<a href="#" className="text-white hover:text-white">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-white hover:text-white">
|
||||
<i className="fab fa-instagram"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
<footer className="w-full bg-black text-white py-6 px-4 mt-auto">
|
||||
<div className="max-w-5xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<div className="text-center md:text-left">
|
||||
<p className="text-base md:text-lg font-semibold">© 2025 Rating Umur Game. All rights reserved.</p>
|
||||
<p className="text-sm mt-1">
|
||||
Developed by <a href="#" className="underline hover:text-yellow-400 transition-colors duration-200">Dimas Adi</a>
|
||||
</p>
|
||||
</div>
|
||||
<ul className="flex items-center justify-center gap-4 mt-2 md:mt-0">
|
||||
<li>
|
||||
<a href="#" className="hover:text-yellow-400 transition-colors duration-200" aria-label="Facebook">
|
||||
<i className="fab fa-facebook-f text-xl"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-yellow-400 transition-colors duration-200" aria-label="Twitter">
|
||||
<i className="fab fa-twitter text-xl"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-yellow-400 transition-colors duration-200" aria-label="Instagram">
|
||||
<i className="fab fa-instagram text-xl"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -1,46 +1,109 @@
|
|||
import react from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
const Header = ({ scrollToSection }) => {
|
||||
const handleNavigation = (section) => {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
const [lastScrollY, setLastScrollY] = useState(0);
|
||||
|
||||
const handleNavigation = (section) => {
|
||||
setIsMenuOpen(false);
|
||||
if (scrollToSection) {
|
||||
scrollToSection(section);
|
||||
} else {
|
||||
window.location.href = `/#${section}`;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const controlNavbar = () => {
|
||||
const currentScrollY = window.scrollY;
|
||||
if (currentScrollY > lastScrollY) {
|
||||
setIsVisible(false);
|
||||
} else {
|
||||
setIsVisible(true);
|
||||
}
|
||||
setLastScrollY(currentScrollY);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', controlNavbar);
|
||||
return () => {
|
||||
window.removeEventListener('scroll', controlNavbar);
|
||||
};
|
||||
}, [lastScrollY]);
|
||||
|
||||
return (
|
||||
<div className="bg-yellow-500 text-white p-4 flex justify-between">
|
||||
<h1 className="text-3xl font-bold"></h1>
|
||||
<nav>
|
||||
<ul className="flex justify-end">
|
||||
<li className="mr-4">
|
||||
<header className={`fixed w-full bg-yellow-500 shadow-md transition-transform duration-300 z-50 ${isVisible ? 'translate-y-0' : '-translate-y-full'}`}>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<div className="flex-shrink-0">
|
||||
<h1 className="text-2xl font-bold text-white"></h1>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<div className="md:hidden">
|
||||
<button
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
className="text-white hover:text-gray-200 focus:outline-none"
|
||||
>
|
||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
{isMenuOpen ? (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
) : (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Desktop menu */}
|
||||
<nav className="hidden md:flex space-x-8">
|
||||
<button
|
||||
onClick={() => handleNavigation("home")}
|
||||
className="text-white hover:text-gray-300"
|
||||
className="text-white hover:text-gray-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200"
|
||||
>
|
||||
Beranda
|
||||
</button>
|
||||
</li>
|
||||
<li className="mr-4">
|
||||
<button
|
||||
onClick={() => handleNavigation("tentang")}
|
||||
className="text-white hover:text-gray-300"
|
||||
className="text-white hover:text-gray-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200"
|
||||
>
|
||||
Tentang
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
onClick={() => handleNavigation("kontak")}
|
||||
className="text-white hover:text-gray-300"
|
||||
className="text-white hover:text-gray-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200"
|
||||
>
|
||||
Kontak
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu */}
|
||||
<div className={`md:hidden ${isMenuOpen ? 'block' : 'hidden'}`}>
|
||||
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-yellow-500 shadow-lg">
|
||||
<button
|
||||
onClick={() => handleNavigation("home")}
|
||||
className="block w-full text-left text-white hover:text-gray-200 px-3 py-2 rounded-md text-base font-medium"
|
||||
>
|
||||
Beranda
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleNavigation("tentang")}
|
||||
className="block w-full text-left text-white hover:text-gray-200 px-3 py-2 rounded-md text-base font-medium"
|
||||
>
|
||||
Tentang
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleNavigation("kontak")}
|
||||
className="block w-full text-left text-white hover:text-gray-200 px-3 py-2 rounded-md text-base font-medium"
|
||||
>
|
||||
Kontak
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
|
@ -2,89 +2,133 @@ import React, { useState } from "react";
|
|||
|
||||
const KategoriRating = () => {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const cards = [
|
||||
{ imageUrl: "/images/SU.png", text: "Semua Umur - Dapat dimainkan oleh semua orang tanpa batasan konten." },
|
||||
{ imageUrl: "/images/3+.png", text: "Usia 3 Tahun Keatas - Tidak ada konten dewasa, perjudian, atau interaksi online." },
|
||||
{ imageUrl: "/images/7+.png", text: "Usia 7 Tahun Keatas - Ada unsur ringan seperti kekerasan kartun atau bahasa ringan." },
|
||||
{ imageUrl: "/images/13+.png", text: "Usia 13 Tahun Keatas - Ada kekerasan moderat, simulasi perjudian, atau tema horor." },
|
||||
{ imageUrl: "/images/18+.png", text: "Usia 18 Tahun Keatas - Mengandung konten dewasa, kekerasan realistis, atau humor kasar." }
|
||||
];
|
||||
const cards = [
|
||||
{ imageUrl: "/images/SU.png", text: "Semua Umur - Dapat dimainkan oleh semua orang tanpa batasan konten." },
|
||||
{ imageUrl: "/images/3+.png", text: "Usia 3 Tahun Keatas - Tidak ada konten dewasa, perjudian, atau interaksi online." },
|
||||
{ imageUrl: "/images/7+.png", text: "Usia 7 Tahun Keatas - Ada unsur ringan seperti kekerasan kartun atau bahasa ringan." },
|
||||
{ imageUrl: "/images/13+.png", text: "Usia 13 Tahun Keatas - Ada kekerasan moderat, simulasi perjudian, atau tema horor." },
|
||||
{ imageUrl: "/images/18+.png", text: "Usia 18 Tahun Keatas - Mengandung konten dewasa, kekerasan realistis, atau humor kasar." }
|
||||
];
|
||||
|
||||
const nextSlide = () => {
|
||||
setCurrentIndex((prevIndex) => (prevIndex + 1) % cards.length);
|
||||
};
|
||||
const nextSlide = () => {
|
||||
setCurrentIndex((prevIndex) => (prevIndex + 1) % cards.length);
|
||||
};
|
||||
|
||||
const prevSlide = () => {
|
||||
setCurrentIndex((prevIndex) => (prevIndex - 1 + cards.length) % cards.length);
|
||||
};
|
||||
return (
|
||||
<div className="relative mt-[90px] mb-10 w-full h-[500px] flex items-center p-10">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
style={{ backgroundImage: "url('/images/bg2.jpg')" }}
|
||||
></div>
|
||||
<div className="absolute inset-0 bg-yellow-500 opacity-85"></div>
|
||||
const prevSlide = () => {
|
||||
setCurrentIndex((prevIndex) => (prevIndex - 1 + cards.length) % cards.length);
|
||||
};
|
||||
|
||||
{/* Konten utama */}
|
||||
<div className="relative flex w-full h-full items-center justify-center p-10">
|
||||
{/* Teks di sebelah kiri */}
|
||||
<div className="w-1/2 pr-5">
|
||||
<p className="text-black text-bold text-2xl">
|
||||
Dalam Peraturan Menteri Komunikasi dan Informatika Nomor 2 Tahun 2024,
|
||||
gim diklasifikasikan berdasarkan kelompok usia pengguna: 3+, 7+, 13+, dan 18+.
|
||||
Setiap kategori ini mempertimbangkan jenis konten yang ditampilkan, seperti kekerasan,
|
||||
bahasa, unsur horor, hingga interaksi daring. Semakin tinggi kelompok usia,
|
||||
semakin kompleks pula konten yang diizinkan, namun tetap dalam batasan yang
|
||||
tidak melanggar norma dan hukum yang berlaku. Klasifikasi ini bertujuan agar
|
||||
setiap pengguna dapat memainkan gim yang sesuai dengan tingkat kedewasaan mereka,
|
||||
serta membantu orang tua dalam mengawasi pilihan hiburan digital anak-anaknya.
|
||||
return (
|
||||
<div className="relative min-h-screen w-full flex items-center justify-center py-20 px-4 sm:px-6 lg:px-8">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center bg-fixed"
|
||||
style={{ backgroundImage: "url('/images/bg2.jpg')" }}
|
||||
></div>
|
||||
<div className="absolute inset-0 bg-yellow-500 opacity-90"></div>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
{/* Konten utama */}
|
||||
<div className="relative max-w-7xl mx-auto w-full">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-4 tracking-tight">
|
||||
Kategori Rating
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-white mx-auto mb-8"></div>
|
||||
</div>
|
||||
|
||||
<div className="w-1/2 flex flex-col items-end gap-5 relative">
|
||||
<div className="flex gap-5 overflow-hidden w-[500px]">
|
||||
{cards.slice(currentIndex, currentIndex + 2).map((card, index) => (
|
||||
<FlipCard key={index} imageUrl={card.imageUrl} text={card.text} />
|
||||
))}
|
||||
<div className="flex flex-col lg:flex-row gap-8 items-center">
|
||||
{/* Teks di sebelah kiri */}
|
||||
<div className="w-full lg:w-1/2">
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 shadow-xl">
|
||||
<p className="text-white text-lg md:text-xl leading-relaxed font-medium text-justify">
|
||||
Dalam Peraturan Menteri Komunikasi dan Informatika Nomor 2 Tahun 2024,
|
||||
gim diklasifikasikan berdasarkan kelompok usia pengguna: 3+, 7+, 13+, dan 18+.
|
||||
Setiap kategori ini mempertimbangkan jenis konten yang ditampilkan, seperti kekerasan,
|
||||
bahasa, unsur horor, hingga interaksi daring.
|
||||
</p>
|
||||
<p className="text-white text-lg md:text-xl leading-relaxed font-medium mt-4 text-justify">
|
||||
Semakin tinggi kelompok usia, semakin kompleks pula konten yang diizinkan,
|
||||
namun tetap dalam batasan yang tidak melanggar norma dan hukum yang berlaku.
|
||||
Klasifikasi ini bertujuan agar setiap pengguna dapat memainkan gim yang sesuai
|
||||
dengan tingkat kedewasaan mereka, serta membantu orang tua dalam mengawasi
|
||||
pilihan hiburan digital anak-anaknya.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cards di sebelah kanan */}
|
||||
<div className="w-full lg:w-1/2 flex flex-col items-center">
|
||||
<div className="flex gap-4 overflow-x-auto w-full max-w-xs sm:max-w-md md:max-w-lg lg:max-w-2xl justify-center">
|
||||
{cards.slice(currentIndex, currentIndex + (window.innerWidth < 1024 ? 1 : 2)).map((card, index) => (
|
||||
<FlipCard key={index} imageUrl={card.imageUrl} text={card.text} />
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-6 mt-8">
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
className="w-12 h-12 flex items-center justify-center rounded-full bg-white/80 hover:bg-yellow-400 text-yellow-600 hover:text-white shadow transition-all duration-300 focus:outline-none"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" className="w-6 h-6">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={nextSlide}
|
||||
className="w-12 h-12 flex items-center justify-center rounded-full bg-white/80 hover:bg-yellow-400 text-yellow-600 hover:text-white shadow transition-all duration-300 focus:outline-none"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" className="w-6 h-6">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={prevSlide} className="w-8 h-8 bg-gray-400 rounded-full">◀</button>
|
||||
<button onClick={nextSlide} className="w-8 h-8 bg-gray-400 rounded-full">▶</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
const FlipCard = ({ imageUrl, text }) => {
|
||||
const [flipped, setFlipped] = useState(false);
|
||||
const [flipped, setFlipped] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-64 h-80 perspective-1000"
|
||||
onMouseEnter={() => setFlipped(true)}
|
||||
onMouseLeave={() => setFlipped(false)}
|
||||
>
|
||||
<div
|
||||
className={`relative w-full h-full transition-transform duration-700 transform-style-3d rounded-3xl shadow-xl ${
|
||||
flipped ? "rotate-y-180" : ""
|
||||
}`}
|
||||
style={{ transformStyle: "preserve-3d", transition: "transform 0.7s ease-in-out", transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)" }}
|
||||
>
|
||||
{/* Depan - Gambar */}
|
||||
<div className="absolute w-full h-full flex items-center justify-center rounded-3xl" style={{ backfaceVisibility: "hidden" }}>
|
||||
<img src={imageUrl} alt="Gambar" className="w-full h-full object-cover rounded-3xl" />
|
||||
return (
|
||||
<div
|
||||
className="w-full max-w-[220px] sm:max-w-[260px] md:max-w-[300px] h-[320px] sm:h-[360px] md:h-[400px] perspective-1000 cursor-pointer flex-shrink-0"
|
||||
onMouseEnter={() => setFlipped(true)}
|
||||
onMouseLeave={() => setFlipped(false)}
|
||||
>
|
||||
<div
|
||||
className={`relative w-full h-full transition-transform duration-700 transform-style-3d rounded-3xl shadow-xl ${
|
||||
flipped ? "rotate-y-180" : ""
|
||||
}`}
|
||||
style={{
|
||||
transformStyle: "preserve-3d",
|
||||
transition: "transform 0.7s ease-in-out",
|
||||
transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)"
|
||||
}}
|
||||
>
|
||||
{/* Depan - Gambar */}
|
||||
<div
|
||||
className="absolute w-full h-full flex items-center justify-center rounded-3xl overflow-hidden bg-white"
|
||||
style={{ backfaceVisibility: "hidden" }}
|
||||
>
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt="Rating"
|
||||
className="w-full h-full object-contain rounded-3xl p-4"
|
||||
/>
|
||||
</div>
|
||||
{/* Belakang - Teks */}
|
||||
<div
|
||||
className="absolute w-full h-full bg-white/90 backdrop-blur-sm flex items-center justify-center rounded-3xl p-6"
|
||||
style={{ backfaceVisibility: "hidden", transform: "rotateY(180deg)" }}
|
||||
>
|
||||
<p className="text-gray-800 text-center text-lg font-medium leading-relaxed">
|
||||
{text}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Belakang - Teks */}
|
||||
<div className="absolute w-full h-full bg-gray-200 flex items-center justify-center rounded-3xl p-4" style={{ backfaceVisibility: "hidden", transform: "rotateY(180deg)" }}>
|
||||
<p className="text-black text-center px-4 py-2 text-2xl rounded-lg">{text}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default KategoriRating;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,26 @@
|
|||
import React from "react";
|
||||
|
||||
|
||||
const PopUp = ({ isOpen, onClose, onConfirm, selectedOption }) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
|
||||
<div className="bg-white p-6 rounded-lg shadow-lg text-center">
|
||||
<p>Apakah Anda yakin memilih: <strong>{selectedOption}</strong>?</p>
|
||||
<div className="mt-4 flex justify-center gap-4">
|
||||
<div className="fixed inset-0 flex items-center justify-center bg-black/40 z-50">
|
||||
<div className="bg-white rounded-2xl shadow-2xl px-8 py-7 max-w-xs sm:max-w-sm w-full text-center font-sans">
|
||||
<p className="text-lg sm:text-xl font-semibold text-gray-800 mb-4">
|
||||
Apakah Anda yakin memilih:
|
||||
<br />
|
||||
<span className="block mt-2 text-yellow-600 text-xl font-bold">{selectedOption}</span>
|
||||
</p>
|
||||
<div className="mt-6 flex justify-center gap-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-700"
|
||||
className="px-6 py-2 rounded-xl bg-gray-200 text-gray-700 font-semibold hover:bg-gray-300 transition-colors duration-200 shadow-sm focus:outline-none"
|
||||
>
|
||||
Kembali
|
||||
</button>
|
||||
<button
|
||||
onClick={onConfirm}
|
||||
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700"
|
||||
className="px-6 py-2 rounded-xl bg-yellow-500 text-white font-semibold hover:bg-yellow-600 transition-colors duration-200 shadow-sm focus:outline-none"
|
||||
>
|
||||
Lanjut
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,50 @@
|
|||
import react from "react";
|
||||
import React from "react";
|
||||
|
||||
const Tentang = () => {
|
||||
return (
|
||||
<div className="bg-[#BBBBBB] p-5 text-black text-center w-full h-[230px]">
|
||||
<h1 className="text-3xl font-bold mt-4">Tentang</h1>
|
||||
<h1 className="text-xl mb-4">Klasifikasi gim itu penting, bukan untuk membatasi, tetapi agar semua orang terutama anak muda dapat bermain dengan aman dan sesuai usia.
|
||||
Berdasarkan Peraturan Menteri Komunikasi dan Informatika Nomor 2 Tahun 2024, setiap gim yang beredar di Indonesia perlu melewati proses klasifikasi yang
|
||||
mempertimbangkan konten dan nilai-nilai budaya kita. Di sini, kami mendukung langkah ini dengan semangat terbuka, agar para pengembang dan pemain sama-sama
|
||||
tahu mana yang pas buat siapa. Soal seru-seruan, tetap jalan, tapi tetap bijak juga.</h1>
|
||||
<div className="bg-[#BBBBBB] w-full min-h-[400px] py-16 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-6 text-gray-800 tracking-tight">
|
||||
Tentang
|
||||
</h1>
|
||||
<div className="w-24 h-1 bg-yellow-500 mx-auto mb-8"></div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/30 backdrop-blur-sm rounded-2xl p-8 shadow-lg">
|
||||
<p className="text-lg md:text-xl leading-relaxed text-gray-800 font-medium text-justify">
|
||||
Klasifikasi gim itu penting, bukan untuk membatasi, tetapi agar semua orang terutama anak muda dapat bermain dengan aman dan sesuai usia.
|
||||
</p>
|
||||
|
||||
<p className="text-lg md:text-xl leading-relaxed text-gray-800 mt-6 font-medium text-justify">
|
||||
Berdasarkan Peraturan Menteri Komunikasi dan Informatika Nomor 2 Tahun 2024, setiap gim yang beredar di Indonesia perlu melewati proses klasifikasi yang
|
||||
mempertimbangkan konten dan nilai-nilai budaya kita.
|
||||
</p>
|
||||
|
||||
<p className="text-lg md:text-xl leading-relaxed text-gray-800 mt-6 font-medium text-justify">
|
||||
Di sini, kami mendukung langkah ini dengan semangat terbuka, agar para pengembang dan pemain sama-sama
|
||||
tahu mana yang pas buat siapa. Soal seru-seruan, tetap jalan, tapi tetap bijak juga.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="bg-white/30 backdrop-blur-sm rounded-xl p-6 text-center">
|
||||
<div className="text-3xl mb-3">🏷️</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Klasifikasi</h3>
|
||||
<p className="text-gray-700">Sistem penilaian yang tepat untuk setiap gim</p>
|
||||
</div>
|
||||
<div className="bg-white/30 backdrop-blur-sm rounded-xl p-6 text-center">
|
||||
<div className="text-3xl mb-3">🛡️</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Keamanan</h3>
|
||||
<p className="text-gray-700">Melindungi pemain sesuai usia</p>
|
||||
</div>
|
||||
<div className="bg-white/30 backdrop-blur-sm rounded-xl p-6 text-center">
|
||||
<div className="text-3xl mb-3">🎮</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Developer Game Indonesia</h3>
|
||||
<p className="text-gray-700">Membantu developer game Indonesia dalam menentukan rating umur pada game yang sedang dibuat.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -68,68 +68,69 @@ const ListGames = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<div className="min-h-screen flex flex-col font-sans bg-gray-50">
|
||||
<Header />
|
||||
|
||||
<div className="p-10">
|
||||
<h1 className="text-3xl font-bold mb-6">Daftar Game</h1>
|
||||
{/* Add top padding to prevent header overlap */}
|
||||
<div className="pt-20 px-4 sm:px-8 lg:px-16 max-w-7xl mx-auto w-full">
|
||||
<h1 className="text-4xl font-extrabold mb-8 text-gray-800 tracking-tight">Daftar Game</h1>
|
||||
|
||||
{/* Grid untuk filter di kiri, search + list game di kanan */}
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
{/* Bagian 1: Filter Rating */}
|
||||
<aside className="bg-gray-200 p-4 rounded h-fit">
|
||||
<h2 className="text-xl font-bold mb-4">Filter Rating</h2>
|
||||
<div className="space-y-2">
|
||||
{Object.keys(ratingDescriptions).map((rating, index) => (
|
||||
<label key={index} className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="w-4 h-4"
|
||||
checked={selectedRatings.includes(rating)}
|
||||
onChange={() => handleRatingFilter(rating)}
|
||||
/>
|
||||
<span>{ratingDescriptions[rating].label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</aside>
|
||||
{/* Responsive grid: filter on top on mobile, left on desktop */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
{/* Filter */}
|
||||
<aside className="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-md h-fit mb-4 md:mb-0">
|
||||
<h2 className="text-2xl font-bold mb-4 text-yellow-600">Filter Rating</h2>
|
||||
<div className="space-y-3">
|
||||
{Object.keys(ratingDescriptions).map((rating, index) => (
|
||||
<label key={index} className="flex items-center space-x-3 text-lg">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="w-5 h-5 accent-yellow-500 rounded"
|
||||
checked={selectedRatings.includes(rating)}
|
||||
onChange={() => handleRatingFilter(rating)}
|
||||
/>
|
||||
<span>{ratingDescriptions[rating].label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Bagian 2: Daftar Game */}
|
||||
<main className="col-span-3">
|
||||
{/* Bagian 3: Search Form */}
|
||||
<div className="mb-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Cari game..."
|
||||
className="p-2 border w-full"
|
||||
value={searchTerm}
|
||||
onChange={handleSearch}
|
||||
/>
|
||||
</div>
|
||||
{/* Main Content */}
|
||||
<main className="md:col-span-3">
|
||||
{/* Search Bar */}
|
||||
<div className="mb-6">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Cari game..."
|
||||
className="w-full p-4 rounded-xl border-2 border-gray-200 focus:border-yellow-500 focus:ring-2 focus:ring-yellow-100 transition-all duration-300 bg-white/90 text-lg"
|
||||
value={searchTerm}
|
||||
onChange={handleSearch}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Card List Game */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{filteredGames.length > 0 ? (
|
||||
filteredGames.map((game, index) => {
|
||||
const ratingInfo = ratingDescriptions[game.rating] || {};
|
||||
return (
|
||||
<div key={index} className="border p-4 bg-gray-200 rounded shadow-md">
|
||||
<h3 className="text-lg font-bold">{game.name}</h3>
|
||||
<p className={`font-semibold ${ratingInfo.color}`}>
|
||||
Rating: {ratingInfo.label}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600">
|
||||
{ratingInfo.description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="text-gray-500">Tidak ada game yang sesuai.</p>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{/* Game Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredGames.length > 0 ? (
|
||||
filteredGames.map((game, index) => {
|
||||
const ratingInfo = ratingDescriptions[game.rating] || {};
|
||||
return (
|
||||
<div key={index} className="bg-white rounded-2xl shadow-lg p-6 flex flex-col gap-2 hover:shadow-xl transition-shadow duration-300">
|
||||
<h3 className="text-xl font-bold text-gray-800">{game.name}</h3>
|
||||
<p className={`font-semibold ${ratingInfo.color}`}>
|
||||
Rating: {ratingInfo.label}
|
||||
</p>
|
||||
<p className="text-gray-500 text-base">
|
||||
{ratingInfo.description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="text-gray-500 col-span-full text-center">Tidak ada game yang sesuai.</p>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer className="mt-auto" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue