Code Refactored

Author: PrashantUnity

TextHub/Pages/Lowercase.razor renamed to TextHub/Components/Forms/TextCaseLayout.razor

@@ -1,46 +1,39 @@
-@page "/lowercase"
-@using TextHub.Services
-@using TextHub.UIComponent
+@using TextHub.Services.Data
+@using TextHub.Components.Shared
 @using Microsoft.JSInterop
 @inject JsonLdService JsonLdService
 @inject ToolDataService ToolDataService
 @inject IJSRuntime JSRuntime
 
-<PageTitle>Lowercase Converter - Text Hub</PageTitle>
+<PageTitle>@PageTitle - Text Hub</PageTitle>
 
-<DynamicJsonLd JsonLdContent="@_jsonLdContent" Id="lowercase-jsonld" />
+<DynamicJsonLd JsonLdContent="@_jsonLdContent" Id="@(ToolName.ToLower().Replace(" ", "").Replace("-", "").Replace("_", "") + "-jsonld")" />
 
 <main class="flex-1">
     <div class="container mx-auto px-4 py-8 md:py-12 animate-fade-in">
         <div class="max-w-4xl mx-auto">
             <div class="text-center mb-8 md:mb-10">
                 <div class="inline-flex items-center justify-center p-2.5 sm:p-3 bg-primary/10 rounded-lg mb-3 md:mb-4">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-letter-text w-6 h-6 sm:w-8 sm:h-8 text-primary">
-                        <path d="M15 12h6"></path>
-                        <path d="M15 6h6"></path>
-                        <path d="m3 13 3.553-7.724a.5.5 0 0 1 .894 0L11 13"></path>
-                        <path d="M3 18h18"></path>
-                        <path d="M4 11h6"></path>
-                    </svg>
+                    @IconSvg
                 </div>
                 <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-3 md:mb-4">
-                    <span class="text-gradient">Lowercase Converter</span>
+                    <span class="text-gradient">@ToolName</span>
                 </h1>
-                <p class="text-base sm:text-lg text-muted-foreground px-4">Transform text to lowercase with one click</p>
+                <p class="text-base sm:text-lg text-muted-foreground px-4">@Description</p>
             </div>
 
             <div class="grid gap-4 md:gap-6">
                 <div class="animate-fade-in" style="animation-delay: 100ms;">
                     <label class="block text-sm font-medium mb-2">Input Text</label>
                     <textarea 
                         @bind="_inputText" 
-                        @oninput="ConvertToLowercase"
+                        @oninput="OnInputChanged"
                         placeholder="Enter or paste your text here..." 
                         class="input-area min-h-[150px] sm:min-h-[200px] text-sm sm:text-base"></textarea>
                 </div>
 
                 <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center animate-fade-in" style="animation-delay: 200ms;">
-                    <button @onclick="ConvertToLowercase" class="btn-primary w-full sm:w-auto text-sm sm:text-base">Convert to lowercase</button>
+                    <button @onclick="OnConvertClicked" class="btn-primary w-full sm:w-auto text-sm sm:text-base">@ConvertButtonText</button>
                     <button @onclick="ClearText" class="btn-secondary w-full sm:w-auto text-sm sm:text-base">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw w-4 h-4 mr-2 inline">
                             <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
@@ -75,32 +68,52 @@
                 <h2 class="text-lg md:text-xl font-semibold mb-2 md:mb-3">How it works</h2>
                 <ul class="space-y-1.5 md:space-y-2 text-sm md:text-base text-muted-foreground">
                     <li>• Simply paste or type your text in the input box</li>
-                    <li>• Click "Convert to lowercase" to transform your text</li>
+                    <li>• Click "@ConvertButtonText" to transform your text</li>
                     <li>• Copy the result to your clipboard with one click</li>
-                    <li>• Perfect for normalizing text or creating consistent formatting</li>
+                    <li>• @UseCaseDescription</li>
                 </ul>
             </div>
         </div>
     </div>
 </main>
 
 @code {
+    [Parameter] public string PageTitle { get; set; } = string.Empty;
+    [Parameter] public string ToolName { get; set; } = string.Empty;
+    [Parameter] public string Description { get; set; } = string.Empty;
+    [Parameter] public string ConvertButtonText { get; set; } = string.Empty;
+    [Parameter] public string UseCaseDescription { get; set; } = string.Empty;
+    [Parameter] public RenderFragment IconSvg { get; set; } = default!;
+    [Parameter] public string Route { get; set; } = string.Empty;
+    [Parameter] public Func<string, string> ConvertFunction { get; set; } = default!;
+
     private string _inputText = string.Empty;
     private string _outputText = string.Empty;
     private string _jsonLdContent = string.Empty;
 
     protected override void OnInitialized()
     {
-        var tool = ToolDataService.GetTextCaseTools().FirstOrDefault(t => t.Href == "/lowercase");
+        var tool = ToolDataService.GetTextCaseTools().FirstOrDefault(t => t.Href == Route);
         if (tool != null)
         {
             _jsonLdContent = JsonLdService.GenerateToolPageJsonLd(tool, "Text Case Tools");
         }
     }
 
-    private void ConvertToLowercase()
+    private void OnInputChanged()
+    {
+        if (ConvertFunction != null)
+        {
+            _outputText = ConvertFunction(_inputText);
+        }
+    }
+
+    private void OnConvertClicked()
     {
-        _outputText = _inputText.ToLower();
+        if (ConvertFunction != null)
+        {
+            _outputText = ConvertFunction(_inputText);
+        }
     }
 
     private void ClearText()