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 20:43:44 +08:00
parent 990a695c79
commit e431134d59
1 changed files with 471 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

371
src/pages/Characters.tsx
View File

@@ -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,32 +502,37 @@ 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">
<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="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="bg-gray-800 p-4 rounded-lg mb-8">
<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-gray-700 border-none px-4 py-2 rounded-md text-sm w-full"
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="flex">
<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-amber-700"
: "bg-gray-700 hover:bg-gray-600"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
}`}
onClick={() => setSelectedStars(stars)}
>
@@ -271,8 +547,8 @@ const Characters: React.FC = () => {
<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"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
}`}
onClick={() => setSelectedElement("All")}
>
@@ -282,8 +558,8 @@ const Characters: React.FC = () => {
<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"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
}`}
onClick={() => setSelectedElement("fire")}
>
@@ -295,8 +571,8 @@ const Characters: React.FC = () => {
<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"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
}`}
onClick={() => setSelectedElement("water")}
>
@@ -308,8 +584,8 @@ const Characters: React.FC = () => {
<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"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
}`}
onClick={() => setSelectedElement("earth")}
>
@@ -321,8 +597,8 @@ const Characters: React.FC = () => {
<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"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
}`}
onClick={() => setSelectedElement("light")}
>
@@ -334,8 +610,8 @@ const Characters: React.FC = () => {
<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"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
}`}
onClick={() => setSelectedElement("dark")}
>
@@ -351,8 +627,8 @@ const Characters: React.FC = () => {
<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"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
}`}
onClick={() => setSelectedClass("All")}
>
@@ -371,8 +647,8 @@ const Characters: React.FC = () => {
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"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
}`}
onClick={() => setSelectedClass(classType)}
>
@@ -387,8 +663,8 @@ const Characters: React.FC = () => {
<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"
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
}`}
onClick={() => setSelectedZodiac("All")}
>
@@ -400,8 +676,8 @@ const Characters: React.FC = () => {
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"
? "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}`)}
>
@@ -412,43 +688,46 @@ const Characters: React.FC = () => {
</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 className="bg-[#1A1412] px-4 py-2 rounded-md border border-[#C17F59]/30">
<p className="text-[#9B8579]">Select Buffs</p>
</div>
<div className="bg-gray-700 px-4 py-2 rounded-md">
<p className="text-gray-400">Select Debuffs</p>
<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-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<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-gray-800 rounded-lg p-4 flex items-center gap-4 cursor-pointer hover:bg-gray-700 transition-colors"
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">
<div className="relative h-48 overflow-hidden">
<img
src={hero.imageUrl}
alt={hero.name}
className="w-16 h-16 rounded-full object-cover object-top"
className="w-full h-full object-cover object-center transition-transform duration-500 hover:scale-105"
/>
<div className="absolute -bottom-1 -right-1">
<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="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>
<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>
);
};