Added search results popup view

dpigera · Jan 7, 2025 · a4b880e · a4b880e
1 parent fd06096
commit a4b880e
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 5 deletions.
diff --git a/app/controllers/dashboard.js b/app/controllers/dashboard.js
@@ -20,6 +20,8 @@ export default class DashboardController extends Controller {
   @tracked messageText = '';
   @tracked replyText = '';
   @tracked isMessageEmojiPickerVisible = false;
+  @tracked searchText = '';
+  @tracked isSearchPopupVisible = false;
 
   init() {
     super.init(...arguments);
@@ -214,4 +216,21 @@ export default class DashboardController extends Controller {
       console.error('Error posting reply:', error);
     }
   }
+
+  @action
+  updateSearchText(event) {
+    this.searchText = event.target.value;
+    this.isSearchPopupVisible = this.searchText.length > 0;
+  }
+
+  @action
+  clearSearch() {
+    this.searchText = '';
+    this.isSearchPopupVisible = false;
+  }
+
+  @action
+  focusSearch() {
+    this.isSearchPopupVisible = this.searchText.length > 0;
+  }
 } 
diff --git a/app/templates/dashboard.hbs b/app/templates/dashboard.hbs
@@ -1,11 +1,55 @@
 <div class="h-screen flex flex-col">
   {{!-- Header --}}
-  <header class="h-14 bg-purple-800 flex items-center px-4 border-b border-purple-900">
-    <div class="flex-1 flex items-center max-w-3xl">
-      <input type="text" placeholder="Search..." class="w-full px-4 py-1.5 rounded bg-purple-700 text-white placeholder-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-500">
-      <button class="ml-2 px-4 py-1.5 bg-purple-600 rounded hover:bg-purple-500 text-white">Search</button>
+  <div class="bg-purple-900 border-b border-purple-800">
+    <div class="relative p-4">
+      <div class="relative ml-4 w-96">
+        <div class="relative">
+          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <svg class="h-5 w-5 text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+          </div>
+          <input
+            type="text"
+            class="w-full pl-10 pr-4 py-2 rounded-lg bg-purple-100 border border-purple-200 focus:ring-2 focus:ring-purple-500 focus:border-transparent placeholder-purple-400 text-purple-900"
+            placeholder="Search..."
+            value={{this.searchText}}
+            {{on "input" this.updateSearchText}}
+            {{on "focus" this.focusSearch}}
+          >
+          {{#if this.searchText}}
+            <button 
+              class="absolute right-3 top-1/2 transform -translate-y-1/2 text-purple-400 hover:text-purple-600"
+              {{on "click" this.clearSearch}}
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          {{/if}}
+        </div>
+      </div>
+
+      {{#if this.isSearchPopupVisible}}
+        <div class="absolute left-[29px] mt-2 w-96 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
+          <div class="flex justify-between items-center p-4 border-b border-gray-200">
+            <span class="text-base text-gray-700">Search Results</span>
+            <button 
+              class="text-gray-400 hover:text-gray-600"
+              {{on "click" this.clearSearch}}
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div class="p-4 h-[300px] overflow-y-auto">
+            <p class="text-gray-600">This is a search result...</p>
+          </div>
+        </div>
+      {{/if}}
     </div>
-  </header>
+  </div>
 
   {{!-- Main Content --}}
   <div class="flex-1 flex overflow-hidden">