Packages

pyraui

0.1.0
0.1.2 0.1.1 0.1.0

PyraUI is a Phoenix LiveView component library delivering production-ready, premium UI building blocks.

HexDocs

Current section

Files

Jump to
Readme
3 Versions
11 Dependencies
Dependants
Files
Activity
pyraui lib pyraui_web live docs wizard_docs.ex
Raw

lib/pyraui_web/live/docs/wizard_docs.ex 

defmodule PyrauiWeb.DocsLive.WizardDocs do

  use PyrauiWeb, :html



  def render(assigns) do

    ~H"""

    <div class="rounded-none border-0 bg-white px-6 py-10 text-slate-900">

      <div class="space-y-12">

        <header class="space-y-4">

          <h1 class="text-4xl font-bold">Wizard</h1>

          <p class="text-lg text-slate-600">Multi-step flows with progress, tone colors, and compact spacing options.</p>

        </header>



        <section class="rounded-2xl border border-slate-200 bg-white p-8 shadow-[0_20px_60px_-50px_rgba(15,23,42,0.35)] space-y-6">

          <h2 class="text-2xl font-semibold">Basic Wizard</h2>

          <div class="bg-white p-6 rounded-xl border border-slate-200">

            <Pyraui.Components.Wizard.wizard id="docs-wizard-basic" tone={:blue}>

              <:step id="step1" title="Personal Info" active={true}>

                <div class="p-6 bg-slate-50 rounded-lg">

                  <h3 class="text-lg font-semibold mb-2">Step 1: Personal Information</h3>

                  <p class="text-slate-600">Enter your personal details here.</p>

                </div>

              </:step>

              <:step id="step2" title="Account Details">

                <div class="p-6 bg-slate-50 rounded-lg">

                  <h3 class="text-lg font-semibold mb-2">Step 2: Account Details</h3>

                  <p class="text-slate-600">Set up your account information.</p>

                </div>

              </:step>

              <:step id="step3" title="Review">

                <div class="p-6 bg-slate-50 rounded-lg">

                  <h3 class="text-lg font-semibold mb-2">Step 3: Review</h3>

                  <p class="text-slate-600">Review and confirm your information.</p>

                </div>

              </:step>

            </Pyraui.Components.Wizard.wizard>

          </div>

          <div class="bg-slate-50 p-4 rounded-lg overflow-x-auto border border-slate-200">

            <pre class="text-slate-800 text-sm"><code phx-no-curly-interpolation>

              &lt;.wizard id="signup-wizard" tone={:blue}&gt;

                &lt;:step id="step1" title="Personal Info" active={true}&gt;

                  &lt;p&gt;Step 1 content&lt;/p&gt;

                &lt;/:step&gt;

                &lt;:step id="step2" title="Account Details"&gt;

                  &lt;p&gt;Step 2 content&lt;/p&gt;

                &lt;/:step&gt;

                &lt;:step id="step3" title="Review"&gt;

                  &lt;p&gt;Step 3 content&lt;/p&gt;

                &lt;/:step&gt;

              &lt;/.wizard&gt;

            </code></pre>

          </div>

        </section>



        <section class="rounded-2xl border border-slate-200 bg-white p-8 shadow-[0_20px_60px_-50px_rgba(15,23,42,0.35)] space-y-6">

          <h2 class="text-2xl font-semibold">Tones</h2>

          <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">

            <div class="rounded-xl border border-slate-200 p-6">

              <h3 class="font-semibold mb-4">Indigo</h3>

              <Pyraui.Components.Wizard.wizard id="docs-wizard-indigo" tone={:indigo} compact={true}>

                <:step id="s1" title="Info" active={true}><div class="h-24 bg-slate-50 rounded"></div></:step>

                <:step id="s2" title="Details"><div class="h-24 bg-slate-50 rounded"></div></:step>

                <:step id="s3" title="Review"><div class="h-24 bg-slate-50 rounded"></div></:step>

              </Pyraui.Components.Wizard.wizard>

            </div>

            <div class="rounded-xl border border-slate-200 p-6">

              <h3 class="font-semibold mb-4">Violet</h3>

              <Pyraui.Components.Wizard.wizard id="docs-wizard-violet" tone={:violet} compact={true}>

                <:step id="s1" title="Info" active={true}><div class="h-24 bg-slate-50 rounded"></div></:step>

                <:step id="s2" title="Details"><div class="h-24 bg-slate-50 rounded"></div></:step>

                <:step id="s3" title="Review"><div class="h-24 bg-slate-50 rounded"></div></:step>

              </Pyraui.Components.Wizard.wizard>

            </div>

            <div class="rounded-xl border border-slate-200 p-6">

              <h3 class="font-semibold mb-4">Emerald</h3>

              <Pyraui.Components.Wizard.wizard id="docs-wizard-emerald" tone={:emerald} compact={true}>

                <:step id="s1" title="Info" active={true}><div class="h-24 bg-slate-50 rounded"></div></:step>

                <:step id="s2" title="Details"><div class="h-24 bg-slate-50 rounded"></div></:step>

                <:step id="s3" title="Review"><div class="h-24 bg-slate-50 rounded"></div></:step>

              </Pyraui.Components.Wizard.wizard>

            </div>

            <div class="rounded-xl border border-slate-200 p-6">

              <h3 class="font-semibold mb-4">Teal</h3>

              <Pyraui.Components.Wizard.wizard id="docs-wizard-teal" tone={:teal} compact={true}>

                <:step id="s1" title="Info" active={true}><div class="h-24 bg-slate-50 rounded"></div></:step>

                <:step id="s2" title="Details"><div class="h-24 bg-slate-50 rounded"></div></:step>

                <:step id="s3" title="Review"><div class="h-24 bg-slate-50 rounded"></div></:step>

              </Pyraui.Components.Wizard.wizard>

            </div>

            <div class="rounded-xl border border-slate-200 p-6">

              <h3 class="font-semibold mb-4">Rose</h3>

              <Pyraui.Components.Wizard.wizard id="docs-wizard-rose" tone={:rose} compact={true}>

                <:step id="s1" title="Info" active={true}><div class="h-24 bg-slate-50 rounded"></div></:step>

                <:step id="s2" title="Details"><div class="h-24 bg-slate-50 rounded"></div></:step>

                <:step id="s3" title="Review"><div class="h-24 bg-slate-50 rounded"></div></:step>

              </Pyraui.Components.Wizard.wizard>

            </div>

            <div class="rounded-xl border border-slate-200 p-6">

              <h3 class="font-semibold mb-4">Orange</h3>

              <Pyraui.Components.Wizard.wizard id="docs-wizard-orange" tone={:orange} compact={true}>

                <:step id="s1" title="Info" active={true}><div class="h-24 bg-slate-50 rounded"></div></:step>

                <:step id="s2" title="Details"><div class="h-24 bg-slate-50 rounded"></div></:step>

                <:step id="s3" title="Review"><div class="h-24 bg-slate-50 rounded"></div></:step>

              </Pyraui.Components.Wizard.wizard>

            </div>

          </div>

          <div class="bg-slate-50 p-4 rounded-lg overflow-x-auto border border-slate-200">

            <pre class="text-slate-800 text-sm"><code phx-no-curly-interpolation>

              &lt;.wizard id="flow" tone={:indigo} compact={true}&gt;

                &lt;:step id="s1" title="Info" active={true}&gt;&lt;div class="h-24"&gt;&lt;/div&gt;&lt;/:step&gt;

                &lt;:step id="s2" title="Details"&gt;&lt;div class="h-24"&gt;&lt;/div&gt;&lt;/:step&gt;

                &lt;:step id="s3" title="Review"&gt;&lt;div class="h-24"&gt;&lt;/div&gt;&lt;/:step&gt;

              &lt;/.wizard&gt;

            </code></pre>

          </div>

        </section>



        <section class="rounded-2xl border border-slate-200 bg-white p-8 shadow-[0_20px_60px_-50px_rgba(15,23,42,0.35)] space-y-6">

          <h2 class="text-2xl font-semibold">Options</h2>

          <div class="bg-white p-6 rounded-xl border border-slate-200 space-y-4">

            <div class="flex items-center justify-between">

              <span class="font-medium">Compact spacing</span>

              <span class="text-slate-500">compact={true}</span>

            </div>

            <Pyraui.Components.Wizard.wizard id="docs-wizard-compact" tone={:slate} compact={true}>

              <:step id="a" title="Start" active={true}><div class="h-24 bg-slate-50 rounded"></div></:step>

              <:step id="b" title="Middle"><div class="h-24 bg-slate-50 rounded"></div></:step>

              <:step id="c" title="End"><div class="h-24 bg-slate-50 rounded"></div></:step>

            </Pyraui.Components.Wizard.wizard>

            <div class="flex items-center justify-between pt-4">

              <span class="font-medium">Hide progress</span>

              <span class="text-slate-500">show_progress={false}</span>

            </div>

            <Pyraui.Components.Wizard.wizard id="docs-wizard-noprogress" tone={:violet} show_progress={false}>

              <:step id="one" title="One" active={true}><div class="h-24 bg-slate-50 rounded"></div></:step>

              <:step id="two" title="Two"><div class="h-24 bg-slate-50 rounded"></div></:step>

            </Pyraui.Components.Wizard.wizard>

          </div>

          <div class="bg-slate-50 p-4 rounded-lg overflow-x-auto border border-slate-200">

            <pre class="text-slate-800 text-sm"><code phx-no-curly-interpolation>

              &lt;.wizard id="flow" tone={:slate} compact={true}&gt;...&lt;/.wizard&gt;

              &lt;.wizard id="flow2" tone={:violet} show_progress={false}&gt;...&lt;/.wizard&gt;

            </code></pre>

          </div>

        </section>



        <section class="rounded-2xl border border-slate-200 bg-white p-8 shadow-[0_20px_60px_-50px_rgba(15,23,42,0.35)] space-y-6">

          <h2 class="text-2xl font-semibold">Props</h2>

          <div class="overflow-x-auto">

            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">

              <thead class="bg-gray-50">

                <tr>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">Prop</th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">Type</th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">Default</th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">Description</th>

                </tr>

              </thead>

              <tbody class="bg-white divide-y divide-gray-200">

                <tr>

                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">id</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Unique ID for the wizard</td>

                </tr>

                <tr>

                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">tone</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:blue | :indigo | :violet | :emerald | :teal | :rose | :orange | :slate</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:blue</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Color tone used for active/completed/progress and primary button</td>

                </tr>

                <tr>

                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">compact</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">false</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Use compact spacing</td>

                </tr>

                <tr>

                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">show_progress</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">true</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Show the top progress indicator</td>

                </tr>

                <tr>

                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">step.id</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Unique ID for each step</td>

                </tr>

                <tr>

                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">step.title</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Step title</td>

                </tr>

                <tr>

                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">step.active</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">false</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Whether the step is currently active</td>

                </tr>

                <tr>

                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">step.completed</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">false</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Whether the step is completed</td>

                </tr>

              </tbody>

            </table>

          </div>

        </section>

      </div>

    </div>

    """

  end

end