_params.html.erb in lookbook-3.0.0.alpha.0

- old
+ new
@@ -1,15 +1,48 @@
-<% if @params.none? %>
-  <div class="p-4 w-full h-full bg-lookbook-prose-bg" id="params-editor-blank-slate">
-    <%= lookbook_render :prose do %>
-      <em class='opacity-50'>No params configured.</em>
-    <% end %>
-  </div>
-<% else %>
-  <div class="p-4 w-full h-full overflow-x-hidden" id="params-editor-<%= @target.id %>">
-    <%= lookbook_render "params/editor" do |editor| %>
-      <% @params.each do |param| %>
-        <% editor.with_field param: param %>
+<style>
+  .panel {
+    padding: var(--lb-panel-padding);
+  }
+
+  .placeholder {
+    color: var(--lb-color-content-2);
+    font-style: italic;
+  }
+</style>
+
+<div class="panel">
+  <% if target.params? %>
+    <%= lb_table do |table| %>
+      <% table.with_header do |header| %>
+        <% header.with_cell("Name", collapse: true) %>
+        <% header.with_cell("Param", collapse: true) %>
+        <% header.with_cell("Description") %>
+        <% header.with_cell("Editor") %>
       <% end %>
+
+      <% target.params.each do |param| %>
+        <% table.with_row do |row| %>
+          <% row.with_cell(collapse: true) do %>
+            <strong><%= param.label %></strong>
+          <% end %>
+
+          <% row.with_cell(collapse: true) do %>
+            <code><%= param.name %></code>
+          <% end %>
+
+          <% row.with_cell do %>
+            <%= param.description || raw("&mdash;") %>  
+          <% end %>
+
+          <% row.with_cell do %>
+            <%= render Lookbook::UI::ParamEditor.new(param: param, value: request.query_parameters[param.name]) %>
+          <% end %>
+        <% end %>
+      <% end %>
     <% end %>
-  </div>
-<% end %>
+  <% else %>
+    <div class="placeholder">
+      <p>No params configured.</p>
+    </div>
+  <% end %>
+</div>  
+