CodeBeam.MudBlazor.Extensions/docs/CodeBeam.MudBlazor.Extensions.Docs/Components/ComponentCard.razor at 1ef1e2b95e60968fc8936582f4fcadc8e2be3619 · CodeBeamOrg/CodeBeam.MudBlazor.Extensions · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
@inherits MudComponentBase
@namespace MudExtensions.Docs.Components

<MudCard Class="component-card pa-0" Style="width: 240px; min-height: 240px" Elevation="4" @onclick="OnClick">
    <MudCardHeader Class="component-card-header">
        <MudText Typo="Typo.h6" Color="Color.Inherit">@Title</MudText>
        <MudSpacer />
        <MudIcon Class="icon-class" Icon="@Icons.Custom.Brands.MudBlazor" />
    </MudCardHeader>
    <MudCardContent>
        <MudStack>
            <MudStack Spacing="2" Row="true" Wrap="Wrap.Wrap" AlignItems="AlignItems.Center">
                @* <MudTooltip Text="The component usage." Delay="300" Color="Color.Secondary">
                    <MudChip T="string" Color="Color.Primary" Variant="Variant.Filled" Size="Size.Small">@Component?.Usage.ToDescriptionString()</MudChip>
                </MudTooltip> *@

                @if (Component?.IsUnique == false)
                {
                    <MudTooltip Text="Core library has a similar component." Delay="300" Color="Color.Secondary" Arrow="true">
                        <MudChip T="string" Class="ms-n1" Color="Color.Secondary" Variant="Variant.Filled" Size="Size.Small">Extended Component</MudChip>
                    </MudTooltip>
                }
                else
                {
                    <MudTooltip Text="Core library doesn't have a similar component." Delay="300" Color="Color.Primary" Arrow="true">
                        <MudChip T="string" Class="ms-n1" Color="Color.Primary" Variant="Variant.Filled" Size="Size.Small">Unique Component</MudChip>
                    </MudTooltip>
                }

                @if (Component?.IsMaterial3 == true)
                {
                    <MudTooltip Text="Conforms to Material 3 specifications." Delay="300" Color="Color.Success" Arrow="true">
                        <MudChip T="string" Color="Color.Success" Variant="Variant.Filled" Size="Size.Small">Material 3</MudChip>
                    </MudTooltip>
                }
            </MudStack>
            <MudText>@Description</MudText>
            @ChildContent
        </MudStack>

    </MudCardContent>
</MudCard>

<style>
    .component-card {
        background-color: transparent;
        color: var(--mud-palette-secondary);
        transition: background-color .6s, color 1s;
        cursor: pointer;
    }

    .component-card:hover {
        color: white;
        background: linear-gradient(to right, var(--mud-palette-primary) , var(--mud-palette-secondary));
        box-shadow: var(--mud-palette-secondary) 0px 30px 90px;
    }

    .component-card:hover .component-card-header {
        color: var(--mud-palette-primary);
        background-color: var(--mud-palette-background-gray);
        /*transform: rotate3d(1, 1, 1, 25deg);*/
        transition: left 1s;
    }

    .component-card:hover .icon-class {
        color: var(--mud-palette-secondary);
    }

    .component-card-header{
        background-color: var(--mud-palette-background);
        transition: background-color .6s, color 1s;
        cursor: pointer;
    }

    .icon-class {
        color: var(--mud-palette-background);
        transition: color 1s;
    }

</style>