From 7bbbcb97ab664772380a8e10e0bb8cfc7176ff39 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Fri, 12 Jul 2024 17:12:33 +0900
Subject: [PATCH] anchor 1

---
 .../Components/Layout/NavMenu.razor           |  1 +
 .../Pages/Components/CompoAccordion.razor     |  2 +-
 .../Pages/Components/CompoAnchor.razor        | 28 +++++++++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 BlazorFluentUI/Components/Pages/Components/CompoAnchor.razor

diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index 60b4da3..f1a130a 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -44,6 +44,7 @@
             <FluentNavGroup Icon="@(new Icons.Regular.Size20.PuzzlePiece())" Expanded="false" Title="Components">
                 <FluentNavLink Href="compooverview" Icon="@(new Icons.Regular.Size20.Eye())" IconColor="Color.Accent">Overview</FluentNavLink>
                 <FluentNavLink Href="compoaccordion" Icon="@(new Icons.Regular.Size20.ListBar())" IconColor="Color.Accent">Accordion</FluentNavLink>
+                <FluentNavLink Href="compoanchor" Icon="@(new Icons.Regular.Size20.LinkMultiple())" IconColor="Color.Accent">Anchor</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>
diff --git a/BlazorFluentUI/Components/Pages/Components/CompoAccordion.razor b/BlazorFluentUI/Components/Pages/Components/CompoAccordion.razor
index fa90790..f31daf2 100644
--- a/BlazorFluentUI/Components/Pages/Components/CompoAccordion.razor
+++ b/BlazorFluentUI/Components/Pages/Components/CompoAccordion.razor
@@ -5,7 +5,7 @@
 <FluentLabel Typo="Typography.H3">Accordion</FluentLabel>
 <FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
 <FluentLabel Typo="Typography.Body">
-    The <code>Accordion</code> wraps a web component of a <code>accordion</code> element.
+    The <code>FluentAccordion</code> wraps a web component of a <code>accordion</code> element.
     It uses the <code>FluentAccordionItem</code> component for defining the individual accordion items.
 </FluentLabel>
 
diff --git a/BlazorFluentUI/Components/Pages/Components/CompoAnchor.razor b/BlazorFluentUI/Components/Pages/Components/CompoAnchor.razor
new file mode 100644
index 0000000..db40f1a
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/Components/CompoAnchor.razor
@@ -0,0 +1,28 @@
+@page "/compoanchor"
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Anchor</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+The <code>FluentAnchor</code> wraps a web component of a <code>anchor</code> element.
+The <code>FluentAnchor</code> component supports the same visual appearances as the <code>FluentButton</code> component as well as a hypertext appearance.
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <p>Default</p>
+    <FluentAnchor Href="#" title="Anchor tooltip">Anchor</FluentAnchor>
+
+    <p>With target</p>
+    <FluentAnchor Href="https://www.fluentui-blazor.net/" Target="_blank">Fluent UI Blazor</FluentAnchor>
+
+    <p>With custom action</p>
+    <FluentAnchor Href="#" Appearance="Appearance.Hypertext"
+                  OnClick="@(() => message = "Anchor clicked!")">
+        Custom Action
+    </FluentAnchor>
+    <p><b>Message</b>: @message</p>
+</FluentCard>
+
+@code {
+    string? message;
+}