kever/epic-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
hxt
2025-04-17 21:05:14 +08:00
parent e431134d59
commit 878c05848d
1 changed files with 298 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

353
src/pages/Characters.tsx
View File

@@ -1,6 +1,6 @@
// The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. // The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work.
import React, { useState } from "react"; import React, { useState, useEffect, useRef } from "react";
const Characters: React.FC = () => { const Characters: React.FC = () => {
const [selectedStars, setSelectedStars] = useState<string>("All Stars"); const [selectedStars, setSelectedStars] = useState<string>("All Stars");
@@ -8,6 +8,37 @@ const Characters: React.FC = () => {
const [selectedClass, setSelectedClass] = useState<string>("All"); const [selectedClass, setSelectedClass] = useState<string>("All");
const [selectedZodiac, setSelectedZodiac] = useState<string>("All"); const [selectedZodiac, setSelectedZodiac] = useState<string>("All");
const [searchTerm, setSearchTerm] = useState<string>(""); const [searchTerm, setSearchTerm] = useState<string>("");
const [selectedBuffs, setSelectedBuffs] = useState<string[]>([]);
const [selectedDebuffs, setSelectedDebuffs] = useState<string[]>([]);
const [isBuffsOpen, setIsBuffsOpen] = useState<boolean>(false);
const [isDebuffsOpen, setIsDebuffsOpen] = useState<boolean>(false);
// 添加ref用于下拉框
const buffsDropdownRef = useRef<HTMLDivElement>(null);
const debuffsDropdownRef = useRef<HTMLDivElement>(null);
// 添加全局点击事件监听器
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
// 检查点击是否在增益下拉框外部
if (buffsDropdownRef.current && !buffsDropdownRef.current.contains(event.target as Node)) {
setIsBuffsOpen(false);
}
// 检查点击是否在减益下拉框外部
if (debuffsDropdownRef.current && !debuffsDropdownRef.current.contains(event.target as Node)) {
setIsDebuffsOpen(false);
}
};
// 添加事件监听器
document.addEventListener('mousedown', handleClickOutside);
// 清理函数
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
const heroes = [ const heroes = [
{ {
@@ -391,6 +422,77 @@ const Characters: React.FC = () => {
}, },
]; ];
// 测试数据
const buffsData = [
{ id: "attack_up", name: "攻击力提升" },
{ id: "defense_up", name: "防御力提升" },
{ id: "speed_up", name: "速度提升" },
{ id: "critical_rate_up", name: "暴击率提升" },
{ id: "critical_damage_up", name: "暴击伤害提升" },
{ id: "effectiveness_up", name: "效果命中提升" },
{ id: "effect_resistance_up", name: "效果抗性提升" },
{ id: "barrier", name: "护盾" },
{ id: "invincible", name: "无敌" },
{ id: "immunity", name: "免疫" },
{ id: "continuous_heal", name: "持续回复" },
{ id: "counter_attack", name: "反击" },
];
const debuffsData = [
{ id: "attack_down", name: "攻击力降低" },
{ id: "defense_down", name: "防御力降低" },
{ id: "speed_down", name: "速度降低" },
{ id: "critical_rate_down", name: "暴击率降低" },
{ id: "critical_damage_down", name: "暴击伤害降低" },
{ id: "effectiveness_down", name: "效果命中降低" },
{ id: "effect_resistance_down", name: "效果抗性降低" },
{ id: "bleed", name: "出血" },
{ id: "burn", name: "燃烧" },
{ id: "poison", name: "中毒" },
{ id: "stun", name: "眩晕" },
{ id: "silence", name: "沉默" },
{ id: "sleep", name: "睡眠" },
{ id: "provoke", name: "挑衅" },
{ id: "unhealable", name: "无法回复" },
{ id: "unbuffable", name: "无法获得增益" },
];
// 处理增益选择
const handleBuffToggle = (buffId: string) => {
setSelectedBuffs(prev =>
prev.includes(buffId)
? prev.filter(id => id !== buffId)
: [...prev, buffId]
);
window.scrollTo({ top: 0, behavior: 'smooth' });
};
// 处理减益选择
const handleDebuffToggle = (debuffId: string) => {
setSelectedDebuffs(prev =>
prev.includes(debuffId)
? prev.filter(id => id !== debuffId)
: [...prev, debuffId]
);
window.scrollTo({ top: 0, behavior: 'smooth' });
};
// 获取选中的增益名称
const getSelectedBuffsNames = () => {
return selectedBuffs
.map(id => buffsData.find(buff => buff.id === id)?.name)
.filter(Boolean)
.join(", ");
};
// 获取选中的减益名称
const getSelectedDebuffsNames = () => {
return selectedDebuffs
.map(id => debuffsData.find(debuff => debuff.id === id)?.name)
.filter(Boolean)
.join(", ");
};
const renderStars = (count: number) => { const renderStars = (count: number) => {
return Array(count) return Array(count)
.fill(0) .fill(0)
@@ -498,6 +600,9 @@ const Characters: React.FC = () => {
return false; return false;
} }
// 这里可以添加对增益和减益的筛选逻辑
// 目前仅作为示例，实际应用中需要根据英雄数据添加相应的筛选逻辑
return true; return true;
}); });
@@ -513,28 +618,35 @@ const Characters: React.FC = () => {
</span> </span>
</h1> </h1>
<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-6 rounded-lg mb-8 border border-[#C17F59]/30"> {/* 固定在顶部的搜索组件 */}
<div className="sticky top-0 z-50 bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-6 rounded-lg mb-8 border border-[#C17F59]/30 backdrop-blur-sm min-h-[320px]">
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4"> <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
<input <input
type="text" type="text"
placeholder="Hero Name" placeholder="Hero Name"
className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm w-full text-[#E6B17E] placeholder-[#9B8579] focus:border-[#C17F59] focus:outline-none" className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm w-full text-[#E6B17E] placeholder-[#9B8579] focus:border-[#C17F59] focus:outline-none"
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => {
setSearchTerm(e.target.value);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
/> />
</div> </div>
<div className="mb-4"> <div className="mb-4 h-10">
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{["All Stars", "3 Stars", "4 Stars", "5 Stars"].map((stars) => ( {["All Stars", "3 Stars", "4 Stars", "5 Stars"].map((stars) => (
<button <button
key={stars} key={stars}
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${ className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
selectedStars === stars selectedStars === stars
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]" ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30" : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
}`} }`}
onClick={() => setSelectedStars(stars)} onClick={() => {
setSelectedStars(stars);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
> >
{stars} {stars}
</button> </button>
@@ -542,26 +654,32 @@ const Characters: React.FC = () => {
</div> </div>
</div> </div>
<div className="mb-4"> <div className="mb-4 h-10">
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
<button <button
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${ className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
selectedElement === "All" selectedElement === "All"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]" ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30" : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
}`} }`}
onClick={() => setSelectedElement("All")} onClick={() => {
setSelectedElement("All");
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
> >
All All
</button> </button>
<button <button
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${ className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${
selectedElement === "fire" selectedElement === "fire"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]" ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30" : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
}`} }`}
onClick={() => setSelectedElement("fire")} onClick={() => {
setSelectedElement("fire");
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
> >
<div className="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center"> <div className="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center">
<i className="fas fa-fire text-white text-xs"></i> <i className="fas fa-fire text-white text-xs"></i>
@@ -569,12 +687,15 @@ const Characters: React.FC = () => {
</button> </button>
<button <button
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${ className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${
selectedElement === "water" selectedElement === "water"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]" ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30" : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
}`} }`}
onClick={() => setSelectedElement("water")} onClick={() => {
setSelectedElement("water");
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
> >
<div className="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center"> <div className="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center">
<i className="fas fa-tint text-white text-xs"></i> <i className="fas fa-tint text-white text-xs"></i>
@@ -582,12 +703,15 @@ const Characters: React.FC = () => {
</button> </button>
<button <button
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${ className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${
selectedElement === "earth" selectedElement === "earth"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]" ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30" : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
}`} }`}
onClick={() => setSelectedElement("earth")} onClick={() => {
setSelectedElement("earth");
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
> >
<div className="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center"> <div className="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
<i className="fas fa-leaf text-white text-xs"></i> <i className="fas fa-leaf text-white text-xs"></i>
@@ -595,12 +719,15 @@ const Characters: React.FC = () => {
</button> </button>
<button <button
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${ className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${
selectedElement === "light" selectedElement === "light"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]" ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30" : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
}`} }`}
onClick={() => setSelectedElement("light")} onClick={() => {
setSelectedElement("light");
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
> >
<div className="w-5 h-5 rounded-full bg-yellow-500 flex items-center justify-center"> <div className="w-5 h-5 rounded-full bg-yellow-500 flex items-center justify-center">
<i className="fas fa-sun text-white text-xs"></i> <i className="fas fa-sun text-white text-xs"></i>
@@ -608,12 +735,15 @@ const Characters: React.FC = () => {
</button> </button>
<button <button
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${ className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${
selectedElement === "dark" selectedElement === "dark"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]" ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30" : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
}`} }`}
onClick={() => setSelectedElement("dark")} onClick={() => {
setSelectedElement("dark");
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
> >
<div className="w-5 h-5 rounded-full bg-purple-700 flex items-center justify-center"> <div className="w-5 h-5 rounded-full bg-purple-700 flex items-center justify-center">
<i className="fas fa-moon text-white text-xs"></i> <i className="fas fa-moon text-white text-xs"></i>
@@ -622,15 +752,18 @@ const Characters: React.FC = () => {
</div> </div>
</div> </div>
<div className="mb-4"> <div className="mb-4 h-10">
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
<button <button
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${ className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
selectedClass === "All" selectedClass === "All"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]" ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30" : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
}`} }`}
onClick={() => setSelectedClass("All")} onClick={() => {
setSelectedClass("All");
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
> >
All All
</button> </button>
@@ -645,12 +778,15 @@ const Characters: React.FC = () => {
].map((classType) => ( ].map((classType) => (
<button <button
key={classType} key={classType}
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${ className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${
selectedClass === classType selectedClass === classType
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]" ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30" : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
}`} }`}
onClick={() => setSelectedClass(classType)} onClick={() => {
setSelectedClass(classType);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
> >
{getClassIcon(classType)} {getClassIcon(classType)}
</button> </button>
@@ -658,15 +794,18 @@ const Characters: React.FC = () => {
</div> </div>
</div> </div>
<div className="mb-4"> <div className="mb-4 h-10">
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
<button <button
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${ className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
selectedZodiac === "All" selectedZodiac === "All"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]" ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30" : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
}`} }`}
onClick={() => setSelectedZodiac("All")} onClick={() => {
setSelectedZodiac("All");
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
> >
All All
</button> </button>
@@ -674,12 +813,15 @@ const Characters: React.FC = () => {
{[...Array(12)].map((_, index) => ( {[...Array(12)].map((_, index) => (
<button <button
key={index} key={index}
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${ className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${
selectedZodiac === `zodiac-${index}` selectedZodiac === `zodiac-${index}`
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]" ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30" : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
}`} }`}
onClick={() => setSelectedZodiac(`zodiac-${index}`)} onClick={() => {
setSelectedZodiac(`zodiac-${index}`);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
> >
{getZodiacIcon(index)} {getZodiacIcon(index)}
</button> </button>
@@ -688,11 +830,112 @@ const Characters: React.FC = () => {
</div> </div>
<div className="grid grid-cols-1 gap-2"> <div className="grid grid-cols-1 gap-2">
<div className="bg-[#1A1412] px-4 py-2 rounded-md border border-[#C17F59]/30"> {/* 增益多选下拉框 */}
<p className="text-[#9B8579]">Select Buffs</p> <div className="relative" ref={buffsDropdownRef}>
<div
className="bg-[#1A1412] px-4 py-2 rounded-md border border-[#C17F59]/30 cursor-pointer flex justify-between items-center min-h-[40px]"
onClick={() => setIsBuffsOpen(!isBuffsOpen)}
>
<div className="flex flex-wrap gap-1 items-center">
<p className="text-[#9B8579]">选择增益效果</p>
{selectedBuffs.length > 0 && (
<div className="flex flex-wrap gap-1 ml-2">
{selectedBuffs.map(buffId => {
const buff = buffsData.find(b => b.id === buffId);
return buff ? (
<span
key={buff.id}
className="bg-[#C17F59]/20 text-[#E6B17E] text-xs px-2 py-0.5 rounded-full border border-[#C17F59]/30 flex items-center"
>
{buff.name}
<button
className="ml-1 text-[#C17F59] hover:text-[#E6B17E]"
onClick={(e) => {
e.stopPropagation();
handleBuffToggle(buff.id);
}}
>
<i className="fas fa-times text-xs"></i>
</button>
</span>
) : null;
})}
</div>
)}
</div>
<i className={`fas fa-chevron-${isBuffsOpen ? 'up' : 'down'} text-[#C17F59]`}></i>
</div>
{isBuffsOpen && (
<div className="absolute z-50 w-full mt-1 bg-[#2A211E] border border-[#C17F59]/30 rounded-md max-h-60 overflow-y-auto">
{buffsData.map(buff => (
<div
key={buff.id}
className="px-4 py-2 hover:bg-[#1A1412] cursor-pointer flex items-center"
onClick={() => handleBuffToggle(buff.id)}
>
<div className={`w-5 h-5 rounded border ${selectedBuffs.includes(buff.id) ? 'bg-[#C17F59] border-[#C17F59]' : 'border-[#C17F59]/30'} flex items-center justify-center mr-2`}>
{selectedBuffs.includes(buff.id) && <i className="fas fa-check text-[#1A1412] text-xs"></i>}
</div>
<span className="text-[#E6B17E]">{buff.name}</span>
</div>
))}
</div>
)}
</div> </div>
<div className="bg-[#1A1412] px-4 py-2 rounded-md border border-[#C17F59]/30">
<p className="text-[#9B8579]">Select Debuffs</p> {/* 减益多选下拉框 */}
<div className="relative" ref={debuffsDropdownRef}>
<div
className="bg-[#1A1412] px-4 py-2 rounded-md border border-[#C17F59]/30 cursor-pointer flex justify-between items-center min-h-[40px]"
onClick={() => setIsDebuffsOpen(!isDebuffsOpen)}
>
<div className="flex flex-wrap gap-1 items-center">
<p className="text-[#9B8579]">选择减益效果</p>
{selectedDebuffs.length > 0 && (
<div className="flex flex-wrap gap-1 ml-2">
{selectedDebuffs.map(debuffId => {
const debuff = debuffsData.find(d => d.id === debuffId);
return debuff ? (
<span
key={debuff.id}
className="bg-[#C17F59]/20 text-[#E6B17E] text-xs px-2 py-0.5 rounded-full border border-[#C17F59]/30 flex items-center"
>
{debuff.name}
<button
className="ml-1 text-[#C17F59] hover:text-[#E6B17E]"
onClick={(e) => {
e.stopPropagation();
handleDebuffToggle(debuff.id);
}}
>
<i className="fas fa-times text-xs"></i>
</button>
</span>
) : null;
})}
</div>
)}
</div>
<i className={`fas fa-chevron-${isDebuffsOpen ? 'up' : 'down'} text-[#C17F59]`}></i>
</div>
{isDebuffsOpen && (
<div className="absolute z-50 w-full mt-1 bg-[#2A211E] border border-[#C17F59]/30 rounded-md max-h-60 overflow-y-auto">
{debuffsData.map(debuff => (
<div
key={debuff.id}
className="px-4 py-2 hover:bg-[#1A1412] cursor-pointer flex items-center"
onClick={() => handleDebuffToggle(debuff.id)}
>
<div className={`w-5 h-5 rounded border ${selectedDebuffs.includes(debuff.id) ? 'bg-[#C17F59] border-[#C17F59]' : 'border-[#C17F59]/30'} flex items-center justify-center mr-2`}>
{selectedDebuffs.includes(debuff.id) && <i className="fas fa-check text-[#1A1412] text-xs"></i>}
</div>
<span className="text-[#E6B17E]">{debuff.name}</span>
</div>
))}
</div>
)}
</div> </div>
</div> </div>
</div> </div>