40 lines
1.6 KiB
TypeScript
Executable File
40 lines
1.6 KiB
TypeScript
Executable File
import React from 'react';
|
|
import { PET_CLASSES } from '../data/petClasses';
|
|
import { PetClassInfo } from '../types/Pet';
|
|
|
|
interface ClassSelectionProps {
|
|
onSelect: (classKey: string, classInfo: PetClassInfo) => void;
|
|
}
|
|
|
|
export default function ClassSelection({ onSelect }: ClassSelectionProps) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-900 text-white p-8">
|
|
<h1 className="text-4xl font-bold text-center mb-12">Choose Your Virtual Companion</h1>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
|
|
{Object.entries(PET_CLASSES).map(([key, classInfo]) => (
|
|
<button
|
|
key={key}
|
|
onClick={() => onSelect(key, classInfo)}
|
|
className={`bg-${classInfo.color}-900/30 hover:bg-${classInfo.color}-800/50
|
|
border-2 border-${classInfo.color}-500/50 rounded-lg p-6
|
|
transition-all duration-300 transform hover:scale-105`}
|
|
>
|
|
<div className="text-4xl mb-4">{classInfo.emoji}</div>
|
|
<h3 className={`text-2xl font-bold text-${classInfo.color}-400 mb-2`}>
|
|
{classInfo.name}
|
|
</h3>
|
|
<p className="text-gray-300 mb-4">{classInfo.description}</p>
|
|
<div className="space-y-2">
|
|
{classInfo.modifiers.map((modifier, index) => (
|
|
<div key={index} className="text-sm text-gray-400 flex items-center">
|
|
<span className="mr-2">•</span>
|
|
{modifier}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |