flowbite-components/demo/app/views/docs/components/show.html.erb at 12ce0d1022f198849ebdc025386d0b2e31bd22cc · substancelab/flowbite-components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<article
  class="
    flex flex-wrap md:flex-nowrap gap-8 w-full items-center
    justify-between mx-auto
  "
>
  <nav
    id="default-sidebar"
    class="flex-none h-full transition-transform -translate-x-full sm:translate-x-0"
    aria-label="Sidebar"
  >
    <div
      class="
        h-full -ml-2 pr-6 py-4 overflow-y-auto border-e
        border-default
      "
    >
      <ul class="space-y-2 font-medium">
        <% all_components.each do |component| %>
          <li>
            <%= link_to component.name, docs_component_path(:id => component.path), class: "flex items-center px-2 py-1.5 text-body rounded-base hover:bg-neutral-tertiary hover:text-fg-brand group" %>
          </li>
        <% end %>
      </ul>
    </div>
  </nav>

  <main class="py-4 flex-1 space-y-8">
    <h1 class="mb-4 text-4xl tracking-tight font-bold text-gray-900 dark:text-white"><%= @code_object.path %></h1>

    <% if @code_object.type == :class && @code_object.parent && !@code_object.parent.root? %>
      <section>
        Inherits from
          <%= render(Flowbite::Link.new(href: docs_component_path(@code_object.parent))) do %>
          <code><%= @code_object.parent %></code>
        <% end %>
      </section>
    <% end %>

    <% if @child_classes.any? %>
      <section>
        <h2 class="mb-4 mt-8 text-2xl font-bold">In namespace</h2>
        <ul class="list-disc list-inside space-y-2">
          <% @child_classes.each do |subclass| %>
            <li>
              <%= link_to subclass.name, docs_component_path(:id => subclass.path), class: "text-blue-600 hover:underline" %>
            </li>
          <% end %>
        </ul>
      </section>
    <% end %>

    <section class="format dark:format-invert">
      <%= simple_format(@code_object.docstring) %>
    </section>

    <% if @lookbook_embeds.any? %>
      <section>
        <h2 class="mt-8 text-2xl font-bold">Examples</h2>

        <% @lookbook_embeds.each do |lookbook_tag| %>
          <lookbook-embed panels="source" preview="<%= lookbook_tag.text.strip %>" scenario="*"></lookbook-embed>
        <% end %>
      </section>
    <% end %>

    <% if @viewcomponent_slots.any? %>
      <section>
        <h2 class="mt-8 text-2xl font-bold">Slots</h2>

        <table>
          <% @viewcomponent_slots.each do |slot_tag| %>
            <tr>
              <th class="pt-4 text-left align-top" scope="col"><strong><code><%= slot_tag.name %></code></strong></th>
              <td class="pt-4 align-top ps-4"><%= (slot_tag.types || []).join(", ") %></td>
              <td class="pt-4 align-top ps-4"><%= slot_tag.text %></td>
            </tr>
          <% end %>
        </table>
      </section>
    <% end %>

    <% if @examples.any? %>
      <section>
        <%- @examples.each do |example| %>
          <h2 class="mt-8 text-2xl font-bold"><%= example.name %></h2>
          <pre><code><%= example.text %></code></pre>
        <% end %>
      </section>
    <% end %>

    <% if @constructor %>
      <section>
        <h2 class="mt-8 text-2xl font-bold">Constructor</h2>

        <code><%= @constructor.signature %></code>

        <% if @constructor_arguments.any? %>
          <h3 class="mt-4 text-xl font-bold">Parameters</h3>
          <table>
            <% @constructor_arguments.each do |param| %>
              <tr>
                <th class="pt-4 text-left align-top" scope="col"><strong><code><%= param.name %></code></strong></th>
                <td class="pt-4 align-top ps-4"><%= (param.types || []).join(", ") %></td>
                <td class="pt-4 align-top ps-4"><%= param.text %></td>
              </tr>
            <% end %>
          </table>
        <% end %>
      </section>
    <% end %>

    <section>
      <h2 class="mt-8 text-2xl font-bold">See also</h2>
      <%= render(Flowbite::Link.new(href: rubydoc_url(@code_object), data: {turbo: false})) do %>
        Ruby API documentation for
        <code><%= @code_object.type %> <%= @code_object.path %></code>
      <% end %>
    </section>
  </main>
</article>