Htmx/templates/components/buttons.html

{% extends "base.html" %}
{% import "components/macros.html" as ui %}

{% block title %}Buttons - Design System Wiki{% endblock %}

{% block content %}
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
    
    <!-- Left Navigation Sidebar -->
    {% include "components/sidebar.html" %}

    <!-- Main Content -->
    <div class="flex-1 space-y-8">
        
        <!-- Header -->
        <div class="pb-6 border-b border-border">
            <span class="text-xs font-semibold text-indigo-400">Actions / Navigation</span>
            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Buttons</h1>
            <p class="text-muted-foreground text-sm mt-2 leading-relaxed">
                Standard button variants including primary, secondary, outlines, and statuses, completed with focus ring outlines, scale transformations on hover, and loading spinner designs.
            </p>
        </div>

        <!-- Section Buttons -->
        <section class="space-y-4">
            <h2 class="text-lg font-bold text-slate-200">Button Variants & Interactive Demos</h2>
            
            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
                <!-- Tab Headers -->
                <div class="flex border-b border-border/60 pb-1.5">
                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'btn-sandbox')">Interactive Demo</button>
                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'btn-code')">HTML Markup</button>
                </div>
                
                <!-- Demo Viewport -->
                <div id="btn-sandbox" class="wiki-pane flex flex-wrap gap-4 py-2">
                    {{ ui::button(label="Primary", variant="primary") }}
                    {{ ui::button(label="Secondary", variant="secondary") }}
                    {{ ui::button(label="Outline", variant="outline") }}
                    {{ ui::button(label="Destructive", variant="destructive") }}

                    <!-- Icon Button using safe SVG markup inside label -->
                    {{ ui::button(label="<svg class='w-4 h-4' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M12 4v16m8-8H4'/></svg> Create Task", variant="indigo", extra_class="gap-2") }}

                    <!-- Loading / Disabled state -->
                    {{ ui::button(label="<svg class='animate-spin h-3.5 w-3.5 text-slate-500' fill='none' viewBox='0 0 24 24'><circle class='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4'></circle><path class='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'></path></svg> Processing...", variant="secondary", disabled=true, extra_class="gap-2 text-slate-500 cursor-not-allowed") }}
                </div>
                
                <!-- Code Snippet Area -->
                <div id="btn-code" class="wiki-pane hidden space-y-4">
                    <div class="relative group">
                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-muted-foreground/90 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
                            Copy Code
                        </button>
                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}

&lt;!-- Primary Button --&gt;
{{ "{{" }} ui::button(label="Primary", variant="primary") {{ "}}" }}

&lt;!-- Secondary Button --&gt;
{{ "{{" }} ui::button(label="Secondary", variant="secondary") {{ "}}" }}

&lt;!-- Outline Button --&gt;
{{ "{{" }} ui::button(label="Outline", variant="outline") {{ "}}" }}

&lt;!-- Destructive Button --&gt;
{{ "{{" }} ui::button(label="Destructive", variant="destructive") {{ "}}" }}

&lt;!-- Create Button (Icon + Text) --&gt;
{{ "{{" }} ui::button(label="&lt;svg class='w-4 h-4' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'&gt;&lt;path stroke-linecap='round' stroke-linejoin='round' d='M12 4v16m8-8H4'/&gt;&lt;/svg&gt; Create Task", variant="indigo", extra_class="gap-2") {{ "}}" }}

&lt;!-- Spinner Loading Button --&gt;
{{ "{{" }} ui::button(label="&lt;svg class='animate-spin h-3.5 w-3.5 text-slate-500' fill='none' viewBox='0 0 24 24'&gt;&lt;circle class='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4'&gt;&lt;/circle&gt;&lt;path class='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'&gt;&lt;/path&gt;&lt;/svg&gt; Processing...", variant="secondary", disabled=true, extra_class="gap-2 text-slate-500 cursor-not-allowed") {{ "}}" }}</code></pre>
                    </div>
                </div>
            </div>
        </section>

    </div>
</div>

<script>
    function toggleWikiTabs(btn, paneId) {
        const card = btn.closest('.border-border');
        if (!card) return;
        card.querySelectorAll('button').forEach(b => {
            b.classList.remove('border-sky-500', 'text-sky-400');
            b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
        });
        btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
        btn.classList.add('border-sky-500', 'text-sky-400');
        card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
        const target = card.querySelector('#' + paneId);
        if (target) target.classList.remove('hidden');
    }
</script>
{% endblock %}