Saving Responsive Styling changes before shifting gears.

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBadge.razor

@@ -0,0 +1 @@
+<div class="m-1 badge @_badgeitem.ToLower() border-0"><p class="statText">@_badgeitem</p></div>

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBadge.razor.cs

@@ -0,0 +1,22 @@
+using Microsoft.AspNetCore.Components;
+using Portfolio.Domain.Features.Pokemon;
+
+namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
+{
+    public partial class PokemonBadge
+    {
+        [Parameter]
+        public string BadgeItem { get; set; }
+
+        private string _badgeitem { get; set; }
+
+        protected override void OnParametersSet()
+        {
+            if (BadgeItem != null)
+            {
+                _badgeitem = BadgeItem;
+
+            }
+        }
+    }
+}

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBadge.razor.css

@@ -0,0 +1,45 @@
+.badge {
+    width: 90px;
+    height: 30px;
+    color: white;
+    padding: 4px 8px;
+    border-radius: 30px;
+}
+
+.statText {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: .8rem;
+}
+
+/* Sleep Type Badge Styling */
+.dozing {
+    background-color: #fcdc5e;
+}
+
+.snoozing {
+    background-color: #4ce8ed;
+}
+
+.slumbering {
+    background-color: #4588fb;
+}
+
+/* Speciality Badge Styling */
+.berries {
+    background-color: #24d86b;
+}
+
+.ingredients {
+    background-color: #fdbe4d;
+}
+
+.skills {
+    background-color: #47a0fc;
+}
+
+.all {
+    background-color: #fc7992;
+}

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor

@@ -45,8 +45,8 @@
     <!-- Pokemon Sleep Type and Specialty Badges -->
     <div class="position-absolute bottom-0 end-0 mb-1 me-1 z-2">
         <div class="d-flex justify-content-between">
-            <div class="m-1 badge @_pokemon.SleepType.ToLower() border-0"><p class="statText">@_pokemon.SleepType</p></div>
+            <PokemonBadge BadgeItem="@_pokemon.SleepType" />
-            <div class="m-1 badge @_pokemon.Speciality.ToLower() border-0"><p class="statText">@_pokemon.Speciality</p></div>
+            <PokemonBadge BadgeItem="@_pokemon.Speciality" />
         </div>
     </div>
 

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.css

@@ -133,55 +133,8 @@
     transform: rotateY(180deg);
 }
 
-.badge {
-    width: 90px;
-    height: 30px;
-    color: white;
-    padding: 4px 8px;
-    border-radius: 30px;
-}
-
-.statText {
-    position: relative;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: .8rem;
-}
-
-/* Sleep Type Badge Styling */
-.dozing {
-    background-color: #fcdc5e;
-}
-
-.snoozing {
-    background-color: #4ce8ed;
-}
-
-.slumbering {
-    background-color: #4588fb;
-}
-
-/* Speciality Badge Styling */
-.berries {
-    background-color: #24d86b;
-}
-
-.ingredients {
-    background-color: #fdbe4d;
-}
-
-.skills {
-    background-color: #47a0fc;
-}
-
-.all {
-    background-color: #fc7992;
-}
 
 /* Type Card Styling */
-
-/* Type Themes - define vars only */
 .pokemon-type-grass {
     --border-color: #45ca24;
     --bg-color: #e5f8dc;

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor

@@ -95,14 +95,15 @@
                                 <!-- Section 5: Sleep Type -->
                                 <td class="" style="">
                                     <div class="d-flex justify-content-center ">
-                                        <div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div>
+                                        <PokemonBadge BadgeItem="@pokemon.SleepType" />
                                     </div>
                                 </td>
 
                                 <!-- Section 6: Speciality -->
                                 <td class="" style="">
                                     <div class="d-flex justify-content-center">
-                                        <div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div>
+                                        <PokemonBadge BadgeItem="@pokemon.Speciality" />
+
                                     </div>
                                 </td>
 

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css

@@ -119,32 +119,5 @@
     cursor: default;
 }
 
-.dozing {
-    background-color: #fcdc5e;
-}
-
-.snoozing {
-    background-color: #4ce8ed;
-}
-
-.slumbering {
-    background-color: #4588fb;
-}
-
-.berries {
-    background-color: #24d86b;
-}
-
-.ingredients {
-    background-color: #fdbe4d;
-}
-
-.skills {
-    background-color: #47a0fc;
-}
-
-.all {
-    background-color: #fc7992;
-}