Multi-Step Signup Form with Progress Bar in Blazor Server using AntBlazor UI

Signup.razor

/* Prerequisite : Import AntDesign in _Imports.server file */

@using AntDesign

<Row>
  <GridCol Span="12" Class="content-section">
      <Steps Direction="vertical" Current="current">
          @foreach (var item in steps)
          {
              <Step Title="@item.Title" Description="@item.Description" />
          }
      </Steps>
  </GridCol>   
  <GridCol Span="12" Class="content-section">
    <Form Layout="@Layout" Model="@signupModel">
      <div class="steps-content">
         @if (current == 0)
          {
              <FormItem Label="First Name"><Input @bind-Value="@signupModel.FirstName" /></FormItem>
              <FormItem Label="Last Name"><Input @bind-Value="@signupModel.LastName" /></FormItem>
              <FormItem Label="Bio"><Input @bind-Value="@signupModel.Bio" /></FormItem>
          }
          @if (current == 1)
          {
              <FormItem Label="Organisation"><Input @bind-Value="@signupModel.Organisation" /></FormItem>
              <FormItem Label="Profession"><Input @bind-Value="@signupModel.Profession" /></FormItem>
          }
          @if (current == 2)
          {
              <FormItem Label="Phone number"><Input @bind-Value="@signupModel.Phone" /></FormItem>
              <FormItem Label="Email"><Input @bind-Value="@signupModel.Email" /></FormItem>
          }
      </div>
      <div class="steps-action">
         <FormItem>
          @if (current > 0)
          {
              <Button Type="@ButtonType.Primary" OnClick="OnPreClick">Previous</Button>
          }
          @if (current < steps.Length - 1)
          {
              <Button Type="@ButtonType.Primary" OnClick="OnNextClick">Next</Button>                               
          }
          @if (current == steps.Length - 1)
          {
              <Button Type="@ButtonType.Primary" HtmlType="submit" OnClick=@(() => message.Success("Processing complete!"))>Sign Me Up</Button>                                
          }
          </FormItem> 
      </div>
    </Form>
  </GridCol>   
</Row>

<style>

.content-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.steps-action {
    display:flex;
    justify-content:space-evenly;
}

</style>


@inject MessageService message

@code {
    
    public string Layout { get; set; } = FormLayout.Vertical;
    
    public class SignupModel
    {
        [Display(Name = "First Name")]
        public string FirstName { get; set; }
        [Display(Name = "Last Name")]
        public string LastName { get; set; }
        [Display(Name = "Email")]
        public string Email { get; set; }
        [Display(Name = "Bio")]
        public string Bio { get; set; }
        [Display(Name = "Organisation")]
        public string Organisation { get; set; }
        [Display(Name = "Profession")]
        public string Profession { get; set; }
        [Display(Name = "Phone number")]
        public string? Phone { get; set; }       
    }

    SignupModel signupModel = new SignupModel();

    public class StepItem
    {
        public string? Title { get; set; }
        public string? Description { get; set; }        
    }

    public int current { get; set; } = 0;

    public StepItem[] steps =
    {
        new StepItem {Title = "Enter basic details", Description = "Tell about yourself"},
        new StepItem {Title = "Enter professional detail", Description = "Enter organisation and profession"},
        new StepItem {Title = "Verify contact details", Description = "Verify your contact details"},
    };

    void OnPreClick()
    {
        current--;
    }

    void OnNextClick()
    {
        current++;
    }
}