init
This commit is contained in:
hxt
@@ -118,6 +118,277 @@ const Characters: React.FC = () => {
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20soul%20weaver%20with%20dark%20purple%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=12&orientation=squarish",
|
||||
},
|
||||
// 新增30个英雄数据
|
||||
{
|
||||
id: 13,
|
||||
name: "Alencia",
|
||||
stars: 5,
|
||||
element: "earth",
|
||||
class: "Earth Knight",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20knight%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=13&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
name: "Ambitious Tywin",
|
||||
stars: 5,
|
||||
element: "light",
|
||||
class: "Light Knight",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20knight%20with%20blonde%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=14&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
name: "Angelica",
|
||||
stars: 4,
|
||||
element: "water",
|
||||
class: "Water Soul Weaver",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20healer%20with%20blue%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=15&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
name: "Angel of Light Angelica",
|
||||
stars: 5,
|
||||
element: "light",
|
||||
class: "Light Soul Weaver",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20healer%20with%20white%20hair%20and%20wings%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=16&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
name: "Arbiter Vildred",
|
||||
stars: 5,
|
||||
element: "dark",
|
||||
class: "Dark Thief",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20thief%20with%20black%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=17&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
name: "Architect Laika",
|
||||
stars: 5,
|
||||
element: "fire",
|
||||
class: "Fire Warrior",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20warrior%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=18&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
name: "Armin",
|
||||
stars: 4,
|
||||
element: "earth",
|
||||
class: "Earth Knight",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20knight%20with%20brown%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=19&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
name: "Assassin Cartuja",
|
||||
stars: 4,
|
||||
element: "dark",
|
||||
class: "Dark Thief",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20thief%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=20&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
name: "Assassin Coli",
|
||||
stars: 4,
|
||||
element: "dark",
|
||||
class: "Dark Thief",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20thief%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=21&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
name: "Auxiliary Lots",
|
||||
stars: 5,
|
||||
element: "light",
|
||||
class: "Light Mage",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20mage%20with%20white%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=22&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
name: "Baal & Sezan",
|
||||
stars: 5,
|
||||
element: "fire",
|
||||
class: "Fire Mage",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20mage%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=23&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
name: "Basar",
|
||||
stars: 5,
|
||||
element: "earth",
|
||||
class: "Earth Mage",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20mage%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=24&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
name: "Batisse",
|
||||
stars: 3,
|
||||
element: "fire",
|
||||
class: "Fire Warrior",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20warrior%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=25&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
name: "Bellona",
|
||||
stars: 5,
|
||||
element: "earth",
|
||||
class: "Earth Warrior",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20warrior%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=26&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
name: "Benevolent Romann",
|
||||
stars: 5,
|
||||
element: "light",
|
||||
class: "Light Mage",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20mage%20with%20white%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=27&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 28,
|
||||
name: "Blaze Dingo",
|
||||
stars: 4,
|
||||
element: "fire",
|
||||
class: "Fire Soul Weaver",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20healer%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=28&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
name: "Blood Blade Karin",
|
||||
stars: 5,
|
||||
element: "dark",
|
||||
class: "Dark Thief",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20thief%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=29&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
name: "Blue Krau",
|
||||
stars: 5,
|
||||
element: "water",
|
||||
class: "Water Knight",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20knight%20with%20blue%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=30&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 31,
|
||||
name: "Briar Witch Iseria",
|
||||
stars: 5,
|
||||
element: "dark",
|
||||
class: "Dark Ranger",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20ranger%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=31&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
name: "Butcher Corps Inquisitor",
|
||||
stars: 4,
|
||||
element: "dark",
|
||||
class: "Dark Warrior",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20warrior%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=32&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 33,
|
||||
name: "Cecilia",
|
||||
stars: 5,
|
||||
element: "earth",
|
||||
class: "Earth Knight",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20knight%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=33&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 34,
|
||||
name: "Celestial Mercedes",
|
||||
stars: 5,
|
||||
element: "light",
|
||||
class: "Light Mage",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20mage%20with%20white%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=34&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 35,
|
||||
name: "Cerise",
|
||||
stars: 5,
|
||||
element: "fire",
|
||||
class: "Fire Ranger",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20ranger%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=35&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 36,
|
||||
name: "Challenger Dominiel",
|
||||
stars: 5,
|
||||
element: "light",
|
||||
class: "Light Mage",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20mage%20with%20white%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=36&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 37,
|
||||
name: "Champion Zerato",
|
||||
stars: 5,
|
||||
element: "dark",
|
||||
class: "Dark Mage",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20mage%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=37&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 38,
|
||||
name: "Charles",
|
||||
stars: 5,
|
||||
element: "earth",
|
||||
class: "Earth Warrior",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20warrior%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=38&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 39,
|
||||
name: "Charlotte",
|
||||
stars: 5,
|
||||
element: "fire",
|
||||
class: "Fire Warrior",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20warrior%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=39&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 40,
|
||||
name: "Chloe",
|
||||
stars: 5,
|
||||
element: "fire",
|
||||
class: "Fire Knight",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20knight%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=40&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 41,
|
||||
name: "Cidd",
|
||||
stars: 4,
|
||||
element: "earth",
|
||||
class: "Earth Thief",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20thief%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=41&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 42,
|
||||
name: "Clarissa",
|
||||
stars: 4,
|
||||
element: "water",
|
||||
class: "Water Warrior",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20warrior%20with%20blue%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=42&orientation=squarish",
|
||||
},
|
||||
];
|
||||
|
||||
const renderStars = (count: number) => {
|
||||
@@ -231,222 +502,230 @@ const Characters: React.FC = () => {
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen bg-gray-900 text-white p-4 md:p-8 w-full"
|
||||
style={{ maxWidth: "1440px", margin: "0 auto", minHeight: "1024px" }}
|
||||
>
|
||||
<h1 className="text-4xl font-bold text-center my-8">
|
||||
All Epic Seven Heroes
|
||||
</h1>
|
||||
<div className="min-h-screen bg-[#1A1412] text-white font-sans relative">
|
||||
{/* 背景装饰 */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-[#1A1412] via-[#2A211E] to-[#1A1412]"></div>
|
||||
|
||||
<div className="bg-gray-800 p-4 rounded-lg mb-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Hero Name"
|
||||
className="bg-gray-700 border-none px-4 py-2 rounded-md text-sm w-full"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative py-24">
|
||||
<h1 className="text-4xl font-bold text-center mb-8">
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-[#E6B17E] via-[#C17F59] to-[#A66D4F]">
|
||||
All Epic Seven Heroes
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<div className="flex">
|
||||
{["All Stars", "3 Stars", "4 Stars", "5 Stars"].map((stars) => (
|
||||
<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-6 rounded-lg mb-8 border border-[#C17F59]/30">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
|
||||
<input
|
||||
type="text"
|
||||
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"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{["All Stars", "3 Stars", "4 Stars", "5 Stars"].map((stars) => (
|
||||
<button
|
||||
key={stars}
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedStars === stars
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedStars(stars)}
|
||||
>
|
||||
{stars}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<button
|
||||
key={stars}
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedStars === stars
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
selectedElement === "All"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedStars(stars)}
|
||||
onClick={() => setSelectedElement("All")}
|
||||
>
|
||||
{stars}
|
||||
All
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedElement === "All"
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("All")}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedElement === "fire"
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("fire")}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedElement === "water"
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("water")}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedElement === "earth"
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("earth")}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedElement === "light"
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("light")}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedElement === "dark"
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("dark")}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedClass === "All"
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedClass("All")}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
|
||||
{[
|
||||
"Knight",
|
||||
"Warrior",
|
||||
"Thief",
|
||||
"Ranger",
|
||||
"Mage",
|
||||
"Soul Weaver",
|
||||
].map((classType) => (
|
||||
<button
|
||||
key={classType}
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedClass === classType
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
selectedElement === "fire"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedClass(classType)}
|
||||
onClick={() => setSelectedElement("fire")}
|
||||
>
|
||||
{getClassIcon(classType)}
|
||||
<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>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedZodiac === "All"
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedZodiac("All")}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
|
||||
{[...Array(12)].map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedZodiac === `zodiac-${index}`
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
selectedElement === "water"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedZodiac(`zodiac-${index}`)}
|
||||
onClick={() => setSelectedElement("water")}
|
||||
>
|
||||
{getZodiacIcon(index)}
|
||||
<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>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
<div className="bg-gray-700 px-4 py-2 rounded-md">
|
||||
<p className="text-gray-400">Select Buffs</p>
|
||||
</div>
|
||||
<div className="bg-gray-700 px-4 py-2 rounded-md">
|
||||
<p className="text-gray-400">Select Debuffs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedElement === "earth"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("earth")}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{filteredHeroes.map((hero) => (
|
||||
<div
|
||||
key={hero.id}
|
||||
className="bg-gray-800 rounded-lg p-4 flex items-center gap-4 cursor-pointer hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<div className="relative">
|
||||
<img
|
||||
src={hero.imageUrl}
|
||||
alt={hero.name}
|
||||
className="w-16 h-16 rounded-full object-cover object-top"
|
||||
/>
|
||||
<div className="absolute -bottom-1 -right-1">
|
||||
{getElementIcon(hero.element)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedElement === "light"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("light")}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold text-amber-400">
|
||||
{hero.name}
|
||||
</h3>
|
||||
<div className="flex">{renderStars(hero.stars)}</div>
|
||||
<p className="text-gray-400">{hero.class}</p>
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedElement === "dark"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("dark")}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedClass === "All"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedClass("All")}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
|
||||
{[
|
||||
"Knight",
|
||||
"Warrior",
|
||||
"Thief",
|
||||
"Ranger",
|
||||
"Mage",
|
||||
"Soul Weaver",
|
||||
].map((classType) => (
|
||||
<button
|
||||
key={classType}
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedClass === classType
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedClass(classType)}
|
||||
>
|
||||
{getClassIcon(classType)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedZodiac === "All"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedZodiac("All")}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
|
||||
{[...Array(12)].map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedZodiac === `zodiac-${index}`
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedZodiac(`zodiac-${index}`)}
|
||||
>
|
||||
{getZodiacIcon(index)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div className="bg-[#1A1412] px-4 py-2 rounded-md border border-[#C17F59]/30">
|
||||
<p className="text-[#9B8579]">Select Debuffs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||||
{filteredHeroes.map((hero) => (
|
||||
<div
|
||||
key={hero.id}
|
||||
className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg overflow-hidden border border-[#C17F59]/30 hover:border-[#C17F59] transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-[#C17F59]/10 cursor-pointer backdrop-blur-sm"
|
||||
>
|
||||
<div className="relative h-48 overflow-hidden">
|
||||
<img
|
||||
src={hero.imageUrl}
|
||||
alt={hero.name}
|
||||
className="w-full h-full object-cover object-center transition-transform duration-500 hover:scale-105"
|
||||
/>
|
||||
<div className="absolute top-2 left-2 flex space-x-1">
|
||||
{renderStars(hero.stars)}
|
||||
</div>
|
||||
<div className="absolute top-2 right-2">
|
||||
{getElementIcon(hero.element)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<h3 className="text-lg font-bold text-[#E6B17E] mb-2">{hero.name}</h3>
|
||||
<div className="flex items-center space-x-2 text-[#9B8579]">
|
||||
{getClassIcon(hero.class)}
|
||||
<span className="text-sm">{hero.class}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user