shadcn-ui 0.0.1 → 0.0.3

data/app/controllers/documentation_controller.rb

@@ -0,0 +1,10 @@
+class DocumentationController < ActionController::Base
+  layout "documentation"
+  def index
+  end
+
+  def show
+    binding.pry
+    render "documentation/#{params[:id]}"
+  end
+end

data/app/helpers/application_helper.rb

@@ -1,2 +1,21 @@
 module ApplicationHelper
+  def page_title
+    @page_title = ""
+    if request.path.include?("/docs/components")
+      component_name = params[:component].to_s.titleize
+      @page_title << "#{component_name} - " if component_name.present?
+    end
+    @page_title << "shadcn/ui on Rails"
+    @page_title
+  end
+
+  def sidebar_link(text, path)
+    classes = "group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline"
+    classes << if request.path == path
+      " text-foreground font-bold"
+    else
+      " text-muted-foreground"
+    end
+    link_to text, path, class: classes
+  end
 end

data/app/helpers/components/accordion_helper.rb

@@ -1,5 +1,18 @@
 module Components::AccordionHelper
-  def render_accordion(title:, description:)
+  def accordion_title(&block)
+    content_for :title, capture(&block), flush: true
+  end
+
+  def accordion_description(&block)
+    content_for :description, capture(&block), flush: true
+  end
+
+  def render_accordion(title: nil, description: nil, &block)
+    if title && !description
+      content_for :description, capture(&block), flush: true
+    elsif !title && !description
+      capture(&block)
+    end
     render "components/ui/accordion", title: title, description: description
   end
 end

data/app/helpers/components/alert_helper.rb

@@ -1,11 +1,13 @@
 module Components::AlertHelper
-  def render_alert(title:, description:, variant: :default)
+  def render_alert(title:, description:, variant: :default, icon: true)
     alert_classes = case variant.to_sym
     when :default
       "[&>svg]:text-foreground bg-background text-foreground"
     when :error, :danger, :alert, :destructive
       "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
+    else
+      "border-#{variant}/50 text-#{variant} dark:border-#{variant} [&>svg]:text-#{variant}"
     end
-    render "components/ui/alert", title: title, description: description, alert_classes: alert_classes, variant: variant
+    render "components/ui/alert", title:, description:, alert_classes:, variant:, icon:
   end
 end

data/app/helpers/components/button_helper.rb

@@ -1,5 +1,5 @@
 module Components::ButtonHelper
-  def render_button(label = "", data: "", text: "", variant: :default, as: :button, href: nil, **options)
+  def render_button(label = "", text: nil, variant: :default, as: :button, href: nil, data: {}, **options, &block)
     button_classes = " inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 "
     varianet_classes = case variant.to_sym
     when :default
@@ -15,6 +15,7 @@ module Components::ButtonHelper
     end
     button_classes << " #{varianet_classes} #{options[:class]}"
     text = label if label.present?
+    text = capture(&block) if block
     render "components/ui/button", text:, button_classes:, as:, href:, data:, **options
   end
 end

data/app/helpers/components/card_helper.rb

@@ -1,5 +1,5 @@
 module Components::CardHelper
-  def render_card(footer: nil, title: nil, subtitle: nil, body: nil, **options, &block)
-    render "components/ui/card", title: title, subtitle: subtitle, footer: footer, body: (block ? capture(&block) : body), block:, **options
+  def render_card(title: nil, subtitle: nil, body: nil, footer: nil, **options, &block)
+    render "components/ui/card", title: title, subtitle: subtitle, footer: footer, body: (block ? capture(&block) : body), block:, options: options
   end
 end

data/app/helpers/components/checkbox_helper.rb

@@ -1,5 +1,5 @@
 module Components::CheckboxHelper
-  def render_checkbox(label:, name:)
-    render "components/ui/checkbox", name: name, label: label
+  def render_checkbox(label:, name:, **options)
+    render "components/ui/checkbox", name: name, label: label, options: options
   end
 end

data/app/helpers/components/collapsible_helper.rb

@@ -1,4 +1,12 @@
 module Components::CollapsibleHelper
+  def collapsible_preview(&block)
+    content_for :preview, capture(&block) if block
+  end
+
+  def collapsible_body(&block)
+    content_for :body, capture(&block) if block
+  end
+
   def render_collapsible(**options, &block)
     content = capture(&block) if block
     render "components/ui/collapsible", content: content, **options

data/app/helpers/components/filter_helper.rb

@@ -0,0 +1,12 @@
+module Components::FilterHelper
+  def filter_icon(&block)
+    content_for :filter_icon, capture(&block), flush: true
+  end
+
+  def render_filter(items, **options, &block)
+    content_for :filter_icon, "", flush: true
+    content = capture(&block) if block
+    input_class = content_for?(:filter_icon) ? "pl-1" : ""
+    render "components/ui/filter", items: items, options: options, input_class: input_class, content: content
+  end
+end

data/app/helpers/components/input_helper.rb

@@ -0,0 +1,21 @@
+module Components::InputHelper
+  def render_input(name:, label: false, id: nil, type: :text, value: nil, **options)
+    options[:class] = "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 #{options[:class]} "
+    options[:class] << case options[:style]
+    when :borderless
+      " border-0 focus-visible:outline-none focus-visible:shadow-none focus-visible:ring-transparent"
+    else
+      " focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:border-muted"
+    end
+    options.reverse_merge!(required: false, disabled: false,
+      readonly: false, label: false, placeholder: "Type here...")
+    render partial: "components/ui/input", locals: {
+      type:,
+      label:,
+      name:,
+      value:,
+      id:,
+      options: options
+    }
+  end
+end

data/app/helpers/components/label_helper.rb

@@ -0,0 +1,5 @@
+module Components::LabelHelper
+  def render_label(name:, label:, **options)
+    render "components/ui/label", name: name, label: label, options: options
+  end
+end

data/app/helpers/components/list_helper.rb

@@ -0,0 +1,15 @@
+module Components::ListHelper
+  def list_item(value:, name:, selected: false, as: :div)
+    content_tag as, value,
+      class: "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm
+         outline-none aria-selected:bg-accent aria-selected:text-accent-foreground hover:bg-accent hover:text-accent-foreground
+         data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      role: "option",
+      data: {value:, selected:},
+      aria: {selected:}
+  end
+
+  def render_list(items, as: :div, **options)
+    render "components/ui/list", items:, as:, **options
+  end
+end

data/app/helpers/components/progress_helper.rb

@@ -0,0 +1,5 @@
+module Components::ProgressHelper
+  def render_progress(value:, **options)
+    render "components/ui/progress", value: (100 - value), **options
+  end
+end

data/app/helpers/components/sheet_helper.rb

@@ -0,0 +1,29 @@
+module Components::SheetHelper
+  def render_sheet(**options, &block)
+    options[:direction] ||= "left"
+    options[:width] ||= "w-3/4"
+
+    content_for :sheet_trigger, "", flush: true
+    content_for :sheet_content, "", flush: true
+
+    content = capture(&block) if block
+    render "components/ui/sheet", content: content, options: options
+  end
+
+  def sheet_trigger(&block)
+    content_for :sheet_trigger, capture(&block), flush: true
+  end
+
+  def sheet_content(&block)
+    content_for :sheet_content, capture(&block), flush: true
+  end
+
+  def direction_class(direction)
+    mappings = {
+      "left": 'left-0',
+      "right": 'right-0'
+    }
+
+    mappings[direction.to_sym]
+  end
+end

data/app/helpers/components/skeleton_helper.rb

@@ -0,0 +1,5 @@
+module Components::SkeletonHelper
+  def render_skeleton
+    render "components/ui/skeleton"
+  end
+end

data/app/helpers/components/slider_helper.rb

@@ -0,0 +1,5 @@
+module Components::SliderHelper
+  def render_slider(value:, id:, name:, **options)
+    render "components/ui/slider", value:, id:, name:, **options
+  end
+end

data/app/helpers/components_helper.rb

@@ -4,4 +4,15 @@ module ComponentsHelper
   OUTLINE_CLASSES = "  border border-input bg-background hover:bg-accent hover:text-accent-foreground "
   GHOST_CLASSES = " hover:bg-accent hover:text-accent-foreground  "
   DESTRUCTIVE_CLASSES = " bg-destructive text-destructive-foreground hover:bg-destructive/90 "
+
+  module Button
+    PRIMARY = " bg-primary text-primary-foreground hover:bg-primary/80 "
+    SECONDARY = " bg-secondary text-secondary-foreground hover:bg-secondary/80 "
+    OUTLINE = "  border border-input bg-background hover:bg-accent hover:text-accent-foreground "
+    GHOST = " hover:bg-accent hover:text-accent-foreground  "
+    DESTRUCTIVE = " bg-destructive text-destructive-foreground hover:bg-destructive/90 "
+  end
+
+  module Alert
+  end
 end

data/app/helpers/documentation_helper.rb

@@ -0,0 +1,2 @@
+module DocumentationHelper
+end

data/app/helpers/examples_helper.rb

@@ -24,9 +24,8 @@ module ExamplesHelper
   end
 
   def code_sample(content = "", language:, &block)
-    content_tag :pre, class: "code-sample px-4 my-2 pb-5", data: {controller: "highlight"} do
+    content_tag :pre, class: "code-sample px-4 my-2 pb-5 min-h-fit", data: {controller: "highlight"} do
       content_tag :code, class: "language-#{language}" do
-        content
         yield if block
       end
     end

data/app/javascript/controllers/theme_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["toggleButton"];
+
+  connect() {
+    this.loadThemePreference();
+  }
+
+  toggle() {
+    const isDarkMode = document.documentElement.classList.toggle("dark");
+    this.saveThemePreference(isDarkMode);
+  }
+
+  loadThemePreference() {
+    const isDarkMode = localStorage.getItem("themePreference") === "true";
+    if (isDarkMode) {
+      document.documentElement.classList.add("dark");
+    }
+  }
+
+  saveThemePreference(isDarkMode) {
+    localStorage.setItem("themePreference", isDarkMode);
+  }
+}

data/app/javascript/controllers/ui/dialog_controller.js

@@ -2,7 +2,7 @@
 import { Controller } from "@hotwired/stimulus";
 import "@kanety/stimulus-static-actions";
 
-export default class extends Controller {
+export default class UIDialog extends Controller {
   static targets = ["dialog", "modal", "focus", "drag", "backdrop", "closeButton"];
   static actions = [
     ["element", "keydown@window->closeByKey"],
@@ -64,6 +64,8 @@ export default class extends Controller {
     this.dispatch("closed", { detail: { target: target } });
   }
 
+  // Refactor Me
+  // This needs to be combined with the toggle method in sheet_controller
   toggleClass(visible) {
     if (visible) {
       this.dialogTarget.classList.remove("hidden");

data/app/javascript/controllers/ui/dropdown_controller.js

@@ -1,25 +1,5 @@
 // Inspired By: https://github.com/stimulus-components/stimulus-dropdown/blob/master/src/index.ts
-import { Controller } from "@hotwired/stimulus";
+import UIPopover from "controllers/ui/popover_controller";
 import { useTransition } from "stimulus-use";
 
-export default class extends Controller {
-  //   menuTarget: HTMLElement
-  //   toggleTransition: (event?: Event) => void
-  //   leave: (event?: Event) => void
-  //   transitioned: false
-  //   static targets = ['menu']
-  //   connect (): void {
-  //     useTransition(this, {
-  //       element: this.menuTarget
-  //     })
-  //   }
-  //   toggle (): void {
-  //     this.toggleTransition()
-  //   }
-  //   hide (event: Event): void {
-  //     // @ts-ignore
-  //     if (!this.element.contains(event.target) && !this.menuTarget.classList.contains('hidden')) {
-  //       this.leave()
-  //     }
-  //   }
-}
+export default class extends UIPopover {}

data/app/javascript/controllers/ui/filter_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class UIFilter extends Controller {
+  static targets = ["source", "item"];
+
+  connect() {}
+
+  filter(event) {
+    let lowerCaseFilterTerm = this.sourceTarget.value.toLowerCase();
+    let regex = new RegExp("^" + lowerCaseFilterTerm);
+    if (this.hasItemTarget) {
+      this.itemTargets.forEach((el, i) => {
+        let filterableKey = el.innerText.toLowerCase();
+
+        // Check for consecutive characters match using regex
+        el.classList.toggle("hidden", !regex.test(filterableKey));
+      });
+    }
+  }
+}

data/app/javascript/controllers/ui/popover_controller.js

@@ -3,7 +3,7 @@
 import { Controller } from "@hotwired/stimulus";
 import { createPopper } from "@popperjs/core";
 
-export default class extends Controller {
+export default class UIPopover extends Controller {
   static values = {
     dismissAfter: Number,
   };
@@ -24,4 +24,32 @@ export default class extends Controller {
       ],
     });
   }
+
+  // Show the popover
+  show() {
+    this.contentTarget.classList.remove("hidden");
+    this.contentTarget.dataset.state = "open";
+  }
+
+  // Hide the popover
+  hide() {
+    this.contentTarget.classList.add("hidden");
+    this.contentTarget.dataset.state = "closed";
+  }
+
+  // Toggle the popover on demand
+  toggle(event) {
+    this.popperInstance.update();
+    if (this.contentTarget.classList.contains("hidden")) {
+      this.show();
+
+      if (this.hasDismissAfterValue) {
+        setTimeout(() => {
+          this.hide();
+        }, this.dismissAfterValue);
+      }
+    } else {
+      this.hide();
+    }
+  }
 }

data/app/javascript/controllers/ui/sheet_controller.js

@@ -0,0 +1,33 @@
+import UIDialog from "controllers/ui/dialog_controller";
+import "@kanety/stimulus-static-actions";
+
+export default class extends UIDialog {
+  // Handles a button triggering the sheet in a different
+  // controller instance
+  // REFACTOR: This is the toggle method in dialog_controller with dom elements
+  // instead of targets. Update the method there to receive dom elements and this
+  // can be refactored to use those methods instead of reimplementing.
+  toggleOutlet() {
+    const sheetTarget = document.querySelector(this.element.dataset.UiSheetOutlet);
+    const dialogTarget = sheetTarget.querySelector("[data-ui--sheet-target='dialog']");
+    const modalTarget = sheetTarget.querySelector("[data-ui--sheet-target='modal']");
+    const contentTarget = sheetTarget.querySelector("[data-ui--sheet-target='content']");
+    const visible = dialogTarget.dataset.state == "closed" ? false : true;
+    const mainTarget = document.body;
+    if (!visible) {
+      document.body.classList.add("overflow-hidden");
+      contentTarget.classList.add("overflow-y-scroll", "h-full");
+      dialogTarget.classList.remove("hidden");
+      dialogTarget.dataset.state = "open";
+      modalTarget.classList.remove("hidden");
+      modalTarget.dataset.state = "open";
+    } else {
+      document.body.classList.remove("overflow-hidden");
+      contentTarget.classList.remove("overflow-y-scroll", "h-full");
+      dialogTarget.classList.add("hidden");
+      dialogTarget.dataset.state = "closed";
+      modalTarget.classList.add("hidden");
+      modalTarget.dataset.state = "closed";
+    }
+  }
+}

data/app/javascript/controllers/ui/slider_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class UISliderController extends Controller {
+  updateRange() {
+    const input = this.element;
+    const min = input.min;
+    const max = input.max;
+    const val = input.value;
+
+    const fillRatio = parseInt(((val - min) * 100) / (max - min));
+    input.style = `background-size: ${fillRatio}% 100%`;
+    input.setAttribute("value", fillRatio);
+  }
+}

data/app/javascript/controllers/ui/tooltip_controller.js

@@ -1,3 +1,3 @@
-import UIHoverCardController from "./hover-card_controller";
+import UIHoverCardController from "controllers/ui/hover-card_controller";
 
 export default class UITooltipController extends UIHoverCardController {}

data/app/views/application/index.html.erb

@@ -0,0 +1,122 @@
+<div class="flex-1">
+  <div class="container relative">
+    <section class="flex max-w-[980px] flex-col items-start gap-2 pt-8 md:pt-12 pb-8">
+      <a
+        class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
+        href="/docs">🎉
+        <div
+          data-orientation="vertical"
+          role="none"
+          class="shrink-0 bg-border w-[1px] mx-2 h-4">
+        </div>
+        <span class="sm:hidden">Style, a new CLI and more.</span>
+        <span class="hidden sm:inline">Introducing shadcn/ui on Rails!</span>
+        <svg
+          width="15"
+          height="15"
+          viewBox="0 0 15 15"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          class="ml-1 h-4 w-4">
+          <path
+            d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
+            fill="currentColor"
+            fill-rule="evenodd"
+            clip-rule="evenodd"></path>
+        </svg>
+      </a>
+      <h1 class="text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]">
+        Build your component library.
+      </h1>
+      <span
+        class="max-w-[750px] text-lg text-muted-foreground sm:text-xl"
+        data-br=":R1ir9hja:"
+        data-brr="1"
+        style="
+          display: inline-block;
+          vertical-align: top;
+          text-decoration: inherit;
+          max-width: 586px;">
+        Beautifully designed components based on <a href="https://ui.shadcn.com">shadcn/ui</a> that
+        you can copy and paste into your apps. Accessible. Customizable. Open Source.
+      </span>
+
+      <div class="flex w-full items-center space-x-4 pb-8 pt-4 md:pb-10">
+        <a
+          class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2"
+          href="/docs">Get Started
+        </a>
+        <a
+          target="_blank"
+          rel="noreferrer"
+          class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2"
+          href="https://github.com/aviflombaum/shadcn-rails">
+          <svg
+            viewBox="0 0 438.549 438.549"
+            class="mr-2 h-4 w-4">
+            <path
+              fill="currentColor"
+              d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z">
+            </path>
+          </svg>GitHub
+        </a>
+      </div>
+    </section>
+    <section class="pt-8 md:pt-12 pb-8">
+      <div className="overflow-hidden rounded-[0.5rem] border border-1 bg-background shadow">
+        <div class="flex-1 space-y-4 p-8 pt-6 rounded-[0.5rem] border border-1 bg-background shadow">
+          <div class="flex items-center justify-between space-y-2">
+            <h2 class="text-3xl font-bold tracking-tight">Dashboard</h2>
+            <div class="flex items-center space-x-2">
+              <div class="grid gap-2"><button class="inline-flex items-center rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 w-[260px] justify-start text-left font-normal" id="date" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:r7:" data-state="closed"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 h-4 w-4"><path d="M4.5 1C4.77614 1 5 1.22386 5 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H4V1.5C4 1.22386 4.22386 1 4.5 1ZM10 3V3.5C10 3.77614 10.2239 4 10.5 4C10.7761 4 11 3.77614 11 3.5V3H12.5C12.7761 3 13 3.22386 13 3.5V5H2V3.5C2 3.22386 2.22386 3 2.5 3H4V3.5C4 3.77614 4.22386 4 4.5 4C4.77614 4 5 3.77614 5 3.5V3H10ZM2 6V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6H2ZM7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5ZM9.5 7C9.22386 7 9 7.22386 9 7.5C9 7.77614 9.22386 8 9.5 8C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7ZM11 7.5C11 7.22386 11.2239 7 11.5 7C11.7761 7 12 7.22386 12 7.5C12 7.77614 11.7761 8 11.5 8C11.2239 8 11 7.77614 11 7.5ZM11.5 9C11.2239 9 11 9.22386 11 9.5C11 9.77614 11.2239 10 11.5 10C11.7761 10 12 9.77614 12 9.5C12 9.22386 11.7761 9 11.5 9ZM9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5C8 9.22386 7.77614 9 7.5 9ZM5 9.5C5 9.22386 5.22386 9 5.5 9C5.77614 9 6 9.22386 6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10C3.77614 10 4 9.77614 4 9.5C4 9.22386 3.77614 9 3.5 9ZM3 11.5C3 11.2239 3.22386 11 3.5 11C3.77614 11 4 11.2239 4 11.5C4 11.7761 3.77614 12 3.5 12C3.22386 12 3 11.7761 3 11.5ZM5.5 11C5.22386 11 5 11.2239 5 11.5C5 11.7761 5.22386 12 5.5 12C5.77614 12 6 11.7761 6 11.5C6 11.2239 5.77614 11 5.5 11ZM7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5ZM9.5 11C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>Jan 20, 2023 - Feb 09, 2023</button></div>
+              <button class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2">Download</button></div>
+          </div>
+          <div dir="ltr" data-orientation="horizontal" class="space-y-4">
+            <div role="tablist" aria-orientation="horizontal" class="inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground" tabindex="0" data-orientation="horizontal" style="outline: none;"><button type="button" role="tab" aria-selected="true" aria-controls="radix-:r8:-content-overview" data-state="active" id="radix-:r8:-trigger-overview" class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Overview</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-:r8:-content-analytics" data-state="inactive" data-disabled="" disabled="" id="radix-:r8:-trigger-analytics" class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Analytics</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-:r8:-content-reports" data-state="inactive" data-disabled="" disabled="" id="radix-:r8:-trigger-reports" class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Reports</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-:r8:-content-notifications" data-state="inactive" data-disabled="" disabled="" id="radix-:r8:-trigger-notifications" class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Notifications</button></div>
+            <div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-:r8:-trigger-overview" id="radix-:r8:-content-overview" tabindex="0" class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 space-y-4" style="">
+              <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+                <div class="rounded-xl border bg-card text-card-foreground shadow">
+                  <div class="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
+                    <h3 class="tracking-tight text-sm font-medium">Total Revenue</h3>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg></div>
+                  <div class="p-6 pt-0">
+                    <div class="text-2xl font-bold">$45,231.89</div>
+                    <p class="text-xs text-muted-foreground">+20.1% from last month</p>
+                  </div>
+                </div>
+                <div class="rounded-xl border bg-card text-card-foreground shadow">
+                  <div class="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
+                    <h3 class="tracking-tight text-sm font-medium">Subscriptions</h3>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"></path></svg></div>
+                  <div class="p-6 pt-0">
+                    <div class="text-2xl font-bold">+2350</div>
+                    <p class="text-xs text-muted-foreground">+180.1% from last month</p>
+                  </div>
+                </div>
+                <div class="rounded-xl border bg-card text-card-foreground shadow">
+                  <div class="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
+                    <h3 class="tracking-tight text-sm font-medium">Sales</h3>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground"><rect width="20" height="14" x="2" y="5" rx="2"></rect><path d="M2 10h20"></path></svg></div>
+                  <div class="p-6 pt-0">
+                    <div class="text-2xl font-bold">+12,234</div>
+                    <p class="text-xs text-muted-foreground">+19% from last month</p>
+                  </div>
+                </div>
+                <div class="rounded-xl border bg-card text-card-foreground shadow">
+                  <div class="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
+                    <h3 class="tracking-tight text-sm font-medium">Active Now</h3>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg></div>
+                  <div class="p-6 pt-0">
+                    <div class="text-2xl font-bold">+573</div>
+                    <p class="text-xs text-muted-foreground">+201 since last hour</p>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</div>

data/app/views/components/ui/_accordion.html.erb

@@ -14,7 +14,7 @@
         aria-expanded="true"
         data-orientation="vertical"
         class="flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180">
-        <%= title %><svg
+        <%= title || content_for(:title) %><svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
@@ -34,7 +34,7 @@
       role="region"
       data-orientation="vertical"
       class="st-accordion__content overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
-      <div class="pb-4 pt-0"><%= description %></div>
+      <div class="pb-4 pt-0"><%= description || content_for(:description) %></div>
     </div>
   </div>
 </div>