CodeBeam.MudBlazor.Extensions/docs/CodeBeam.MudBlazor.Extensions.Docs/Components/ExampleCard.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
@namespace MudExtensions.Docs.Components
@inject ISnackbar Snackbar
@inject NavigationManager NavigationManager
@inject IJsApiService JSApiService

<a id="@(AliasName ?? Title?.Replace(" ", "-").Replace("&", "").ToLowerInvariant())" class="my-16"><MudDivider Class="my-16"></MudDivider></a>

@if (HasExpansionPanel)
{
    <MudExpansionPanel Text="@Title">
        <MudCard Class="component-card mx-sm-2 my-8 pa-sm-2" Style="cursor: default" Elevation="4">
            <MudCardHeader>
                <div>
                    <MudText Class="example-card-text" Typo="Typo.h6" Color="Color.Inherit">@Title</MudText>
                    <MudText Class="example-card-text" Typo="Typo.body2" Color="Color.Inherit">@Description</MudText>
                </div>
            </MudCardHeader>
            <MudCardContent>
                <div class="pa-2" style="background: var(--mud-palette-background)">
                    @ChildContent
                </div>
            </MudCardContent>
        </MudCard>
    </MudExpansionPanel>
}
else
{
    <MudCard Class="component-card mx-sm-2 my-8 pa-sm-2" Style="cursor: default" Elevation="4">
        <MudCardHeader>
            <div>
                <MudText Class="example-card-text" Typo="Typo.h6" Color="Color.Inherit">@Title</MudText>
                <MudText Class="example-card-text" Typo="Typo.body2" Color="Color.Inherit">@Description</MudText>
                <MudDivider />
            </div>
            <MudSpacer />
            @if (ShowCodeSection)
            {
                <MudTooltip Text="Copy Example Code" Delay="300" Color="Color.Secondary">
                    <MudIconButton Class="me-2" Icon="@Icons.Material.Filled.Code" OnClick="CopyExampleCode" Size="Size.Small" Color="Color.Secondary" Variant="Variant.Outlined" />
                </MudTooltip>
            }
            <MudTooltip Text="Copy Example Link" Delay="300" Color="Color.Secondary">
                <MudIconButton Icon="@Icons.Material.Filled.Link" OnClick="CopyExampleLink" Size="Size.Small" Color="Color.Secondary" Variant="Variant.Outlined" />
            </MudTooltip>
        </MudCardHeader>
        <MudCardContent>
            <div class="mud-width-full pa-2" style="background: var(--mud-palette-background);">
                @ChildContent
                @if (ShowCodeSection)
                {
                    <MudDivider Class="mud-width-full mt-8" />
                    <MudExpansionPanel Text="Code">
                        <div style="overflow-x: scroll">
                            @foreach (string line in _lines)
                            {
                                if (string.IsNullOrEmpty(line) || line == "/r")
                                {
                                    <br />
                                }
                                <pre style="color: var(--mud-palette-text); font-weight: 500; font-size: 14px;">@line</pre>
                            }
                        </div>
                    </MudExpansionPanel>
                }
            </div>
        </MudCardContent>
    </MudCard>
}

@code {
    [Parameter]
    public string? ComponentName { get; set; }

    [Parameter]
    public string? ExampleName { get; set; }

    [Parameter]
    public string? AliasName { get; set; }

    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    public string? Description { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public bool HasExpansionPanel { get; set; }

    [Parameter]
    public bool ShowCodeSection { get; set; } = true;

    List<string> _lines = new();

    protected override void OnParametersSet()
    {
        base.OnParametersSet();

        var ass = System.Reflection.Assembly.GetExecutingAssembly();
        var names = ass.GetManifestResourceNames();

        _lines = new();
        string path = $@"MudExtensions.Docs.Pages.Components.{ComponentName}.Examples.{ExampleName}.razor";
        var resourceStream = ass.GetManifestResourceStream(path);
        if (resourceStream != null)
        {
            using var reader = new StreamReader(resourceStream);

            while (true)
            {
                var line = reader.ReadLine();
                if (line?.StartsWith("@namespace") == true)
                {
                    continue;
                }
                else if (line != null)
                    _lines.Add(line);
                else
                    break;
            }
        }
    }

    private async Task CopyExampleLink()
    {
        await JSApiService.CopyToClipboardAsync(NavigationManager.BaseUri + "mud" + ComponentName?.ToLower().Replace("`1", "") + "#" + (AliasName ?? Title?.Replace(" ", "-").Replace("&", "").ToLowerInvariant()));
        Snackbar.Add("Example link copied.", Severity.Info);
    }

    private async Task CopyExampleCode()
    {
        string code = "";
        foreach (var item in _lines)
        {
            code += item + Environment.NewLine;
        }
        await JSApiService.CopyToClipboardAsync(code);
        Snackbar.Add("Example code copied.", Severity.Info);
    }
}

<style>
    .example-card-text {
        color: var(--mud-palette-secondary);
        transition: color 1s;
    }
</style>