From fb8ec693c49fc13f4f7da0dbdaa5d2ce52e64264 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Tue, 16 Jul 2024 13:16:26 +0900
Subject: [PATCH] presence badge

---
 .../Components/Layout/NavMenu.razor           |  2 +-
 .../Pages/Components/CompoPresenceBadge.razor | 88 ++++++++++++++++++-
 2 files changed, 87 insertions(+), 3 deletions(-)

diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index 0b39d5a..cfd6c79 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -49,7 +49,7 @@
                 <FluentNavGroup Icon="@(new Icons.Regular.Size20.Tag())" Expanded="false" Title="Badge">
                     <FluentNavLink Href="compobadge" Icon="@(new Icons.Regular.Size20.Badge())" IconColor="Color.Accent">Badge</FluentNavLink>
                     <FluentNavLink Href="compocounterbadge" Icon="@(new Icons.Regular.Size20.NumberCircle1())" IconColor="Color.Accent">CounterBadge</FluentNavLink>
-                    <FluentNavLink Href="compopresencebadge" Icon="@(new Icons.Regular.Size20.NumberCircle1())" IconColor="Color.Accent">PresenceBadge</FluentNavLink>
+                    <FluentNavLink Href="compopresencebadge" Icon="@(new Icons.Regular.Size20.CheckmarkCircle())" IconColor="Color.Accent">PresenceBadge</FluentNavLink>
                 </FluentNavGroup>
 
             </FluentNavGroup>
diff --git a/BlazorFluentUI/Components/Pages/Components/CompoPresenceBadge.razor b/BlazorFluentUI/Components/Pages/Components/CompoPresenceBadge.razor
index 63b608f..1fc59d4 100644
--- a/BlazorFluentUI/Components/Pages/Components/CompoPresenceBadge.razor
+++ b/BlazorFluentUI/Components/Pages/Components/CompoPresenceBadge.razor
@@ -6,9 +6,93 @@
 <FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
 The <code>FluentPresenceBadge</code> component is used to display a status indicator such as available, away, or busy.
 
-<FluentLabel class="my-3" Typo="Typography.H4">Appearances</FluentLabel>
+<FluentLabel class="my-3" Typo="Typography.H4">Available Size</FluentLabel>
+<p>
+    A presence badge supports <code>Tiny</code>, <code>ExtraSmall</code>, <code>Small</code>, <code>Medium</code>, and <code>Large</code> size.
+    The default size is , <code>Small</code>.
+</p>
 <FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
-    
+    <FluentStack VerticalAlignment="VerticalAlignment.Bottom">
+        <FluentPresenceBadge Status="PresenceStatus.Available" Size="PresenceBadgeSize.Tiny">
+            <FluentIcon Value="@(new Icons.Regular.Size24.Person())" Width="24px"/>
+        </FluentPresenceBadge>
+
+        <FluentSpacer Width="25" />
+        <FluentPresenceBadge Status="PresenceStatus.Available" Size="PresenceBadgeSize.ExtraSmall">
+            <FluentIcon Value="@(new Icons.Regular.Size24.Person())" Width="32px" />
+        </FluentPresenceBadge>
+
+        <FluentSpacer Width="25" />
+        <FluentPresenceBadge Status="PresenceStatus.Available" Size="PresenceBadgeSize.Small">
+            <FluentIcon Value="@(new Icons.Regular.Size24.Person())" Width="36px" />
+        </FluentPresenceBadge>
+
+        <FluentSpacer Width="25" />
+        <FluentPresenceBadge Status="PresenceStatus.Available" Size="PresenceBadgeSize.Medium">
+            <FluentIcon Value="@(new Icons.Regular.Size24.Person())" Width="48px" />
+        </FluentPresenceBadge>
+
+        <FluentSpacer Width="25" />
+        <FluentPresenceBadge Status="PresenceStatus.Available" Size="PresenceBadgeSize.Large">
+            <FluentIcon Value="@(new Icons.Regular.Size24.Person())" Width="64px" />
+        </FluentPresenceBadge>
+    </FluentStack>
+</FluentCard>
+
+<style>
+    .face {
+        width:32px;
+        height:32px;
+        border:1px solid silver;
+    }
+</style>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default options</FluentLabel>
+<p>
+    A presence badge supports <code>Available</code>, <code>Away</code>, <code>Busy</code>, <code>DoNotDisturb</code>, <code>Offline</code>, <code>OutOfOffice </code>, and <code>Unknown </code> status.
+    The default status is , <code>Available</code>.
+</p>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack VerticalAlignment="VerticalAlignment.Bottom">
+        <FluentPresenceBadge Status="PresenceStatus.Available">
+            <img src="https://randomuser.me/api/portraits/lego/1.jpg" class="face" />
+        </FluentPresenceBadge>
+
+        <FluentSpacer Width="25" />
+        <FluentPresenceBadge Status="PresenceStatus.Away">
+            <img src="https://randomuser.me/api/portraits/lego/2.jpg" class="face" />
+        </FluentPresenceBadge>
+
+        <FluentSpacer Width="25" />
+        <FluentPresenceBadge Status="PresenceStatus.Busy">
+            <img src="https://randomuser.me/api/portraits/lego/3.jpg" class="face" />
+        </FluentPresenceBadge>
+
+        <FluentSpacer Width="25" />
+        <FluentPresenceBadge Status="PresenceStatus.DoNotDisturb">
+            <img src="https://randomuser.me/api/portraits/lego/4.jpg" class="face" />
+        </FluentPresenceBadge>
+
+        <FluentSpacer Width="25" />
+        <FluentPresenceBadge Status="PresenceStatus.Offline">
+            <img src="https://randomuser.me/api/portraits/lego/5.jpg" class="face" />
+        </FluentPresenceBadge>
+
+        <FluentSpacer Width="25" />
+        <FluentPresenceBadge Status="PresenceStatus.OutOfOffice">
+            <img src="https://randomuser.me/api/portraits/lego/6.jpg" class="face" />
+        </FluentPresenceBadge>
+
+        <FluentSpacer Width="25" />
+        <FluentPresenceBadge Status="PresenceStatus.Unknown">
+            <img src="https://randomuser.me/api/portraits/lego/7.jpg" class="face" />
+        </FluentPresenceBadge>
+
+        <FluentSpacer Width="25" />
+        <FluentPresenceBadge Title="No status defined">
+            <img src="https://randomuser.me/api/portraits/lego/8.jpg" class="face" />
+        </FluentPresenceBadge>
+    </FluentStack>
 </FluentCard>
 
 @code {