checkout page refactoring

MyFirstBlazor/BlazingPizza/Pages/Checkout.razor

@@ -9,23 +9,12 @@
     <div class="checkout-cols">
         <div class="checkout-order-details">
             <h4>Review order</h4>
-            @foreach (var pizza in Order.Pizzas)
+            <OrderReview Order="Order"/>
-            {
+        </div>
-                <p>
-                    <string>
-                        @(pizza.Size)"
-                        @pizza.Special.Name
-                        (£@pizza.GetFormattedTotalPrice())
-                    </string>
-                </p>
-            }
 
-            <p>
+        <div class="checkout-delivery-address">
-                <string>
+            <h4>Deliver to...</h4>
-                    Total price:
+            <AddressEditor Address="Order.DeliveryAddress"/>
-                    £@Order.GetFormattedTotalPrice()
-                </string>
-            </p>
         </div>
     </div>
 

MyFirstBlazor/BlazingPizza/Shared/AddressEditor.razor

@@ -0,0 +1,53 @@
+<div class="form-field">
+    <label>Name:</label>
+    <div>
+        <input @ref="startName" @bind="Address.Name" />
+    </div>
+</div>
+
+<div class="form-field">
+    <label>Line 1:</label>
+    <div>
+        <input @bind="Address.Line1" />
+    </div>
+</div>
+
+<div class="form-field">
+    <label>Line 2:</label>
+    <div>
+        <input @bind="Address.Line2" />
+    </div>
+</div>
+
+<div class="form-field">
+    <label>City:</label>
+    <div>
+        <input @bind="Address.City" />
+    </div>
+</div>
+
+<div class="form-field">
+    <label>Region:</label>
+    <div>
+        <input @bind="Address.Region" />
+    </div>
+</div>
+
+<div class="form-field">
+    <label>Postal code:</label>
+    <div>
+        <input @bind="Address.PostalCode" />
+    </div>
+</div>
+
+@code {
+    [Parameter] public Address Address { get; set; }
+
+    private ElementReference startName;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await startName.FocusAsync();
+    }
+}

MyFirstBlazor/BlazingPizza/Shared/OrderReview.razor

@@ -0,0 +1,21 @@
+@foreach (var pizza in Order.Pizzas)
+{
+    <p>
+        <strong>
+            @(pizza.Size)"
+            @pizza.Special.Name
+            (£@pizza.GetFormattedTotalPrice())
+        </strong>
+    </p>
+}
+
+<p>
+    <strong>
+        Total price:
+        (£@Order.GetFormattedTotalPrice())
+    </strong>
+</p>
+
+@code {
+    [Parameter] public Order Order { get; set; }
+}