From b0d44bf1e67b9f15787b8586a25591f8ee536898 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Wed, 24 Jul 2024 17:00:31 +0900
Subject: [PATCH] highlighter

---
 .../Components/Layout/NavMenu.razor           |  1 +
 .../Pages/{ => Components}/CompoFlipper.razor |  2 +-
 .../Pages/Components/CompoHightlighter.razor  | 23 +++++++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)
 rename BlazorFluentUI/Components/Pages/{ => Components}/CompoFlipper.razor (96%)
 create mode 100644 BlazorFluentUI/Components/Pages/Components/CompoHightlighter.razor

diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index 8dea677..9c3ad4d 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -63,6 +63,7 @@
                 <FluentNavLink Href="compodrag" Icon="@(new Icons.Regular.Size20.Drag())" IconColor="Color.Accent">Drag</FluentNavLink>
                 <FluentNavLink Href="compoemoji" Icon="@(new Icons.Regular.Size20.EmojiMeme())" IconColor="Color.Accent">Emoji</FluentNavLink>
                 <FluentNavLink Href="compoflipper" Icon="@(new Icons.Regular.Size20.LineHorizontal3())" IconColor="Color.Accent">Flipper</FluentNavLink>
+                <FluentNavLink Href="compohighlighter" Icon="@(new Icons.Regular.Size20.Highlight())" IconColor="Color.Accent">Highlighter</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>
diff --git a/BlazorFluentUI/Components/Pages/CompoFlipper.razor b/BlazorFluentUI/Components/Pages/Components/CompoFlipper.razor
similarity index 96%
rename from BlazorFluentUI/Components/Pages/CompoFlipper.razor
rename to BlazorFluentUI/Components/Pages/Components/CompoFlipper.razor
index 23a2889..6c87dd2 100644
--- a/BlazorFluentUI/Components/Pages/CompoFlipper.razor
+++ b/BlazorFluentUI/Components/Pages/Components/CompoFlipper.razor
@@ -9,7 +9,7 @@
 </div>
 
 
-<h4 class="mt-4">Default Example</h4>
+<h4 class="mt-4">Example</h4>
 <FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
     <h5>Previous</h5>
     <FluentFlipper Direction="FlipperDirection.Previous"/>
diff --git a/BlazorFluentUI/Components/Pages/Components/CompoHightlighter.razor b/BlazorFluentUI/Components/Pages/Components/CompoHightlighter.razor
new file mode 100644
index 0000000..850a2be
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/Components/CompoHightlighter.razor
@@ -0,0 +1,23 @@
+@page "/compohighlighter"
+
+@rendermode RenderMode.InteractiveServer
+
+<h3>Highlighter</h3>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<div>
+    The <code>FluentHighlighter</code> highlights text in a string based on a search term and using <code>&lt;mark&gt;</code> tags.
+</div>
+
+
+<h4 class="mt-4">Example</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentTextField @bind-Value="highlight" Immediate="true" Label="Search (Delimeters: [whitespace] ,[comma] ;[semicolon])"/>
+    <div class="mt-3 p-2 fluent-border-s1">
+        <FluentHighlighter HighlightedText="@highlight" Delimiters=" ,;"
+                           Text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur." />
+    </div>
+</FluentCard>
+
+@code {
+    string highlight = "";
+}