persona

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -70,6 +70,7 @@
                 <FluentNavLink Href="compomessagebar" Icon="@(new Icons.Regular.Size20.WindowArrowUp())" IconColor="Color.Accent">MessageBar</FluentNavLink>
                 <FluentNavLink Href="compomessagebox" Icon="@(new Icons.Regular.Size20.BoxArrowUp())" IconColor="Color.Accent">MessageBox</FluentNavLink>
                 <FluentNavLink Href="compooverlay" Icon="@(new Icons.Regular.Size20.BoxArrowUp())" IconColor="Color.Accent">Overlay</FluentNavLink>
+                <FluentNavLink Href="compopersona" Icon="@(new Icons.Regular.Size20.PersonSearch())" IconColor="Color.Accent">Persona</FluentNavLink>
                 <FluentNavLink Href="compotoast" Icon="@(new Icons.Regular.Size20.FoodToast())" IconColor="Color.Accent">Toast</FluentNavLink>
 
             </FluentNavGroup>

BlazorFluentUI/Components/Pages/Components/CompoPersona.razor

@@ -0,0 +1,108 @@
+@page "/compopersona"
+
+@inject EmployeeService EmployeeService;
+
+@rendermode RenderMode.InteractiveServer
+
+<h3>Persona</h3>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<div>
+    A <code>FluentPerona</code> is a visual representation of a person with an avatar. A status can be specified optionally.
+</div>
+
+
+<h4 class="mt-4">Default</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    @if (employee != null)
+    {
+    <FluentPersona Name="@($"{employee.FirstName} {employee.LastName}")"
+                   Status="PresenceStatus.Available"
+                   StatusSize="PresenceBadgeSize.Small"
+                   StatusTitle="This employee is available"
+                   Image="@employee.Photo"
+                   ImageSize="50px"/>
+    }
+</FluentCard>
+
+<h4 class="mt-4">Text Position</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    @if (employee != null)
+    {
+        <FluentPersona Name="@($"{employee.FirstName} {employee.LastName}")"
+                       Status="PresenceStatus.Available"
+                       StatusSize="PresenceBadgeSize.Small"
+                       StatusTitle="This employee is available"
+                       Image="@employee.Photo"
+                       ImageSize="50px" 
+                       TextPosition="TextPosition.Start" />
+    }
+</FluentCard>
+
+<h4 class="mt-4">Icon</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <FluentPersona Name="Anonymous"
+                   Status="PresenceStatus.Offline"
+                   StatusSize="PresenceBadgeSize.Small"
+                   StatusTitle="This employee is offline"
+                   Image="@(new Icons.Regular.Size48.Person().ToDataUri("25px", "white"))"
+                   ImageSize="50px"
+                   TextPosition="TextPosition.Start" />
+</FluentCard>
+
+<h4 class="mt-4">With no image (Default initials)</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <FluentStack HorizontalGap="10">
+        <FluentPersona Name="Bill Gates"
+                       ImageSize="50px"
+                       Status="PresenceStatus.Busy"
+                       StatusSize="PresenceBadgeSize.Small" />
+        <FluentPersona Initials="BG"
+                       ImageSize="50px" />
+    </FluentStack>
+</FluentCard>
+
+<h4 class="mt-4">Dissmiss action</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    @if (employees != null && employees.Count > 0)
+    {
+        <FluentStack VerticalGap="20" Wrap="true">
+            @foreach (var emp in employees)
+            {
+                <div hidden="@hiddenOptions![emp.ID]">
+                    <FluentPersona Name="@($"{emp.FirstName} {emp.LastName}")"
+                                   Status="PresenceStatus.Available"
+                                   StatusSize="PresenceBadgeSize.Small"
+                                   StatusTitle="This employee is available"
+                                   Image="@emp.Photo"
+                                   ImageSize="50px"
+                                   DismissTitle="Dismiss this employee"
+                                   OnDismissClick="@(() => {dismissMessage = $"Dismiss {emp.FirstName} {emp.LastName}"; hiddenOptions![emp.ID] = true;})" />
+                </div>
+            }
+        </FluentStack>
+    }
+    <p>
+        <b>Message</b>: @dismissMessage?.ToString()
+    </p>
+</FluentCard>
+
+@code {
+    readonly int EMP_SIZE = 5;
+
+    Employee? employee;
+    List<Employee>? employees;
+    Dictionary<int, bool>? hiddenOptions;
+
+    protected override void OnInitialized()
+    {
+        employees = EmployeeService.GetEmployeeData(EMP_SIZE);
+        employee = employees[Random.Shared.Next(0, EMP_SIZE)];
+        hiddenOptions = new Dictionary<int, bool>();
+        foreach (var emp in employees)
+        {
+            hiddenOptions.Add(emp.ID, false);
+        }
+    }
+
+    string? dismissMessage;
+}