Refactored expansion panels into its own component

app/MindWork AI Studio/Components/Blocks/ExpansionPanel.razor

@@ -0,0 +1,11 @@
+<MudExpansionPanel Class="border-solid border rounded-lg" IsInitiallyExpanded="@this.IsExpanded">
+    <TitleContent>
+        <div class="d-flex align-center">
+            <MudIcon Icon="@this.HeaderIcon" Size="@this.IconSize" Color="@this.IconColor" class="mr-3"/>
+            <MudText Typo="Typo.h6">@this.HeaderText</MudText>
+        </div>
+    </TitleContent>
+    <ChildContent>
+        @this.ChildContent
+    </ChildContent>
+</MudExpansionPanel>

app/MindWork AI Studio/Components/Blocks/ExpansionPanel.razor.cs

@@ -0,0 +1,24 @@
+using Microsoft.AspNetCore.Components;
+
+namespace AIStudio.Components.Blocks;
+
+public partial class ExpansionPanel : ComponentBase
+{
+    [Parameter]
+    public string HeaderIcon { get; set; } = Icons.Material.Filled.BugReport;
+    
+    [Parameter]
+    public Size IconSize { get; set; } = Size.Medium;
+    
+    [Parameter]
+    public Color IconColor { get; set; } = Color.Primary;
+    
+    [Parameter]
+    public string HeaderText { get; set; } = "n/a";
+    
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public bool IsExpanded { get; set; }
+}

app/MindWork AI Studio/Components/Pages/About.razor

@@ -5,14 +5,7 @@
 
 <InnerScrolling HeaderHeight="6em">
     <MudExpansionPanels Class="mb-3">
-        <MudExpansionPanel IsInitiallyExpanded="@true" Class="border-solid border rounded-lg">
+        <ExpansionPanel HeaderIcon="@Icons.Material.Filled.Layers" HeaderText="Versions" IsExpanded="@true">
-            <TitleContent>
-                <div class="d-flex align-center">
-                    <MudIcon Icon="@Icons.Material.Filled.Layers" Size="Size.Medium" class="mr-3"/>
-                    <MudText Typo="Typo.h6">Versions</MudText>
-                </div>
-            </TitleContent>
-            <ChildContent>
             <MudText>
                 The following list shows the versions of the MindWork AI Studio, the used compilers, build time, etc.:
             </MudText>
@@ -25,16 +18,8 @@
                 <MudListItem Icon="@Icons.Material.Outlined.Widgets" Text="@MudBlazorVersion"/>
                 <MudListItem Icon="@Icons.Material.Outlined.Memory" Text="@TauriVersion"/>
             </MudList>
-            </ChildContent>
+        </ExpansionPanel>
-        </MudExpansionPanel>
+        <ExpansionPanel HeaderIcon="@Icons.Material.Filled.AutoAwesomeMotion" HeaderText="Used Open Source Projects">
-        <MudExpansionPanel Class="border-solid border rounded-lg">
-            <TitleContent>
-                <div class="d-flex align-center">
-                    <MudIcon Icon="@Icons.Material.Filled.AutoAwesomeMotion" Size="Size.Medium" class="mr-3"/>
-                    <MudText Typo="Typo.h6">Used Open Source Projects</MudText>
-                </div>
-            </TitleContent>
-            <ChildContent>
             <MudGrid Spacing="1">
                 <ThirdPartyComponent Name=".NET" Developer="Microsoft & Open Source Community" LicenseName="MIT" LicenseUrl="https://github.com/dotnet/runtime/blob/main/LICENSE.TXT" RepositoryUrl="https://github.com/dotnet" UseCase="The C# language is used for the implementation of the user interface and the backend. To implement the user interface with C#, the Blazor technology from ASP.NET Core is used. All these technologies are integrated into the .NET SDK."/>
                 <ThirdPartyComponent Name="MudBlazor" Developer="Jonny Larsson, Meinrad Recheis & Open Source Community" LicenseName="MIT" LicenseUrl="https://github.com/MudBlazor/MudBlazor/blob/dev/LICENSE" RepositoryUrl="https://github.com/MudBlazor/MudBlazor/" UseCase="Building on .NET, ASP.NET Core, and Blazor, MudBlazor is used as a library for designing and developing the user interface. It is a great project that significantly accelerates the development of advanced user interfaces with Blazor."/>
@@ -47,18 +32,9 @@
                 <ThirdPartyComponent Name="tokio" Developer="Alex Crichton & Open Source Community" LicenseName="MIT" LicenseUrl="https://github.com/tokio-rs/tokio/blob/master/LICENSE" RepositoryUrl="https://github.com/tokio-rs/tokio" UseCase="Code in the Rust language can be specified as synchronous or asynchronous. Unlike .NET and the C# language, Rust cannot execute asynchronous code by itself. Rust requires support in the form of an executor for this. Tokio is one such executor."/>
                 <ThirdPartyComponent Name="flexi_logger" Developer="emabee & Open Source Community" LicenseName="MIT & Apache-2.0" LicenseUrl="https://github.com/emabee/flexi_logger" RepositoryUrl="https://github.com/emabee/flexi_logger" UseCase="This Rust library is used to output the app's messages to the terminal. This is helpful during development and troubleshooting. This feature is initially invisible; when the app is started via the terminal, the messages become visible."/>
             </MudGrid>
-            </ChildContent>
+        </ExpansionPanel>
-        </MudExpansionPanel>
+        <ExpansionPanel HeaderIcon="@Icons.Material.Filled.Verified" HeaderText="License: FSL-1.1-MIT">
-        <MudExpansionPanel Class="border-solid border rounded-lg">
-            <TitleContent>
-                <div class="d-flex align-center">
-                    <MudIcon Icon="@Icons.Material.Filled.Verified" Size="Size.Medium" class="mr-3"/>
-                    <MudText Typo="Typo.h6">License: FSL-1.1-MIT</MudText>
-                </div>
-            </TitleContent>
-            <ChildContent>
             <MudMarkdown Value="@LICENSE" OverrideHeaderTypo="@Markdown.OverrideHeaderTypo"/>
-            </ChildContent>
+        </ExpansionPanel>
-        </MudExpansionPanel>
     </MudExpansionPanels>
 </InnerScrolling>

app/MindWork AI Studio/Components/Pages/Home.razor

@@ -7,14 +7,7 @@
 <InnerScrolling HeaderHeight="288px - 3em">
     <MudExpansionPanels Class="mb-3">
 
-        <MudExpansionPanel IsInitiallyExpanded="@true" Class="border-solid border rounded-lg">
+        <ExpansionPanel HeaderIcon="@Icons.Material.Filled.MenuBook" HeaderText="Introduction" IsExpanded="@true">
-            <TitleContent>
-                <div class="d-flex align-center">
-                    <MudIcon Icon="@Icons.Material.Filled.MenuBook" Size="Size.Medium" class="mr-3"/>
-                    <MudText Typo="Typo.h6">Introduction</MudText>
-                </div>
-            </TitleContent>
-            <ChildContent>
             <MudText Typo="Typo.h5" Class="mb-3">
                 Welcome to MindWork AI Studio!
             </MudText>
@@ -30,17 +23,8 @@
             <MudText Typo="Typo.body1" Class="mb-3">
                 We hope you enjoy using MindWork AI Studio to bring your AI projects to life!
             </MudText>
-            </ChildContent>
+        </ExpansionPanel>
-        </MudExpansionPanel>
+        <ExpansionPanel HeaderIcon="@Icons.Material.Filled.Lightbulb" HeaderText="Our vision">
-
-        <MudExpansionPanel Class="border-solid border rounded-lg">
-            <TitleContent>
-                <div class="d-flex align-center">
-                    <MudIcon Icon="@Icons.Material.Filled.Lightbulb" Color="Color.Warning" Size="Size.Medium" class="mr-3"/>
-                    <MudText Typo="Typo.h6">Our vision</MudText>
-                </div>
-            </TitleContent>
-            <ChildContent>
             <MudText Typo="Typo.body1" Class="mb-3" Style="text-align: justify; hyphens: auto;">
                 Curious about the vision for MindWork AI Studio and what the future holds? We're here to address just that. Remember, this is a free, open-source project, meaning we can't guarantee when or if this vision will be fully realized. Our aim is to share our vision with you to help you decide whether this app is right for you.
             </MudText>
@@ -51,20 +35,11 @@
             <MudText Typo="Typo.body1" Class="mb-3" Style="text-align: justify; hyphens: auto;">
                 We hope this vision excites you as much as it excites us. Together, let's build a powerful and flexible AI toolkit to support all your creative, professional, and everyday needs with MindWork AI Studio.
             </MudText>
-            </ChildContent>
+        </ExpansionPanel>
-        </MudExpansionPanel>
 
-        <MudExpansionPanel Class="border-solid border rounded-lg">
+        <ExpansionPanel HeaderIcon="@Icons.Material.Filled.RocketLaunch" HeaderText="Quick Start Guide">
-            <TitleContent>
-                <div class="d-flex align-center">
-                    <MudIcon Icon="@Icons.Material.Filled.RocketLaunch" Size="Size.Medium" class="mr-3"/>
-                    <MudText Typo="Typo.h6">Quick Start Guide</MudText>
-                </div>
-            </TitleContent>
-            <ChildContent>
             <MudMarkdown OverrideHeaderTypo="@Markdown.OverrideHeaderTypo" Value="@QUICK_START_GUIDE"/>
-            </ChildContent>
+        </ExpansionPanel>
-        </MudExpansionPanel>
 
     </MudExpansionPanels>
 </InnerScrolling>