lookbook 1.0.0.beta.4 → 1.0.0.beta.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d5ea17315afaadd8b53a97bd7e3a5cb41c9c1098f5f4a67984d702386b1033b3
-  data.tar.gz: 3d2c07669fc5b7bd812429c010d2e79bc3bf0d6de4edc27c8f3da978d3780d7f
+  metadata.gz: feee8e4000727cf29049a598fea2a5f42c69fe7db5bb60b6da6c286fdb99d802
+  data.tar.gz: ab15348dfe00c841dd6ecccd9d0abe322ac918117f2bdc174f151c7673d9ee05
 SHA512:
-  metadata.gz: e9b2b50f8b9054c4e3ee9bff900c7326062721cad676b3708b2ff42e79e8a2178f35314284a01339faeca6a9350258bfe490fc75b058a7294875c30d5c103aae
-  data.tar.gz: 331ca602732e745d03a883a62e4e5e7ee0eacce7d55fc2fce74c47ea7661aaf2b42ef0b486e3a7b9ddc44b85192dcedbc2d7b4e30b9cd32ca4ec11e0a87b811e
+  metadata.gz: 48bca09ccaa76942a3f68893c0b59248d4a6350227fb84a143d6f977f436ca1f9a5e77591ac746bbcf6d253b8f8f0788fe49eb1a27649abeda64fc509fd87c50
+  data.tar.gz: f53562df6656e4670e209d88fa0c3449ae2378e65e6b40dc6b691381e1ce6409999ffa35f5d533d833fb719ec155fe8682f1ef87bc93a37cd2111481ee0d4a24

data/app/components/lookbook/base_component.rb

@@ -10,11 +10,13 @@ module Lookbook
 
     def render_component_tag(tag = :div, **attrs, &block)
       merged_classes = class_names(attrs[:class], @html_attrs[:class])
-      merge_attrs = @html_attrs.except(:class).deep_merge(attrs.except(:class))
+      merged_attrs = @html_attrs.except(:class).deep_merge(attrs.except(:class))
+
+
       render Lookbook::TagComponent.new(tag: tag,
         name: component_name,
-        **merge_attrs,
-        x_data: prepare_alpine_data(attrs[:x_data]),
+        **merged_attrs,
+        "x-data": prepare_alpine_data(merged_attrs[:"x-data"]),
         class: merged_classes), &block
     end
 
@@ -31,7 +33,7 @@ module Lookbook
     end
 
     def prepare_alpine_data(x_data = nil)
-      alpine_component_name = x_data || @html_attrs&.dig(:x_data) || alpine_component
+      alpine_component_name = x_data || @html_attrs&.dig(:"x-data") || alpine_component
       if alpine_component_name.present?
         args = Array.wrap(alpine_data)
         args.any? ? "#{alpine_component_name}(#{safe_join(args).gsub(""", "'").tr("\"", "'")})" : alpine_component_name

data/app/components/lookbook/copy_button/component.html.erb

@@ -1,10 +1,10 @@
 <%= render_component :button,
   name: "copy-button",
   **@button_attrs,
-  x_data: prepare_alpine_data,
+  "x-data": prepare_alpine_data,
   "@click.prevent": "copyToClipboard" do |button| %>
-  <% button.icon name: @icon, size: icon_size, x_show: "!copied", cloak: true %>
-  <%= icon  :check, size: icon_size, class: "text-green-500", x_show: "copied", cloak: true  %>
+  <% button.icon name: @icon, size: icon_size, "x-show": "!copied", cloak: true %>
+  <%= icon  :check, size: icon_size, class: "text-green-500", "x-show": "copied", cloak: true  %>
   <% if content %>
     <div x-ref="copyTarget" class="hidden"><%== content %></div>
   <% end %>

data/app/components/lookbook/embed/component.html.erb

@@ -1,41 +1,41 @@
 <% if @example.present? %>
-  <%= render_component_tag class: "not-prose border-b border-lookbook-divider rounded-sm overflow-hidden", "@navigation:start.window": "cleanup" do %>
+<%= render_component_tag class: "not-prose border-b border-lookbook-divider rounded-sm overflow-hidden", "@navigation:start.window": "cleanup" do %>
 
-    <%= render_component :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
-      <% toolbar.section padded: true do %>
-        <h3>
-          <%= @example.preview.label %> (<%= @example.label %>)
-        </h3>
-      <% end %>
-        <% toolbar.section align: :right, divide: :left do %>
-          <%= render_component :button_group do |group| %>
-          <% group.button icon: :eye,
-            href: helpers.lookbook_inspect_path(@example.path, @params),
-            tooltip: "View in Inspector" %>
-          <% group.button icon: :external_link,
-            href: helpers.lookbook_inspect_path(@example.path, @params),
-            tooltip: "Open in new window",
-            target: "_blank" %>
-        <% end %>
+  <%= render_component :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
+    <% toolbar.section padded: true do %>
+      <h3>
+        <%= @example.preview.label %> (<%= @example.label %>)
+      </h3>
+    <% end %>
+      <% toolbar.section align: :right, divide: :left do %>
+        <%= render_component :button_group do |group| %>
+        <% group.button icon: :eye,
+          href: helpers.lookbook_inspect_path(@example.path, @params),
+          tooltip: "View in Inspector" %>
+        <% group.button icon: :external_link,
+          href: helpers.lookbook_inspect_path(@example.path, @params),
+          tooltip: "Open in new window",
+          target: "_blank" %>
       <% end %>
     <% end %>
+  <% end %>
 
-    <div
-      x-show="tab === 'preview'"
-      @viewport:loaded="loadResizer"
-      @dom:update-complete="loadResizer"
-      @viewport:resize-progress="resizeIframe"
-      @viewport:resize-complete="resizeIframe"
-      @tabs:change.window="resizeIframe"> 
-      <%= render_component :viewport,
-        src: helpers.lookbook_preview_path(@example.path, @params.merge(lookbook_embed: true)),
-        alpine_data: "store",
-        resize_height: false,
-        max_height: @max_height,
-        class: "mb-[-2px]" %>
-    </div>
+  <div
+    x-show="tab === 'preview'"
+    @viewport:loaded="loadResizer"
+    @dom:update-complete="loadResizer"
+    @viewport:resize-progress="resizeIframe"
+    @viewport:resize-complete="resizeIframe"
+    @tabs:change.window="resizeIframe"> 
+    <%= render_component :viewport,
+      src: helpers.lookbook_preview_path(@example.path, @params.merge(lookbook_embed: true)),
+      alpine_data: "store",
+      resize_height: false,
+      max_height: @max_height,
+      class: "mb-[-2px]" %>
+  </div>
 
-  <% end %>
+<% end %>
 <% else %>
 <%= render_component_tag class: "bg-white flex flex-col items-center justify-center border-2 border-dashed border-gray-200 p-6 rounded-md not-prose" do %>
   <div class="px-4 text-center">
@@ -47,5 +47,5 @@
       </p>
     </div>
   </div>
-  <% end %>
+<% end %>
 <% end %>

data/app/components/lookbook/header/component.html.erb

@@ -60,11 +60,11 @@
         <% end %>
         <% group.button icon: :menu,
           "@click.stop": "toggleSidebar",
-          x_show: "$store.layout.mobile && sidebarHidden",
+          "x-show": "$store.layout.mobile && sidebarHidden",
           class: "!text-lookbook-header-text" %>
         <% group.button icon: :x,
           "@click.stop": "toggleSidebar",
-          x_show: "$store.layout.mobile && !sidebarHidden",
+          "x-show": "$store.layout.mobile && !sidebarHidden",
           "@keydown.esc.window": "closeMobileSidebar",
           class: "!text-lookbook-header-text" %>
       <% end %>    

data/app/components/lookbook/nav/component.html.erb

@@ -1,12 +1,8 @@
 <%= render_component_tag class: "flex flex-col overflow-hidden h-full",
   "@filter:change.stop": "filter($event.detail.text)" do %>
   
-  <% if label.present? %>
-    <%= render_component :toolbar do |toolbar| %>
-      <% toolbar.section padded: true do %>
-        <h4 class="pt-1"><%= label %></h4>
-      <% end %>
-    <% end %>
+  <% if toolbar %>
+    <%= toolbar %>
   <% end %>
 
   <% if filter && items.any? %>
@@ -21,11 +17,11 @@
         <%= safe_join(items) %>
       </ul>
       <div class="p-4 text-center" x-show="empty" x-cloak>
-        <h4 class="opacity-50 italic">No matching <%= label.downcase %>.</h4>
+        <h4 class="opacity-50 italic">No matching results.</h4>
       </div>
     <% else %>
       <div class="p-4 text-center">
-        <h4 class="opacity-50 italic">No <%= label.downcase %> available.</h4>
+        <h4 class="opacity-50 italic">Nothing here yet.</h4>
       </div>
     <% end %>
   </div>

data/app/components/lookbook/nav/component.rb

@@ -1,28 +1,26 @@
 module Lookbook
   class Nav::Component < Lookbook::BaseComponent
     renders_one :filter, Lookbook::Filter::Component
+    renders_one :toolbar, Lookbook::Toolbar::Component
 
     def initialize(
+      id: nil,
       collection:,
-      label: nil,
       collapse_singles: false,
       **attrs
     )
+      @id = id.presence || "#{collection.id}-nav"
       @collection = collection.as_tree
-      @label = label
       @item_args = {
         collapse_singles: collapse_singles
       }
-      super(**attrs)
-    end
-
-    def label
-      @label || @collection.label
+      super(**attrs, id: id)
     end
 
     def items
       @collection.non_empty_items.map do |item|
         render Lookbook::Nav::Item::Component.new item,
+          nav_id: @id,
           depth: 1,
           **@item_args
       end

data/app/components/lookbook/nav/item/component.html.erb

@@ -1,16 +1,22 @@
-<%= render_component_tag :li, id: @item.id, class: "list-none", "x-show": "!filteredOut", cloak: true do %>
-  
+<%= render_component_tag :li,
+  id: id,
+  class: "list-none",
+  "x-show": "!filteredOut",
+  data: {
+    "entity-type": item.type
+  },
+  cloak: true do %>
   <%= render_tag href.present? ? :a : :div,
     href: href,
     class: "flex items-center py-1 select-none cursor-pointer text-lookbook-nav-text hover:bg-lookbook-nav-item-hover",
     style: "padding-left: #{left_pad}px",
-    x_bind: "bindings.#{href.present? ? "link" : "toggle"}" do %>
+    "x-bind": "bindings.#{href.present? ? "link" : "toggle"}" do %>
     <div class="relative flex items-center">
-      <%= icon  nil,
+      <%= icon nil,
         size: 3,
         class: "mr-1 text-lookbook-nav-toggle absolute -left-4",
-        x_effect: "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
-      <%= icon  nav_icon(@item), size: 3.5, class: "mr-1.5 text-lookbook-nav-icon" %>
+        "x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
+      <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon" %>
       <span><%= label %></span>
     </div>
   <% end %>

data/app/components/lookbook/nav/item/component.rb

@@ -14,16 +14,22 @@ module Lookbook
 
     def initialize(
       item,
+      nav_id:,
       depth: 1,
       collapse_singles: false,
       **html_attrs
     )
+      @nav_id = nav_id
       @item = item
       @depth = depth
       @collapse_singles = collapse_singles
       super(**html_attrs)
     end
 
+    def id
+      "#{@nav_id}-#{@item.id}"
+    end
+
     def left_pad
       ((@depth - 1) * 12) + 24
     end
@@ -40,6 +46,7 @@ module Lookbook
       @children ||= if collection? && !collapsed?
         item.non_empty_items.map do |item|
           render Lookbook::Nav::Item::Component.new item,
+            nav_id: @nav_id,
             depth: (@depth + 1),
             collapse_singles: @collapse_singles
         end
@@ -52,8 +59,8 @@ module Lookbook
       collapsed? ? @item.first : @item
     end
 
-    def nav_icon(entity)
-      ICONS[entity.type] || :file
+    def nav_icon
+      ICONS[@item.type] || :file
     end
 
     def collection?

data/app/components/lookbook/page_tabs/component.html.erb

@@ -1,4 +1,4 @@
- <%= render_component_tag x_data: "{ activeTab: null }" do %>
+ <%= render_component_tag "x-data": "{ activeTab: null }" do %>
   <div class="flex w-full border-b border-lookbook-divider mb-6">
     <%= render_component :tabs, theme: :page do |t| %>
       <% @tabs.each do |props| %>

data/app/components/lookbook/split_layout/component.html.erb

@@ -1,4 +1,4 @@
-<%= render_component_tag class: "grid h-full w-full", x_bind: "bindings.root", x_effect: "initSplit" do %>
+<%= render_component_tag class: "grid h-full w-full", "x-bind": "bindings.root", "x-effect": "initSplit" do %>
   <% panes.each.with_index(1) do |pane, i| %>
     <%= pane %>
     <% if i < panes.size %>

data/app/components/lookbook/tab_panels/panel/component.html.erb

@@ -1,7 +1,7 @@
 <%= render_component_tag :section,
   id: @id,
-  x_ref: @name,
-  x_cloak: true,
+  "x-ref": @name,
+  cloak: true,
   class: "h-full",
   ":class": "{ hidden: !isActive($el) }" do %>
     <%== content %>

data/app/components/lookbook/tabs/component.html.erb

@@ -9,8 +9,8 @@
     <%= safe_join(tabs) %>
   </div>
   <div x-ref="dropdownTrigger" class="absolute" x-show="hasHiddenTabs" :style="{left: `${triggerLeft}px`}">
-    <%= render_component :button, icon: :chevrons_right, x_show: "visibleTabsCount > 0" %>
-    <%= render_component :button, icon: :menu, class: "-ml-3", x_show: "visibleTabsCount === 0" %>
+    <%= render_component :button, icon: :chevrons_right, "x-show": "visibleTabsCount > 0" %>
+    <%= render_component :button, icon: :menu, class: "-ml-3", "x-show": "visibleTabsCount === 0" %>
   </div>
   <div class="hidden">
     <div x-ref="tabsDropdown" data-cloak>

data/app/components/lookbook/tabs/dropdown_tab/component.html.erb

@@ -1,5 +1,5 @@
 <%= render_component_tag :button,
-  x_ref: @name,
+  "x-ref": @name,
   class: [
     "whitespace-nowrap px-4 border-l-2 cursor-pointer block w-full text-left",
     {

data/app/components/lookbook/tabs/tab/component.html.erb

@@ -1,6 +1,6 @@
 <%= render_component_tag :button,
   id: @id,
-  x_ref: @name,
+  "x-ref": @name,
   class: [
     "whitespace-nowrap cursor-pointer pt-2.5 pb-1.5 border-b-2",
     {

data/app/components/lookbook/tag_component.rb

@@ -4,26 +4,21 @@ module Lookbook
 
     def initialize(tag: :div, name: nil, cloak: false, **html_attrs)
       @tag = tag
-      html_attrs[:class] = class_names(html_attrs[:class]) if html_attrs[:class]
       html_attrs[:data] ||= {}
       html_attrs[:data][:component] = name if name.present?
-      html_attrs[:x_cloak] = true if cloak == true
-      @html_attrs = convert_attrs(html_attrs)
+      html_attrs["x-cloak"] = true if cloak == true
+      html_attrs[self.class.escape_attribute_key] = false
+      @html_attrs = html_attrs
     end
 
     def call
-      @html_attrs[Rails.version.to_f < 7.0 ? :escape_attributes : :escape] = false
       tag.public_send(@tag, **@html_attrs) do
         content
       end
     end
 
-    protected
-
-    def convert_attrs(html_attrs)
-      html_attrs.map do |name, value|
-        [name.to_s.tr("_", "-"), value]
-      end.to_h
+    def self.escape_attribute_key
+      @escape_attribute_key ||= Gem::Version.new(Rails.version) < Gem::Version.new('6.1.5.1') ? :escape_attributes : :escape
     end
   end
 end

data/app/controllers/lookbook/application_controller.rb

@@ -17,7 +17,7 @@ module Lookbook
       if landing.present?
         redirect_to lookbook_page_path(landing.lookup_path)
       else
-        render "lookbook/index", layout: Lookbook.previews.any? ? "lookbook/application" : "lookbook/shell"
+        render "lookbook/index"
       end
     end
 

data/app/views/layouts/lookbook/application.html.erb

@@ -1,78 +1,94 @@
 <% content_for :shell do %>
-  <%= render_component :split_layout,
-    alpine_data: "$store.layout.main",
-    ":class": "$store.layout.mobile && '!block'" do |layout| %>
+  <% if Lookbook.previews? || Lookbook.pages? %>
+    <%= render_component :split_layout,
+      alpine_data: "$store.layout.main",
+      ":class": "$store.layout.mobile && '!block'" do |layout| %>
 
-    <% layout.pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar relative translate-x-0",
-      ":class": "{
-        'transition': $store.layout.mobile,
-        'translate-x-full': $store.layout.mobile && sidebarHidden,
-        '!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-50 border-l border-lookbook-divider': $store.layout.mobile
-      }",
-      "@click.outside": "closeMobileSidebar",
-      x_cloak: true do %>
+      <% layout.pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar relative translate-x-0",
+        ":class": "{
+          'transition': $store.layout.mobile,
+          'translate-x-full': $store.layout.mobile && sidebarHidden,
+          '!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-50 border-l border-lookbook-divider': $store.layout.mobile
+        }",
+        "@click.outside": "closeMobileSidebar",
+        cloak: true do %>
 
-      <%= render_component :split_layout,
-        alpine_data: "$store.layout.#{Lookbook.pages.any? ? "sidebar" : "singleSectionSidebar"}",
-        style: "height: calc(100vh - 2.5rem);" do |layout| %>
-        <% layout.pane class: "overflow-hidden" do %>
-          <%= render_component :nav,
-            id: "previews-nav",
-            collection: Lookbook.previews,
-            alpine_data: "$store.nav.previews",
-            label: "Previews",
-            collapse_singles: true do |nav| %>
-            <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter by preview name&hellip;" %>
+        <%= render_component :split_layout,
+          alpine_data: "$store.layout.#{Lookbook.pages? && Lookbook.previews? ? "sidebar" : "singleSectionSidebar"}",
+          style: "height: calc(100vh - 2.5rem);" do |layout| %>
+
+          <% if Lookbook.previews? %>
+            <% layout.pane class: "overflow-hidden" do %>
+              <%= render_component :nav,
+                id: "previews-nav",
+                collection: Lookbook.previews,
+                alpine_data: "$store.nav.previews",
+                collapse_singles: true do |nav| %>
+                <%= nav.toolbar do |toolbar| %>
+                  <% toolbar.section padded: true do %>
+                    <h4 class="pt-1">Previews</h4>
+                  <% end %>
+                <% end %>
+                <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
+              <% end %>
+            <% end %>
           <% end %>
-        <% end %>
 
-        <% if Lookbook.pages.any? %>
-          <% layout.pane class: "overflow-hidden" do %>
-            <%= render_component :nav,
-              id: "pages-nav",
-              collection: Lookbook.pages,
-              alpine_data: "$store.nav.pages",
-              label: "Pages" %>
+          <% if Lookbook.pages? %>
+            <% layout.pane class: "overflow-hidden" do %>
+              <%= render_component :nav,
+                id: "pages-nav",
+                collection: Lookbook.pages,
+                alpine_data: "$store.nav.pages" do |nav| %>
+                <%= nav.toolbar do |toolbar| %>
+                  <% toolbar.section padded: true do %>
+                    <h4 class="pt-1">Pages</h4>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
           <% end %>
         <% end %>
 
-      <% end %>
-
-      <% if Lookbook::Preview.errors.any? %>
-        <div x-data="{hidden: false}" class="flex-none border-t border-lookbook-divider absolute bottom-0 left-0 right-0" x-show="!hidden">
-          <%= render_component :toolbar do |toolbar| %>
-            <% toolbar.section padded: true, class: "flex items-center" do %>
-              <%= icon  :alert_triangle, size: 4, class: "text-red-700" %>
-              <span class="ml-2">Preview load errors</span>
-            <% end %>
-            <% toolbar.section align: :right do %>
-              <% render_component :button, icon: :x, "@click": "hidden = !hidden" %>
+        <% if Lookbook::Preview.errors.any? %>
+          <div x-data="{hidden: false}" class="flex-none border-t border-lookbook-divider absolute bottom-0 left-0 right-0" x-show="!hidden">
+            <%= render_component :toolbar do |toolbar| %>
+              <% toolbar.section padded: true, class: "flex items-center" do %>
+                <%= icon  :alert_triangle, size: 4, class: "text-red-700" %>
+                <span class="ml-2">Preview load errors</span>
+              <% end %>
+              <% toolbar.section align: :right do %>
+                <% render_component :button, icon: :x, "@click": "hidden = !hidden" %>
+              <% end %>
             <% end %>
-          <% end %>
 
-          <div class="h-full max-h-[300px] overflow-hidden">
-            <div class="bg-red-50 w-full overflow-auto h-full">
-              <ul class="text-sm divide-y divide-red-200">
-                <% Lookbook::Preview.errors.each do |error| %>
-                  <% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
-                  <li class="px-4 py-3">
-                    <h4 class="break-all leading-tight text-xs ">
-                      <%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
-                    </h4>
-                    <pre class="text-red-800 text-xs mt-2 whitespace-pre-wrap opacity-80 font-mono"><%= error.message %></pre>
-                  </li>
-                <% end %>
-              </ul>
+            <div class="h-full max-h-[300px] overflow-hidden">
+              <div class="bg-red-50 w-full overflow-auto h-full">
+                <ul class="text-sm divide-y divide-red-200">
+                  <% Lookbook::Preview.errors.each do |error| %>
+                    <% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
+                    <li class="px-4 py-3">
+                      <h4 class="break-all leading-tight text-xs ">
+                        <%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
+                      </h4>
+                      <pre class="text-red-800 text-xs mt-2 whitespace-pre-wrap opacity-80 font-mono"><%= error.message %></pre>
+                    </li>
+                  <% end %>
+                </ul>
+              </div>
             </div>
           </div>
-        </div>
+        <% end %>
       <% end %>
-    <% end %>
 
-    <% layout.pane id: "app-main", class: "overflow-hidden", ":class": "$store.layout.mobile && 'w-screen'" do %>
-      <%= content_for?(:main) ? yield(:main) : yield %>
+      <% layout.pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
+        <%= content_for?(:main) ? yield(:main) : yield %>
+      <% end %>
     <% end %>
-
+  <% else %>
+    <div id="app-main" class="w-screen h-full overflow-hidden">
+      <%= content_for?(:main) ? yield(:main) : yield %>
+    </div>
   <% end %>
   <div class="absolute opacity-0 bg-black inset-0 top-[39px] z-[-1] transition-opacity" :class="($store.layout.mobile && !sidebarHidden) && '!opacity-30 !z-40'" data-cloak></div>
 <% end %>

data/app/views/layouts/lookbook/page.html.erb

@@ -5,44 +5,44 @@
     @navigation:complete.window="$refs.scroller.scrollTop = 0">
   
     <div class="h-full bg-lookbook-page relative">
-    <% unless @error %>
-      
-      <div class="absolute top-0 right-0 pt-1 pr-0 pl-1 pb-1 rounded-bl-md">
-        <div class="bg-lookbook-page opacity-90 absolute inset-0 w-full h-full z-0"></div>
-        <div class="relative z-10 flex items-center">
+      <% unless @error %>
         
-        <% if @previous_page %>
-          <%= render_component :button,
-            size: :lg,
-            icon: :chevron_left,
-            tooltip: "Previous page",
-            href: lookbook_page_path(@previous_page.lookup_path),
-            class: "pr-0.5 bg-transparent" %>
-        <% else %>
-          <%= render_component :button,
-            size: :lg,
-            icon: :chevron_left,
-            disabled: true,
-            class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
-        <% end %>
+        <div class="absolute top-0 right-0 pt-1 pr-0 pl-1 pb-1 rounded-bl-md">
+          <div class="bg-lookbook-page opacity-90 absolute inset-0 w-full h-full z-0"></div>
+          <div class="relative z-10 flex items-center">
+          
+          <% if @previous_page %>
+            <%= render_component :button,
+              size: :lg,
+              icon: :chevron_left,
+              tooltip: "Previous page",
+              href: lookbook_page_path(@previous_page.lookup_path),
+              class: "pr-0.5 bg-transparent" %>
+          <% else %>
+            <%= render_component :button,
+              size: :lg,
+              icon: :chevron_left,
+              disabled: true,
+              class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
+          <% end %>
 
-        <% if @next_page %>
-          <%= render_component :button,
-            size: :lg,
-            icon: :chevron_right,
-            tooltip: "Next page",
-            href: lookbook_page_path(@next_page.lookup_path),
-            class: "pl-0.5 bg-transparent" %>
-        <% else %>
-          <%= render_component :button,
-            size: :lg,
-            icon: :chevron_right,
-            disabled: true,
-            class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
-        <% end %>
+          <% if @next_page %>
+            <%= render_component :button,
+              size: :lg,
+              icon: :chevron_right,
+              tooltip: "Next page",
+              href: lookbook_page_path(@next_page.lookup_path),
+              class: "pl-0.5 bg-transparent" %>
+          <% else %>
+            <%= render_component :button,
+              size: :lg,
+              icon: :chevron_right,
+              disabled: true,
+              class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
+          <% end %>
+          </div>
         </div>
-      </div>
-    <% end %>
+      <% end %>
 
       <%= yield %>
     </div>