Added Hero editor component in Blazor

Author: Xenoage

Blazor/Components/Counter.razor.css

@@ -1,7 +1,9 @@
 div {
     display: inline-block;
-    border: 2px solid black;
-    background: #eee;
+    border: 2px solid #55328c;
+    background: #f0eaf7;
     padding: 1em;
     margin: 1em;
+    background-image: url("assets/blazor-icon.png");
+    background-repeat: no-repeat;
 }

Blazor/Components/HeroEditor.razor

@@ -0,0 +1,29 @@
+<div class="container">
+    <div><span>id: </span>@Hero.id</div>
+    <div>
+        <label for="hero-name">Hero name: </label>
+        <input id="hero-name" @bind="newName" placeholder="Hero name" @bind:event="oninput" @onkeyup="UpdateHero" />
+    </div>
+</div>
+
+@code {
+
+    [Parameter]
+    public Hero Hero { get; set; } = new(0, "");
+
+    [Parameter]
+    public EventCallback<Hero> HeroChanged { get; set; }
+
+    private string newName = "";
+
+
+    protected override void OnParametersSet() {
+        newName = Hero.name;
+    }
+
+    private async Task UpdateHero() {
+        Hero = Hero with { name = newName };
+        await HeroChanged.InvokeAsync(Hero);
+    }
+
+}

Blazor/Components/HeroEditor.razor.css

@@ -0,0 +1,9 @@
+div.container {
+    display: inline-block;
+    border: 2px solid #55328c;
+    background: #f0eaf7;
+    padding: 30px;
+    margin: 1em;
+    background-image: url("assets/blazor-icon.png");
+    background-repeat: no-repeat;
+}

Blazor/Pages/Index.razor

@@ -2,6 +2,20 @@
 
 <h1>Blazor Components Test Project</h1>
 
-<Counter />
-<Counter />
-<Counter />
+<div>
+    <Counter />
+    <Counter />
+    <Counter />
+</div>
+
+<HeroEditor Hero="@testHero" HeroChanged="OnHeroChanged"/>
+
+@code {
+    private Hero testHero = new(5, "Arnold");
+
+    private void OnHeroChanged(Hero hero) {
+        testHero = hero;
+        Console.WriteLine("Hero changed: " + hero);
+    }
+
+}