IGP-Fan-Reference/IGP/Pages/MakingOf/Parts/MakingOfFeedback.razor

<WebsiteTitleComponent>
    Feedback
</WebsiteTitleComponent>

<MakingOfComponent>
    <Title>
        Loading
    </Title>
    <Description>
        Indicates a component is being loaded (a component that relies on JSON)
    </Description>
    <Example>
        <div style="width: 300px; height: 450px;">

            <LoadingComponent/>
        </div>
    </Example>
    <Usage>
        <CodeComponent>Empty</CodeComponent>
    </Usage>
    <Code>
        <CodeComponent>Empty</CodeComponent>
    </Code>
</MakingOfComponent>


<MakingOfComponent>
    <Title>Alert Message</Title>
    <Description>Used to convey important information to the viewer. Comes in Yellow (Warning), Blue (Information), Red (Error), and Green (Success). Mostly used to warn viewers of pre-alpha or incomplete content being viewed.</Description>
    <Example>
        <AlertComponent Type="@SeverityType.Warning">
            <Title>Warning Alert Title</Title>
            <Message>Warning Alert Message</Message>
        </AlertComponent>
        <AlertComponent Type="@SeverityType.Information">
            <Title>Information Alert Title</Title>
            <Message>Information Alert Message</Message>
        </AlertComponent>
        <AlertComponent Type="@SeverityType.Error">
            <Title>Error Alert Title</Title>
            <Message>Error Alert Message</Message>
        </AlertComponent>
        <AlertComponent Type="@SeverityType.Success">
            <Title>Succsess Alert Title</Title>
            <Message>Succsess Alert Message</Message>
        </AlertComponent>
    </Example>
    <Usage>
        <CodeComponent>&lt;AlertComponent Type=SeverityType.Warning&gt;<br/> &lt;Title&gt;Warning Alert Title&lt;/Title&gt;<br/> &lt;Message&gt;Warning Alert Message&lt;/Message&gt;<br/>&lt;/AlertComponent&gt;<br/>&lt;AlertComponent Type=SeverityType.Information&gt;<br/> &lt;Title&gt;Information Alert Title&lt;/Title&gt;<br/> &lt;Message&gt;Information Alert Message&lt;/Message&gt;<br/>&lt;/AlertComponent&gt;<br/>&lt;AlertComponent Type=SeverityType.Error&gt;<br/> &lt;Title&gt;Error Alert Title&lt;/Title&gt;<br/> &lt;Message&gt;Error Alert Message&lt;/Message&gt;<br/>&lt;/AlertComponent&gt;<br/>&lt;AlertComponent Type=SeverityType.Success&gt;<br/> &lt;Title&gt;Succsess Alert Title&lt;/Title&gt;<br/> &lt;Message&gt;Succsess Alert Message&lt;/Message&gt;<br/>&lt;/AlertComponent&gt;<br/></CodeComponent>
    </Usage>
    <Code>
        <CodeComponent>@@using Components.Pages.Utils<br/><br/>&lt;div class=&quot;alertContainer @@Type.ToString().ToLower()&quot;&gt;<br/> @@if (Title != null) {<br/> &lt;div class=&quot;alertTitle&quot;&gt;<br/> @@Title<br/> &lt;/div&gt;<br/> }<br/> @@if (Message != null) {<br/> &lt;div&gt;<br/> @@Message<br/> &lt;/div&gt;<br/><br/> }<br/>&lt;/div&gt;<br/>&lt;style&gt;<br/> .alertContainer {<br/> border: 4px solid;<br/> border-radius: 4px;<br/> padding: 16px;<br/> display: flex;<br/> flex-direction: column;<br/> justify-items: stretch;<br/> width: 100%;<br/> }<br/><br/> .alertContainer.@@SeverityType.Warning.ToString().ToLower() {<br/> border-color: #2a2000;<br/> background-color: #ffbf0029;<br/> }<br/><br/> .alertContainer.@@SeverityType.Error.ToString().ToLower() {<br/> border-color: #290102;<br/> background-color: #4C2C33;<br/> }<br/><br/> .alertContainer.@@SeverityType.Information.ToString().ToLower() {<br/> border-color: #030129;<br/> background-color: #2c3a4c;<br/> }<br/><br/> .alertContainer.@@SeverityType.Success.ToString().ToLower() {<br/> border-color: #042901;<br/> background-color: #2E4C2C;<br/> }<br/><br/> .alertTitle {<br/> font-weight: 800;<br/> }<br/><br/>&lt;/style&gt;<br/>@@code {<br/> [Parameter] public RenderFragment? Title { get; set; }<br/> [Parameter] public RenderFragment? Message { get; set; }<br/> [Parameter] public SeverityType Type { get; set; } = SeverityType.Warning;<br/>}</CodeComponent>
    </Code>
</MakingOfComponent>

@code {

}