From a56e1d253ef603ba7c54682b2055c4fa04dff059 Mon Sep 17 00:00:00 2001
From: Triston Armstrong <tarstrong95@proton.me>
Date: Thu, 20 Jun 2024 14:26:47 -0500
Subject: [PATCH] update header to contain close button

---
 src/ui/window.ts | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/ui/window.ts b/src/ui/window.ts
index 1cc5f72..b75735f 100644
--- a/src/ui/window.ts
+++ b/src/ui/window.ts
@@ -14,20 +14,39 @@ export default class Window {
     this.element.style.height = `${this.initial_size.h}px`;
     this.application = application;
 
-    this._add_header("Hello World");
+    this._add_header();
     this._add_content("This is a test");
     this._add_resize_handles();
     this._handle_drag()
   }
 
-  private _add_header(title: string): HTMLDivElement {
+  private _add_header(): HTMLDivElement {
     this.header = new Component()
     this.header.element.id = "header";
     this.header.element.classList.add(
-      "bg-[#333]", "p-2", "text-sm", "text-[#eee]", "rounded-t", "text-center", "cursor-move"
+      "bg-[#333]", "py-1","px-4", "text-sm", "text-[#eee]", "rounded-t", "text-center", "cursor-move", "flex", "justify-between",
+      "items-center"
     );
-    this.header.element.innerText = title;
     this.element.appendChild(this.header.start());
+
+    const window_title = new Component('window-title')
+    window_title.element.classList.add("flex-1")
+    window_title.element.innerText = "Hello world"
+
+    const close_btn_container = new Component('close-btn-container') 
+    close_btn_container.element.classList.add("flex-1", "justify-end", "flex")
+
+    const closeButton= document.createElement('button')
+    closeButton.textContent = "X"
+    closeButton.classList.add("hover:rounded-full", "hover:bg-[#f554]", "w-6", "h-6", "hover", "font-red")
+
+    const dummy = document.createElement('div')
+    dummy.classList.add("flex-1")
+
+    this.header.addChild(dummy)
+    this.header.addChild(window_title.element)
+    close_btn_container.addChild(closeButton)
+    this.header.addChild(close_btn_container.start())
   }
 
   private _handle_drag(e: MouseEvent): void {