From 9b83eb5707c8c349c98e7c9fdf046a8d930de81b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20Can=20Karag=C3=B6z?= <m.cankaragoz@outlook.com>
Date: Wed, 8 Apr 2026 11:49:38 +0300
Subject: [PATCH] Added Watch Example That Shows New TimeZone Parameter Usage

---
 .../Watch/Examples/WatchExample2.razor        | 53 +++++++++++++++++++
 .../Pages/Components/Watch/WatchPage.razor    |  4 ++
 2 files changed, 57 insertions(+)
 create mode 100644 docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Watch/Examples/WatchExample2.razor

diff --git a/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Watch/Examples/WatchExample2.razor b/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Watch/Examples/WatchExample2.razor
new file mode 100644
index 00000000..6306f6a1
--- /dev/null
+++ b/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Watch/Examples/WatchExample2.razor
@@ -0,0 +1,53 @@
+@namespace MudExtensions.Docs.Examples
+@inject ISnackbar Snackbar
+@using MudBlazor.Extensions
+@using MudExtensions.Utilities
+
+<MudGrid>
+    <MudItem xs="12" sm="8">
+        <MudStack Class="mud-width-full" AlignItems="AlignItems.Center">
+            <MudWatch @ref="_watch" Interval="TimeSpan.FromSeconds(1)" Mode="WatchMode.Watch"
+                      Wheel="_wheel" ShowHour="_showHour" ShowMinute="_showMinute" ShowSecond="_showSecond" ShowMillisecond="_showMillisecond"
+                      TimeZone="_selectedTimeZone" />
+        </MudStack>
+    </MudItem>
+
+    <MudItem xs="12" sm="4">
+        <MudStack Spacing="4">
+            <MudSelectExtended @bind-Value="_selectedTimeZone" Label="TimeZone" Dense="true" SearchBox="true" ToStringFunc="@(tz => $"{tz.DisplayName} ({tz.Id})")">
+                @foreach (var tz in _timeZones)
+                {
+                    <MudSelectItemExtended Value="tz">
+                        @tz.DisplayName (@tz.Id)
+                    </MudSelectItemExtended>
+                }
+
+            </MudSelectExtended>
+            <MudSwitchM3 @bind-Value="_wheel" Color="Color.Secondary" Label="Wheel" />
+            <div class="d-flex flex-wrap gap-4">
+                <MudSwitchM3 @bind-Value="_showHour" Color="Color.Secondary" Label="Show Hour" />
+                <MudSwitchM3 @bind-Value="_showMinute" Color="Color.Secondary" Label="Show Minute" />
+                <MudSwitchM3 @bind-Value="_showSecond" Color="Color.Secondary" Label="Show Second" />
+                <MudSwitchM3 @bind-Value="_showMillisecond" Color="Color.Secondary" Label="Show Millisecond" />
+            </div>
+        </MudStack>
+    </MudItem>
+</MudGrid>
+
+@code {
+    MudWatch _watch = new();
+    bool _wheel;
+    bool _showHour = true;
+    bool _showMinute = true;
+    bool _showSecond = true;
+    bool _showMillisecond = false;
+
+    private List<TimeZoneInfo> _timeZones = new();
+    private TimeZoneInfo _selectedTimeZone = TimeZoneInfo.Utc;
+
+    protected override void OnInitialized()
+    {
+        _timeZones = TimeZoneInfo.GetSystemTimeZones().ToList();
+        _selectedTimeZone = TimeZoneInfo.Local;
+    }
+}
diff --git a/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Watch/WatchPage.razor b/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Watch/WatchPage.razor
index cf396226..eb1ff6e5 100644
--- a/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Watch/WatchPage.razor
+++ b/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Watch/WatchPage.razor
@@ -5,4 +5,8 @@
     <ExampleCard ComponentName="Watch" ExampleName="WatchExample1" Title="Usage" Description="MudWatch has classic and wheel views with other design options.">
         <WatchExample1 />
     </ExampleCard>
+
+    <ExampleCard ComponentName="Watch" ExampleName="WatchExample2" Title="TimeZone" Description="MudWatch supports dynamic time zones.">
+        <WatchExample2 />
+    </ExampleCard>
 </ExamplePage>