_preview.html.erb in lookbook-0.5.0

- old
+ new
@@ -1,52 +1,71 @@
-<div id="preview" class="h-auto min-h-0 w-full checked-bg">
-  <div
-    class="mx-auto h-full w-full"
-    :style="`max-width: ${maxWidth}; max-height: ${maxHeight};`"
-    x-data="previewWindow"
-  >
-    <div class="grid bg-white relative grid-cols-[1fr_17px] grid-rows-[1fr_17px] -inset-px" style="width: calc(100% + 2px); height: calc(100% + 2px)">
-
-      <iframe seamless
-        class="h-full w-full border border-gray-300"
-         :class="{ 'pointer-events-none': $store.layout.reflowing }"
-        src="<%= lookbook.preview_path(request.query_parameters) %>"
-        <% if config.preview_srcdoc %>srcdoc="<%== srcdoc %>"<% end %>
-        frameborder="0"
-        x-data="sizes"
-        x-effect="preview.width = width; preview.height = height;"
-      ></iframe>
-
+<div id="preview" class="grid grid-rows-[40px_1fr]">
+  <%= component "header" do %>
+    <div
+      id="preview-tabs-<%= @example.id %>" class="min-w-0 -mb-px">
+      <nav class="flex h-10 space-x-8 flex-grow pr-8">
+      <% panels.each do |key, props| %>
+          <a
+            id="preview-tab-<%= key %>-<%= @example.id %>"
+            href="#preview-panel-<%= key %>"
+            class="whitespace-nowrap pt-2.5 pb-1.5 px-1 border-b-2 cursor-pointer"
+            :class="{
+              'border-indigo-400': isActivePreviewPanel('<%= key %>'),
+              'border-transparent text-gray-500 hover:text-gray-700': !isActivePreviewPanel('<%= key %>'),
+            }"
+            @click.stop.prevent="switchPreviewPanel('<%= key %>')"
+            <% if props[:hotkey] %>data-hotkey="<%= props[:hotkey] %>"<% end %>
+          >
+            <%== props[:label] %>
+          </a>
+        <% end %>
+      </nav>
+    </div>
+    <div class="flex items-stretch h-full ml-auto space-x-3">
       <div
-        class="resize-handle border-r border-t cursor-[col-resize]"
-        @pointerdown="onResizeWidthStart"
-        @dblclick="toggleFullWidth"
-      >
-        <svg class="h-4 w-4 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
-        </svg>
+        class="flex items-center text-xs font-monospace text-gray-700 space-x-1 opacity-50 hover:opacity-100 transition"
+        :class="{'opacity-100': $store.inspector.preview.resizing}"
+        x-show="isActivePreviewPanel('preview')">
+        <span x-text="`${preview.width}px`"></span>
+        <span class="text-gray-500">x</span>
+        <span x-text="`${preview.height}px`"></span>
       </div>
-
-      <div
-        class="resize-handle border-b border-l cursor-[col-resize]"
-        @pointerdown="onResizeHeightStart"
-        @dblclick="toggleFullHeight"
-      >
-        <svg class="h-4 w-4 pointer-events-none rotate-90" fill="currentColor" viewBox="0 0 24 24" >
-          <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
-        </svg>
+      <div class="flex items-center bg-white border-l border-gray-200 space-x-3 text-gray-400 divide-x divide-gray-300 px-3">
+        <div class="flex items-center space-x-3">
+          <button
+            x-tooltip.theme.lookbook="`Refresh preview`"
+            @click.prevent.stop="refresh"
+            data-hotkey="r"
+          >
+            <%= icon "refresh-cw", size: 4, class: "hover:text-indigo-800" %>
+          </button>
+          <a
+            href="<%= preview_path %>"
+            target="_blank"
+            x-tooltip.theme.lookbook="`Open in new window`"
+            data-hotkey="w"
+          >
+            <%= icon "external-link", size: 4, class: "hover:text-indigo-800" %>
+          </a>
+          <button
+            x-tooltip.theme.lookbook="`${drawerHidden ? 'show' : 'hide'} drawer`"
+            @click="toggleDrawer"
+             x-show="drawerHidden"
+            data-hotkey="i"
+          > 
+            <%= icon "${horizontal ? 'credit-card' : 'sidebar'}", size: 4, class: "hover:text-indigo-800 scale-[-1]" %>
+          </button>
+        </div>
+        
       </div>
-
-      <div
-        class="resize-handle border-r border-b cursor-[nwse-resize]"
-        @pointerdown="onResizeStart"
-        @dblclick="toggleFullSize"
-      >
-        <svg class="h-3.5 w-3.5 pointer-events-none rotate-45 relative -top-px -left-px" fill="currentColor" viewBox="0 0 24 24" >
-          <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
-        </svg>
-      </div>
-
     </div>
-
+  <% end %>
+  <div class="bg-white relative flex-grow">
+    <% panels.each do |key, props| %>
+      <div class="h-full w-full absolute inset-0" x-show="isActivePreviewPanel('<%= key %>')" x-cloak>
+        <div id="preview-panel-<%= example.id %>-<%= key %>" class="h-full">
+          <%= render props[:template], key: key, examples: examples, **props %>
+        </div>
+      </div>
+    <% end %>
   </div>
 </div>
\ No newline at end of file