menambahakan fitur autocmplate
dan juga menambahkan pemanis bg2
This commit is contained in:
Zeakeers
parent
d39b808f65
commit
17b5eaa5b3
Binary file not shown.
|
After Width: | Height: | Size: 422 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Header from "./components/Header";
|
||||
import Footer from "./components/Footer";
|
||||
import Tentang from "./components/Tentang";
|
||||
|
|
@ -32,6 +32,7 @@ const ratingDescriptions = {
|
|||
|
||||
const App = () => {
|
||||
const [gameName, setGameName] = useState("");
|
||||
const [suggestions, setSuggestions] = useState([]);
|
||||
const [step, setStep] = useState(0);
|
||||
const [answers, setAnswers] = useState([]);
|
||||
const [rating, setRating] = useState(null);
|
||||
|
|
@ -39,6 +40,22 @@ const App = () => {
|
|||
const [isConfirmPopupOpen, setIsConfirmPopupOpen] = useState(false);
|
||||
const [selectedOption, setSelectedOption] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (gameName.length > 1) {
|
||||
fetch(`http://127.0.0.1:5000/autocomplete?query=${gameName}`)
|
||||
.then(res => res.json())
|
||||
.then(data => setSuggestions(data.slice(0, 4)))
|
||||
.catch(err => console.error("Error fetching autocomplete:", err));
|
||||
} else {
|
||||
setSuggestions([]);
|
||||
}
|
||||
}, [gameName]);
|
||||
|
||||
const handleSelectGame = (selectedGame) => {
|
||||
setGameName(selectedGame);
|
||||
setSuggestions([]);
|
||||
};
|
||||
|
||||
const checkGame = async () => {
|
||||
const response = await fetch("http://127.0.0.1:5000/check_game", {
|
||||
method: "POST",
|
||||
|
|
@ -122,6 +139,19 @@ const App = () => {
|
|||
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>
|
||||
)}
|
||||
<button
|
||||
onClick={checkGame}
|
||||
className="bg-blue-500 text-white px-4 py-2 rounded mt-4"
|
||||
|
|
|
|||
|
|
@ -18,30 +18,44 @@ const KategoriRating = () => {
|
|||
setCurrentIndex((prevIndex) => (prevIndex - 1 + cards.length) % cards.length);
|
||||
};
|
||||
return (
|
||||
<div className="bg-yellow-500 mt-[90px] mb-10 w-full h-[400px] flex items-center p-10 relative">
|
||||
{/* Teks di sebelah kiri */}
|
||||
<div className="w-1/2 pr-5">
|
||||
<p className="text-black text-3xl">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu
|
||||
turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec
|
||||
fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus
|
||||
elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus.
|
||||
Class aptent taciti sociosqu ad litora torquent per conubia.
|
||||
</p>
|
||||
</div>
|
||||
{/* Kotak putih sejajar kiri-kanan dengan efek flip */}
|
||||
<div className="w-1/2 flex flex-col items-end gap-5">
|
||||
<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>
|
||||
<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 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>
|
||||
|
||||
{/* Konten utama */}
|
||||
<div className="relative flex w-full h-full items-center justify-between p-10">
|
||||
{/* Teks di sebelah kiri */}
|
||||
<div className="w-1/2 pr-5">
|
||||
<p className="text-black text-bold text-3xl">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis
|
||||
molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla
|
||||
accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus.
|
||||
Maecenas eget condimentum velit, sit amet feugiat lectusLorem ipsum dolor
|
||||
sit amet, consectetur adipiscing elit. Etiam eu turpismolestie, dictum est
|
||||
a, mattis tellus. Sed dignissim, metus nec fringillaaccumsan, risus sem
|
||||
sollicitudin lacus,ut interdum tellus elit sed risus.amet feugiat
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Kotak putih sejajar kiri-kanan dengan efek flip */}
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue