_preview.html.erb in lookbook-1.0.0.beta.0

- old
+ new
@@ -1,52 +1,6 @@
-<div id="preview-window" class="h-full 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.merge(lookbook_timestamp: Time.now)) %>"
-        <% if config.preview_srcdoc %>srcdoc="<%== srcdoc %>"<% end %>
-        frameborder="0"
-        x-data="sizes"
-        x-effect="preview.width = width; preview.height = height;"
-      ></iframe>
-
-      <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>
-      </div>
-
-      <div
-        class="resize-handle border-b border-l cursor-[row-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>
-
-      <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>
-
-  </div>
-</div>
+<%= render_component :viewport,
+  src: lookbook.preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)),
+  alpine_data: "$store.inspector.preview",
+  class: "-inset-px relative",
+  style: "width: calc(100% + 2px); height: calc(100% + 2px)"
+  %>
\ No newline at end of file