feat: Enhance PokemonDetail component with detailed stats visualizati…

project2/src/components/PokemonDetail.tsx

@@ -18,6 +18,15 @@ interface PokemonDetailProps {
     onBack: () => void;
 }
 
+function getStatColor(value: number): string {
+    if (value < 30) return '#ef4444';
+    if (value < 60) return '#f97316';
+    if (value < 100) return '#eab308';
+    if (value < 120) return '#22c55e';
+    if (value < 150) return '#166534';
+    return '#00d9ff';
+}
+
 export function PokemonDetail({
     pokemon,
     rating,
@@ -27,6 +36,14 @@ export function PokemonDetail({
     onBack,
 }: PokemonDetailProps) {
     const primaryType = pokemon.types[0]?.name.toLowerCase();
+    const stats = [
+        ['HP', pokemon.hp],
+        ['Attack', pokemon.attack],
+        ['Defence', pokemon.defence],
+        ['Sp. Atk', pokemon.special_attack],
+        ['Sp. Def', pokemon.special_defence],
+        ['Speed', pokemon.speed],
+    ] as const;
 
     return (
         <div
@@ -65,12 +82,27 @@ export function PokemonDetail({
                     </ul>
                 </div>
                 <div className="pokemon-detailed-info">
-                    <span>Attack: {pokemon.attack}</span>
-                    <span>Special Attack: {pokemon.special_attack}</span>
-                    <span>Defence: {pokemon.defence}</span>
-                    <span>Special Defence: {pokemon.special_defence}</span>
-                    <span>Speed: {pokemon.speed}</span> <span></span>
-                    <span>HP: {pokemon.hp}</span> <span></span>
+                    {stats.map(([name, value]) => (
+                        <div className="pokemon-stat" key={name}>
+                            <span className="pokemon-stat-name">{name}</span>
+                            <span className="pokemon-stat-value">{value}</span>
+                            <div
+                                className="pokemon-stat-bar"
+                                role="meter"
+                                aria-label={`${pokemon.name} ${name}`}
+                                aria-valuemin={0}
+                                aria-valuemax={255}
+                                aria-valuenow={value}
+                            >
+                                <span
+                                    style={{
+                                        width: `${(Math.min(Math.max(value, 0), 255) / 255) * 100}%`,
+                                        backgroundColor: getStatColor(value),
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    ))}
                 </div>
                 <AverageRating
                     average={pokemon.averageRating}

project2/src/index.css

@@ -180,9 +180,11 @@ main {
     border-radius: 1.5rem;
     color: var(--card-text);
     cursor: pointer;
-    font: inherit;
-    width: 100%;
-
+    transition: transform 160ms ease;
+}
+
+.pokemon-card:hover {
+    transform: translateY(-0.50rem);
 }
 
 .pokemon-card:focus-visible {
@@ -394,7 +396,7 @@ main {
 .pokemon-detail-heading {
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     gap: 0.25rem 0.75rem;
 }
 
@@ -403,6 +405,7 @@ main {
 }
 
 .pokemon-detail-heading .pokemon-types {
+    flex-wrap: nowrap;
     justify-content: flex-end;
     min-height: 0;
     margin: 0;
@@ -411,20 +414,20 @@ main {
 
 .pokemon-detailed {
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    inset: 0;
+    box-sizing: border-box;
+    overflow-y: auto;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
+    padding: 1rem 0;
     color: var(--detailed-text);
     background: #00000022;
 }
 .pokemon-detailed-content {
-    max-width: 100%;
-    width: 20rem;
+    max-width: calc(100vw - 1rem);
+    width: 23rem;
     display: flex;
 
     flex-direction: column;
@@ -433,17 +436,48 @@ main {
     background: var(--pokemon-type-color, var(--detailed-bg));
     border-radius: 1.5rem;
     border: 5px solid var(--detailed-border);
-    padding: 2rem;
+    padding: 1.5rem;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    margin: auto 0;
 }
 .pokemon-detailed-image {
     max-width: 100%;
     width: 20rem;
 }
 .pokemon-detailed-info {
+    width: 100%;
+}
+
+.pokemon-stat {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: repeat(auto-fill, auto);
-    width: fit-content;
+    grid-template-columns: 4.5rem 2rem minmax(0, 1fr);
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.4rem;
+}
+
+.pokemon-stat-name {
+    white-space: nowrap;
+}
+
+.pokemon-stat-value {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+}
+
+.pokemon-stat-bar {
+    height: 0.65rem;
+    overflow: hidden;
+    border-radius: 999px;
+    background: #00000020;
+}
+
+.pokemon-stat-bar span {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--accent);
 }
 
 h2 small {