<%= render_component :split_layout,
alpine_data: "$store.layout.inspector",
":class": "$store.inspector.drawer.hidden && '!grid-rows-[1fr] !grid-cols-[1fr]'" do |layout| %>
<%= layout.pane class: "flex flex-col h-full overflow-hidden",
x_effect: "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
<%= render_component :toolbar do |toolbar| %>
<% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
<%= render_component :tabs, alpine_data: "$store.inspector.preview" do |tabs| %>
<%= @preview_panels.each do |key, panel| %>
<% tabs.tab ref: key, **panel.extract!(:label, :hotkey, :disabled) %>
<% end %>
<% end %>
<% end %>
<% toolbar.section align: :right, padded: true, class: "flex-none min-w-[140px]", ":class": "{invisible: $store.inspector.preview.activeTab !== 'preview'}" do %>
<%= render_component :dimensions_display,
target: "[data-component=viewport] iframe",
class: "ml-auto opacity-30 hover:opacity-100" %>
<% end %>
<% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
<%= render_component :button_group do |group| %>
<% if Lookbook.pages.any? %>
<% group.button icon: :code,
tooltip: "Copy page embed code",
copy: true do %>
<%= embed <%= @preview.preview_class %>, :<%= @example.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %>
<% end %>
<% end %>
<% group.button icon: :refresh_cw,
tooltip: "Refresh preview",
"@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
<% group.button icon: :external_link,
href: lookbook.preview_path(@example.lookup_path),
tooltip: "Open preview in new window",
target: "_blank" %>
<% group.button icon: "vertical ? 'sidebar' : 'credit-card'",
tooltip: "Show drawer",
"@click": "$store.inspector.drawer.hidden = false",
class: "rotate-180",
x_show: "$store.inspector.drawer.hidden",
cloak: true %>
<% end %>
<% end %>
<% end %>
<%= render_component :tabbed_content, alpine_data: "$store.inspector.preview" do |content| %>
<%= @preview_panels.each do |key, panel| %>
<% content.section ref: key, class: "overflow-hidden" do %>
<%= render panel[:template],
preview: @preview,
example: @example,
rendered_examples: @rendered_examples,
**panel %>
<% end %>
<% end %>
<% end %>
<% end %>
<%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer", x_show: "!$store.inspector.drawer.hidden" do %>
<%= render_component :toolbar do |toolbar| %>
<% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
<%= render_component :tabs, alpine_data: "$store.inspector.drawer" do |tabs| %>
<%= @drawer_panels.each do |key, panel| %>
<% tabs.tab ref: key, **panel.extract!(:label, :hotkey, :disabled) %>
<% end %>
<% end %>
<% end %>
<% toolbar.section align: :right, divide: :left, class: "flex-none relative z-10" do %>
<%= render_component :button_group do |group| %>
<%= @drawer_panels.each do |key, panel| %>
<% group.button icon: :clipboard,
tooltip: "Copy to clipboard",
copy: !!panel[:copy],
disabled: panel[:disabled] || !panel[:copy],
x_show: "$store.inspector.drawer.activeTab === '#{key}'",
cloak: true do %>
<%== panel[:copy] ? panel[:copy] : "" %>
<% end %>
<% end %>
<% group.button icon: :corner_up_right,
tooltip: "Move drawer to right",
"@click": "switchOrientation",
x_show: "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
cloak: true %>
<% group.button icon: :corner_up_right,
x_show: "horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth",
disabled: true,
cloak: true %>
<% group.button icon: :corner_left_down,
tooltip: "Move drawer to bottom",
"@click": "switchOrientation",
x_show: "vertical",
cloak: true %>
<% group.button icon: :x_circle,
tooltip: "Hide drawer",
"@click": "$store.inspector.drawer.hidden = true",
cloak: true %>
<% end %>
<% end %>
<% end %>
<%= render_component :tabbed_content, alpine_data: "$store.inspector.drawer" do |content| %>
<% @drawer_panels.each do |key, panel| %>
<% content.section ref: key do %>
<%= render panel[:template],
preview: @preview,
example: @example,
rendered_examples: @rendered_examples,
**panel %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>