m9sh 0.2.1 → 0.2.2

data/app/views/docs/components/main.html.erb

@@ -0,0 +1,352 @@
+<%= render Docs::ComponentPageComponent.new(title: "Main") do |page| %>
+  <% page.with_header(
+    name: "Main",
+    description: "A container component that creates a rounded, elevated content area with shadow effects. Perfect for creating modern, card-like layouts within sidebar applications."
+  ) %>
+
+  <% page.with_installation(component_name: "main") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: main_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Basic Main Example -->
+    <% basic_main_html = capture do %>
+      <div class="h-[400px] w-full bg-sidebar flex">
+        <%= render M9sh::MainComponent.new do %>
+          <header class="flex h-14 shrink-0 items-center gap-2 px-4 border-b">
+            <h1 class="text-base font-semibold">Page Title</h1>
+          </header>
+          <div class="flex-1 overflow-auto p-6">
+            <p class="text-sm text-muted-foreground">
+              The Main component creates a rounded, elevated container with shadow effects.
+              It's designed to be used within sidebar layouts to create visual separation
+              between the sidebar and main content.
+            </p>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Basic Main",
+      preview_content: basic_main_html,
+      code: main_usage_code,
+      ai_command: main_usage_code
+    ) %>
+
+    <!-- Main with Content Cards -->
+    <% main_with_cards_html = capture do %>
+      <div class="h-[600px] w-full bg-sidebar flex">
+        <%= render M9sh::MainComponent.new do %>
+          <header class="flex h-14 shrink-0 items-center gap-2 px-4 border-b">
+            <h1 class="text-base font-semibold">Dashboard</h1>
+          </header>
+          <div class="flex-1 overflow-auto p-6">
+            <div class="space-y-6">
+              <div class="rounded-3xl bg-card border border-border/50 p-8 shadow-xl">
+                <h3 class="text-sm font-medium text-muted-foreground mb-3">Total Revenue</h3>
+                <p class="text-4xl font-bold mb-2">$1,250.00</p>
+                <p class="text-sm text-muted-foreground">+20.1% from last month</p>
+              </div>
+
+              <div class="rounded-3xl bg-card border border-border/50 p-8 shadow-xl">
+                <h3 class="text-sm font-medium text-muted-foreground mb-3">Active Users</h3>
+                <p class="text-4xl font-bold mb-2">2,350</p>
+                <p class="text-sm text-muted-foreground">+180.1% from last month</p>
+              </div>
+
+              <div class="rounded-3xl bg-card border border-border/50 p-8 shadow-xl">
+                <h3 class="text-sm font-medium text-muted-foreground mb-3">Conversion Rate</h3>
+                <p class="text-4xl font-bold mb-2">24.5%</p>
+                <p class="text-sm text-muted-foreground">+4.2% from last month</p>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Content Cards",
+      preview_content: main_with_cards_html,
+      code: main_with_cards_code,
+      ai_command: main_with_cards_code
+    ) %>
+
+    <!-- Main with Sidebar Layout -->
+    <% main_with_sidebar_html = capture do %>
+      <div class="h-[600px] w-full">
+        <%= render M9sh::SidebarProviderComponent.new(background: :sidebar) do %>
+          <%= render M9sh::SidebarComponent.new(collapsible: :none, show_border: false, class: "w-64") do |sidebar| %>
+            <% sidebar.with_header do %>
+              <div class="flex items-center gap-2">
+                <div class="h-8 w-8 rounded-md bg-primary text-primary-foreground flex items-center justify-center font-bold">
+                  M
+                </div>
+                <span class="font-semibold">My App</span>
+              </div>
+            <% end %>
+            <% sidebar.with_sidebar_content do %>
+              <div class="px-2 py-2">
+                <div class="space-y-1">
+                  <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg bg-sidebar-accent">
+                    Dashboard
+                  </a>
+                  <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg hover:bg-sidebar-accent transition-colors">
+                    Projects
+                  </a>
+                  <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg hover:bg-sidebar-accent transition-colors">
+                    Settings
+                  </a>
+                </div>
+              </div>
+            <% end %>
+          <% end %>
+          <%= render M9sh::SidebarInsetComponent.new do %>
+            <%= render M9sh::MainComponent.new do %>
+              <header class="flex h-14 shrink-0 items-center gap-2 px-4 border-b">
+                <h1 class="text-base font-semibold">Welcome</h1>
+              </header>
+              <div class="flex-1 overflow-auto p-6">
+                <div class="rounded-3xl bg-card border border-border/50 p-8 shadow-xl">
+                  <h2 class="text-2xl font-bold mb-4">Getting Started</h2>
+                  <p class="text-sm text-muted-foreground">
+                    The Main component works perfectly with the Sidebar component to create
+                    modern application layouts with visual depth and separation.
+                  </p>
+                </div>
+              </div>
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Sidebar Layout",
+      preview_content: main_with_sidebar_html,
+      code: main_with_sidebar_code,
+      ai_command: main_with_sidebar_code
+    ) %>
+
+    <!-- Main with Top Navbar and Sidebar -->
+    <% main_with_navbar_html = capture do %>
+      <div class="h-[700px] w-full flex flex-col bg-sidebar">
+        <!-- Top Navbar -->
+        <header class="h-14 bg-sidebar flex items-center justify-between px-4">
+          <div class="flex items-center gap-4">
+            <div class="h-8 w-8 rounded-lg bg-sidebar-primary text-sidebar-primary-foreground flex items-center justify-center font-bold text-base">
+              A
+            </div>
+            <span class="text-base font-semibold text-sidebar-foreground">Acme Inc.</span>
+          </div>
+          <div class="flex items-center gap-2">
+            <button class="p-2 rounded-lg hover:bg-sidebar-accent transition-colors text-sidebar-foreground">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="11" cy="11" r="8"/>
+                <path d="m21 21-4.35-4.35"/>
+              </svg>
+            </button>
+            <button class="p-2 rounded-lg hover:bg-sidebar-accent transition-colors text-sidebar-foreground">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
+                <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
+              </svg>
+            </button>
+            <button class="flex items-center gap-2 p-2 rounded-lg hover:bg-sidebar-accent transition-colors text-sidebar-foreground">
+              <img src="https://github.com/shadcn.png" alt="User" class="h-7 w-7 rounded-lg object-cover" />
+            </button>
+          </div>
+        </header>
+
+        <!-- Content Area with Sidebar -->
+        <div class="flex-1 flex overflow-hidden">
+          <%= render M9sh::SidebarProviderComponent.new(background: :sidebar) do %>
+            <%= render M9sh::SidebarComponent.new(collapsible: :none, show_border: false, class: "w-64") do |sidebar| %>
+              <% sidebar.with_sidebar_content do %>
+                <div class="px-2 py-2">
+                  <div class="space-y-1">
+                    <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg bg-sidebar-accent transition-colors">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <rect width="7" height="9" x="3" y="3" rx="1"/>
+                        <rect width="7" height="5" x="14" y="3" rx="1"/>
+                        <rect width="7" height="9" x="14" y="12" rx="1"/>
+                        <rect width="7" height="5" x="3" y="16" rx="1"/>
+                      </svg>
+                      <span>Dashboard</span>
+                    </a>
+                    <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg hover:bg-sidebar-accent transition-colors">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z"/>
+                        <path d="m3 9 2.45-4.9A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.8 1.1L21 9"/>
+                        <path d="M12 3v6"/>
+                      </svg>
+                      <span>Projects</span>
+                    </a>
+                    <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg hover:bg-sidebar-accent transition-colors">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
+                        <circle cx="9" cy="7" r="4"/>
+                        <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
+                        <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+                      </svg>
+                      <span>Team</span>
+                    </a>
+                    <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg hover:bg-sidebar-accent transition-colors">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M3 3v18h18"/>
+                        <path d="m19 9-5 5-4-4-3 3"/>
+                      </svg>
+                      <span>Analytics</span>
+                    </a>
+                  </div>
+                </div>
+
+                <div class="px-2 py-2 mt-4">
+                  <h4 class="px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">Resources</h4>
+                  <div class="space-y-1">
+                    <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg hover:bg-sidebar-accent transition-colors">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
+                        <polyline points="14 2 14 8 20 8"/>
+                      </svg>
+                      <span>Documents</span>
+                    </a>
+                    <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg hover:bg-sidebar-accent transition-colors">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
+                        <circle cx="12" cy="12" r="3"/>
+                      </svg>
+                      <span>Settings</span>
+                    </a>
+                  </div>
+                </div>
+              <% end %>
+            <% end %>
+            <%= render M9sh::SidebarInsetComponent.new do %>
+              <%= render M9sh::MainComponent.new do %>
+                <header class="flex h-14 shrink-0 items-center gap-2 px-4 border-b">
+                  <h1 class="text-lg font-semibold">Dashboard Overview</h1>
+                </header>
+                <div class="flex-1 overflow-auto p-6">
+                  <div class="space-y-6">
+                    <!-- Stats Grid -->
+                    <div class="grid gap-4 md:grid-cols-3">
+                      <div class="rounded-2xl bg-card border border-border/50 p-6 shadow-lg">
+                        <h3 class="text-sm font-medium text-muted-foreground mb-2">Total Revenue</h3>
+                        <p class="text-3xl font-bold">$45,231</p>
+                        <p class="text-xs text-muted-foreground mt-2">+20.1% from last month</p>
+                      </div>
+                      <div class="rounded-2xl bg-card border border-border/50 p-6 shadow-lg">
+                        <h3 class="text-sm font-medium text-muted-foreground mb-2">Active Users</h3>
+                        <p class="text-3xl font-bold">2,350</p>
+                        <p class="text-xs text-muted-foreground mt-2">+180.1% from last month</p>
+                      </div>
+                      <div class="rounded-2xl bg-card border border-border/50 p-6 shadow-lg">
+                        <h3 class="text-sm font-medium text-muted-foreground mb-2">Sales</h3>
+                        <p class="text-3xl font-bold">+12,234</p>
+                        <p class="text-xs text-muted-foreground mt-2">+19% from last month</p>
+                      </div>
+                    </div>
+
+                    <!-- Recent Activity -->
+                    <div class="rounded-2xl bg-card border border-border/50 p-6 shadow-lg">
+                      <h3 class="text-lg font-semibold mb-4">Recent Activity</h3>
+                      <div class="space-y-4">
+                        <div class="flex items-start gap-4">
+                          <div class="h-2 w-2 rounded-full bg-primary mt-2"></div>
+                          <div class="flex-1">
+                            <p class="text-sm font-medium">New project created</p>
+                            <p class="text-xs text-muted-foreground">2 minutes ago</p>
+                          </div>
+                        </div>
+                        <div class="flex items-start gap-4">
+                          <div class="h-2 w-2 rounded-full bg-primary mt-2"></div>
+                          <div class="flex-1">
+                            <p class="text-sm font-medium">User invitation sent</p>
+                            <p class="text-xs text-muted-foreground">1 hour ago</p>
+                          </div>
+                        </div>
+                        <div class="flex items-start gap-4">
+                          <div class="h-2 w-2 rounded-full bg-primary mt-2"></div>
+                          <div class="flex-1">
+                            <p class="text-sm font-medium">Report generated</p>
+                            <p class="text-xs text-muted-foreground">3 hours ago</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Top Navbar and Sidebar",
+      preview_content: main_with_navbar_html,
+      code: main_with_navbar_code,
+      ai_command: main_with_navbar_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">Main Component</h3>
+    <p class="text-sm text-muted-foreground mb-4">
+      The Main component is a simple container that wraps your content with styling for rounded corners,
+      shadows, and proper spacing. It accepts all standard HTML attributes.
+    </p>
+
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "class",
+          type: "String",
+          default: "nil",
+          description: "Additional CSS classes to apply to the component"
+        }
+      ]
+    ) %>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Styling Details</h3>
+      <ul class="list-disc list-inside text-sm text-muted-foreground space-y-1">
+        <li><code class="text-xs bg-muted px-1 py-0.5 rounded">rounded-3xl</code> - Very pronounced rounded corners for modern aesthetic</li>
+        <li><code class="text-xs bg-muted px-1 py-0.5 rounded">shadow-2xl</code> - Strong shadow for depth and elevation</li>
+        <li><code class="text-xs bg-muted px-1 py-0.5 rounded">m-4</code> - Margin spacing to separate from adjacent content</li>
+        <li><code class="text-xs bg-muted px-1 py-0.5 rounded">bg-background</code> - Uses theme background color</li>
+        <li><code class="text-xs bg-muted px-1 py-0.5 rounded">border border-border</code> - Subtle border for definition</li>
+        <li><code class="text-xs bg-muted px-1 py-0.5 rounded">overflow-hidden</code> - Clips content within rounded corners</li>
+        <li><code class="text-xs bg-muted px-1 py-0.5 rounded">flex-1 flex flex-col</code> - Flexbox layout for proper content flow</li>
+      </ul>
+    </div>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Usage Notes</h3>
+      <ul class="list-disc list-inside text-sm text-muted-foreground space-y-1">
+        <li>Designed to work seamlessly with the Sidebar component for modern app layouts</li>
+        <li>Best used within a SidebarInsetComponent when building sidebar layouts</li>
+        <li>The parent container should have a contrasting background (like <code class="text-xs bg-muted px-1 py-0.5 rounded">bg-sidebar</code>) for proper depth effect</li>
+        <li>Works well with theme switching - all colors respond to dark/light mode</li>
+        <li>The component automatically handles overflow scrolling for long content</li>
+        <li>Combine with header/footer sections for complete page layouts</li>
+      </ul>
+    </div>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Related Components</h3>
+      <ul class="list-disc list-inside text-sm text-muted-foreground space-y-1">
+        <li><a href="/docs/sidebar" class="text-primary hover:underline">Sidebar</a> - Navigation sidebar component</li>
+        <li><a href="/docs/card" class="text-primary hover:underline">Card</a> - Content card component</li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>