Refactor InformationWindow: update chat expansion logic, enhance button styles, and improve layout with pagination

Author: issackjohn

experimental/responsive-design/src/lib/components/information-window.js

@@ -13,7 +13,7 @@ class InformationWindow extends LitElement {
     constructor() {
         super();
         this._restaurants = restaurants;
-        this._isChatExpanded = true;
+        this._isChatExpanded = false;
         this._currentIndex = 0;
 
         // ResizeObserver is used primarily to exercise this API as part of the benchmark.
@@ -72,6 +72,11 @@ class InformationWindow extends LitElement {
         }
     }
 
+    _goToCard(index) {
+        this._currentIndex = index;
+        this.updateCarousel();
+    }
+
     updateCarousel() {
         const cardRow = this.shadowRoot.querySelector(".card-row");
         if (cardRow)
@@ -82,37 +87,59 @@ class InformationWindow extends LitElement {
 
     _getExpandedTemplate() {
         return html`
-            <div class="relative w-full overflow-hidden">
+            <div class="relative w-full overflow-hidden rounded-xl border border-teal-700 bg-gradient-to-b from-teal-50 to-white p-6 shadow-xl">
                 <button
-                    class="absolute left-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 transform cursor-pointer items-center justify-center rounded-full border-0 bg-black bg-opacity-50 p-2 text-white disabled:cursor-not-allowed disabled:opacity-50"
+                    class="absolute left-6 top-1/2 z-10 flex h-12 w-12 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border-2 border-teal-600 bg-white text-teal-700 shadow-lg hover:bg-teal-50 focus:outline-none focus:ring-4 focus:ring-teal-400 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:opacity-40 disabled:shadow-none"
                     @click="${this.previousCard}"
                     ?disabled="${this._currentIndex === 0}"
+                    aria-label="Previous restaurant"
                 >
-                    &lt;
+                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+                    </svg>
                 </button>
                 <div class="card-row flex w-full">
-                    ${this._restaurants.map((restaurant) => html` <restaurant-card title="${restaurant.title}" distance="${restaurant.distance}" rating="${restaurant.rating}" class="box-border w-full flex-none p-2"></restaurant-card> `)}
+                    ${this._restaurants.map((restaurant) => html` <restaurant-card title="${restaurant.title}" distance="${restaurant.distance}" rating="${restaurant.rating}" class="box-border w-full flex-none p-3"></restaurant-card> `)}
                 </div>
                 <button
                     id="next-restaurant-btn"
-                    class="absolute right-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 transform cursor-pointer items-center justify-center rounded-full border-0 bg-black bg-opacity-50 p-2 text-white disabled:cursor-not-allowed disabled:opacity-50"
+                    class="absolute right-6 top-1/2 z-20 flex h-12 w-12 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border-2 border-teal-600 bg-white text-teal-700 shadow-lg hover:bg-teal-50 focus:outline-none focus:ring-4 focus:ring-teal-400 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:opacity-40 disabled:shadow-none"
                     @click="${this.nextCard}"
                     ?disabled="${this._currentIndex === this._restaurants.length - 1}"
+                    aria-label="Next restaurant"
                 >
-                    &gt;
+                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                    </svg>
                 </button>
+
+                <!-- Pagination Dots -->
+                <div class="mt-4 flex justify-center space-x-2">
+                    ${this._restaurants.map(
+        (_, index) => html`
+                            <button class="${index === this._currentIndex ? "bg-teal-600 w-6" : "bg-teal-300 hover:bg-teal-400"} h-2 w-2 rounded-full" @click="${() => this._goToCard(index)}" aria-label="Go to restaurant ${index + 1}"></button>
+                        `
+    )}
+                </div>
             </div>
         `;
     }
 
     _getGridTemplate() {
-        return html` <div class="grid grid-cols-2 gap-4">${this._restaurants.map((restaurant) => html` <restaurant-card title="${restaurant.title}" distance="${restaurant.distance}" rating="${restaurant.rating}"></restaurant-card> `)}</div> `;
+        return html`
+            <div class="to-teal-25 rounded-xl border border-teal-700 bg-gradient-to-br from-teal-50 via-white p-6 shadow-xl">
+                <div class="grid grid-cols-2 gap-6">${this._restaurants.map((restaurant) => html` <restaurant-card title="${restaurant.title}" distance="${restaurant.distance}" rating="${restaurant.rating}"></restaurant-card> `)}</div>
+            </div>
+        `;
     }
 
     render() {
         return html`
             <div class="p-1 xl:p-8">
-                <h4 class="my-1 mb-1 text-base font-semibold text-gray-700">Restaurants Near You</h4>
+                <div class="mb-6 flex items-center justify-between">
+                    <h4 class="text-xl font-bold text-teal-800">Restaurants Near You</h4>
+                    <div class="rounded-lg bg-teal-100 px-3 py-1 text-sm font-medium text-teal-700">${this._restaurants.length} found</div>
+                </div>
                 ${this._isChatExpanded ? this._getExpandedTemplate() : this._getGridTemplate()}
             </div>
         `;