From 53e47726fad1dcaac0a6073dd6a8ab9e61eeb563 Mon Sep 17 00:00:00 2001
From: Vincent Baaij <vnbaaij@outlook.com>
Date: Mon, 8 Jan 2024 10:07:26 +0100
Subject: [PATCH] [Overlay] Add a timed example

---
 .../Pages/Overlay/Examples/OverlayTimed.razor | 43 +++++++++++++++++++
 .../Shared/Pages/Overlay/OverlayPage.razor    |  4 ++
 2 files changed, 47 insertions(+)
 create mode 100644 examples/Demo/Shared/Pages/Overlay/Examples/OverlayTimed.razor

diff --git a/examples/Demo/Shared/Pages/Overlay/Examples/OverlayTimed.razor b/examples/Demo/Shared/Pages/Overlay/Examples/OverlayTimed.razor
new file mode 100644
index 0000000000..a95db8f991
--- /dev/null
+++ b/examples/Demo/Shared/Pages/Overlay/Examples/OverlayTimed.razor
@@ -0,0 +1,43 @@
+<FluentSelect Items=@(Enum.GetValues<JustifyContent>())
+              OptionValue="@(c => c.ToAttributeValue())"
+              TOption="JustifyContent"
+              Position="SelectPosition.Below"
+@bind-SelectedOption="@justification" />
+
+<FluentSelect Items=@(Enum.GetValues<Align>())
+              OptionValue="@(c => c.ToAttributeValue())"
+              TOption="Align"
+              Position="SelectPosition.Below"
+@bind-SelectedOption="@alignment" />
+<br />
+<br />
+
+
+<FluentButton Appearance="Appearance.Accent" @onclick="HandleOnOpen">Show Overlay</FluentButton>
+
+<FluentOverlay @bind-Visible=@visible
+               Opacity="0.4"
+               Alignment="@alignment"
+               Justification="@justification"
+               OnClose="HandleOnClose">
+    <FluentProgressRing />
+</FluentOverlay>
+
+@code {
+    bool visible = false;
+    JustifyContent justification = JustifyContent.Center;
+    Align alignment = Align.Center;
+
+    protected void HandleOnClose()
+    {
+        DemoLogger.WriteLine("Overlay closed");
+    }
+
+    protected async Task HandleOnOpen()
+    {
+        visible = true;
+        DemoLogger.WriteLine("Overlay opened");
+        await Task.Delay(3000);
+        visible = false;
+    }
+}
diff --git a/examples/Demo/Shared/Pages/Overlay/OverlayPage.razor b/examples/Demo/Shared/Pages/Overlay/OverlayPage.razor
index fb31d4370b..d4ee4c6718 100644
--- a/examples/Demo/Shared/Pages/Overlay/OverlayPage.razor
+++ b/examples/Demo/Shared/Pages/Overlay/OverlayPage.razor
@@ -12,6 +12,10 @@
     <Description>Overlay with a default white background</Description>
 </DemoSection>
 
+<DemoSection Title="Timed" Component="typeof(OverlayTimed)">
+    <Description>A timed overlay that hides after being shown for 3 seconds</Description>
+</DemoSection>
+
 <DemoSection Title="Transparent overlay" Component="typeof(OverlayTransparent)">
     <Description>Overlay with a transparent background</Description>
 </DemoSection>