<%= render_component_header title: "Sheet",
      description: "Extends the Dialog component to display content that complements the main content of the screen." %>

<% content_for :preview, flush: true do %>
  <div class="w-full flex justify-center">
    <%= render_sheet direction: "right" do %>
      <%= sheet_trigger do %>
        <%= render_button("Open Sidebar", variant: :outline) %>
      <% end %>
      <%= sheet_content do %>
        <h2 class="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">The King's Plan</h2>
        <p class="leading-7 [&:not(:first-child)]:mt-6">The king thought long and hard, and finally came up with <a href="#" class="font-medium text-primary underline underline-offset-4">a brilliant plan</a>: he would tax the jokes in the kingdom.</p>
        <blockquote class="mt-6 border-l-2 pl-6 italic">"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."</blockquote>
      <% end %>
    <% end %>
  </div>
<% end %>

<%= render_preview %>