import React, { useState, useEffect } from 'react';
import './search.css';
function Search() {
const [searchTerm, setSearchTerm] = useState('');
const [popupVisible, setPopupVisible] = useState(false);
const [currentAnime, setCurrentAnime] = useState(null);
const [animeItems, setAnimeItems] = useState([]); // State để lưu dữ liệu từ API
const handleSearch = (event) => {
setSearchTerm(event.target.value);
};
// Gọi API khi component được mount
useEffect(() => {
const fetchAnimeData = async () => {
try {
const response = await fetch('https://raw.githubusercontent.com/Huyenuiio/55/refs/heads/main/anime.json'); // Thay bằng URL API thực tế
const data = await response.json();
// Giả sử API trả về mảng với các thuộc tính: title, link, image, description
setAnimeItems(data);
} catch (error) {
console.error('Error fetching anime data:', error);
}
};
fetchAnimeData();
}, []); // Chỉ chạy một lần khi component mount
const showPopup = (anime) => {
setCurrentAnime(anime);
setPopupVisible(true);
};
const hidePopup = () => {
setPopupVisible(false);
setCurrentAnime(null);
};
return (
<>
{animeItems
.filter((item) => item.title.toLowerCase().includes(searchTerm.toLowerCase()))
.map((item, index) => (
{popupVisible && currentAnime && (
showPopup(item)}
onMouseOut={hidePopup}
>
{item.title}
))}
{item.title}
{currentAnime.description}
)}
);
}
export default Search;