[Blog] [Ajay]: Implement search blog feature

Author: Ajay kumar

TestArena/Blog/Common/BlogImage.razor

@@ -1,8 +1,8 @@
 @using System.ComponentModel.DataAnnotations
 
 @code {
-    [Required] [Parameter] public string ImagePath { get; set; }
-    [Required] [Parameter] public string Description { get; set; }
+    [Required] [Parameter] public string ImagePath { get; set; } = "#";
+    [Required] [Parameter] public string Description { get; set; } = "NA";
     [Parameter] public int Number { get; set; }
 
     private bool IsMagnified { get; set; } = false;

TestArena/Blog/Common/NavigationUtils/SiteMap.cs

@@ -0,0 +1,26 @@
+using System.Collections.Generic;
+
+namespace TestArena.Blog.Common.NavigationUtils
+{
+    public static class SiteMap
+    {
+        public static List<PageInfo> Pages { get; } = new List<PageInfo>
+        {
+            new("Intro to PACT for .NET Core: API contract testing", "/blog/contract-testing-pact-net-intro"),
+            new("Intro to PACT for .NET Core: Events based systems", "/blog/contract-testing-in-pact-with-events"),
+            new("Intro to PACT for .NET Core: Integration with PactFlow", "/blog/integration-with-pactflow")
+        };
+    }
+
+    public class PageInfo
+    {
+        public string Header { get; }
+        public string RelativePath { get; }
+
+        public PageInfo(string header, string relativePath)
+        {
+            Header = header;
+            RelativePath = relativePath;
+        }
+    }
+}

TestArena/Blog/PactNet/handling-events/Index.razor

@@ -2,7 +2,7 @@
 @using TestArena.Blog.Common
 
 <BlogContainer>
-    <Header Title="Intro to PACT for .NET Core: API contract testing"
+    <Header Title="Intro to PACT for .NET Core: Events based systems"
             Image="images/blog/pact/events-demo/contract-testing-events.webp" PublishedOn="@DateTime.Now" Authors="Ajay Kumar">
     </Header>
 

TestArena/Layout/HeaderComponent.razor

@@ -13,9 +13,7 @@
                 </div>
 
                 <!-- Search bar in the center -->
-                <div class="col-12 col-md-4 d-flex justify-content-md-center justify-content-center mt-2 mt-md-0">
-                    <input type="text" class="form-control w-75" placeholder="Search...">
-                </div>
+                <HeaderSearchBar />
 
                 <!-- Settings button on the right -->
                 <div class="col-12 col-md-4 d-flex justify-content-md-end justify-content-center mt-2 mt-md-0">

TestArena/Layout/HeaderSearchBar.razor

@@ -0,0 +1,41 @@
+@using TestArena.Layout
+@using TestArena.Blog.Common.NavigationUtils
+
+<div class="col-12 col-md-4 d-flex justify-content-md-center justify-content-center mt-2 mt-md-0">
+    <div class="w-75 position-relative">
+        <input type="text" class="form-control" placeholder="Search..." @oninput="FilterPages">
+        <ul class="list-group position-absolute w-100 mt-1" style="z-index: 1000;" hidden="@(!FilteredPages.Any())">
+            @foreach (var filteredPage in FilteredPages)
+            {
+                <li class="list-group-item p-0">
+                    <a href="@filteredPage.RelativePath" class="d-block text-decoration-none p-2" @onclick="() => HideDropdown()">@filteredPage.Header</a>
+                </li>
+            }
+        </ul>
+    </div>
+</div>
+
+@code {
+    private string SearchText { get; set; } = string.Empty;
+    private List<PageInfo> FilteredPages { get; set; } = new();
+
+    private void FilterPages(ChangeEventArgs e)
+    {
+        SearchText = e.Value?.ToString() ?? string.Empty;
+        if (string.IsNullOrWhiteSpace(SearchText))
+        {
+            FilteredPages.Clear();
+        }
+        else
+        {
+            FilteredPages = SiteMap.Pages
+                .Where(page => page.Header.Contains(SearchText, StringComparison.OrdinalIgnoreCase))
+                .ToList();
+        }
+    }
+
+    private void HideDropdown()
+    {
+        FilteredPages.Clear();
+    }
+}