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

30 lines
1.3 KiB
Plaintext

<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; }
}