ResuMe/Resume.Blazor/Components/ItemTemplate/SkillItemTemplate.razor

<MudCard Elevation="27" class="bg-[#2E2E48] rounded-lg h-fit">
  <MudCardContent>
    <MudHidden Breakpoint="Breakpoint.SmAndDown" Invert="true">
      <MudStack AlignItems="AlignItems.Center">
        <img src="@ImageSrc" class="w-16 h-16 rounded-md" />
        <MudText Typo="Typo.subtitle2" Align="Align.Center" class="text-white">
            <p>@Name</p>
        </MudText>
        <MudRating class="mt-1 " Disabled="true" ReadOnly="true" Color="Color.Info" SelectedValue="@ExperiencePeriod" />
        @* <p class="text-gray-400 text-[0.8rem]">@ExperiencePeriod Years Experience</p> *@
      </MudStack>
    </MudHidden>
    <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
      <MudStack Row="true">
        <img src="@ImageSrc" class="w-12 h-12 rounded-md" />
        <div class="my-auto ml-2">
          <p class="text-white">@Name</p>
            @* <p class="text-gray-400 text-[0.8rem]">@ExperiencePeriod Years Experience</p> *@
                    <MudRating class="mt-1 " Disabled="true" ReadOnly="true" Color="Color.Info" SelectedValue="@ExperiencePeriod" />
        </div>
      </MudStack>
    </MudHidden>
  </MudCardContent>
</MudCard>
@code {
  [Parameter] public string Name { get; set; }
  [Parameter] public int ExperiencePeriod { get; set; }
  [Parameter] public string ImageSrc { get; set; }
}