Packages

pyraui

0.1.1
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 skeleton_docs.ex
Raw

lib/pyraui_web/live/docs/skeleton_docs.ex 

defmodule PyrauiWeb.DocsLive.SkeletonDocs 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">Skeleton</h1>

          <p class="text-lg text-slate-600">

            Beautiful loading placeholders for content. Use to indicate progress while data fetches.

          </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">Essentials</h2>

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

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

              <h3 class="font-semibold">Text variants</h3>

              <Pyraui.Components.Skeleton.skeleton variant={:text} size={:sm} />

              <Pyraui.Components.Skeleton.skeleton variant={:text} size={:md} />

              <Pyraui.Components.Skeleton.skeleton variant={:text} size={:lg} />

              <Pyraui.Components.Skeleton.skeleton variant={:text} lines={3} />

            </div>

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

              <h3 class="font-semibold">Circle & Rect</h3>

              <div class="flex items-center gap-4">

                <Pyraui.Components.Skeleton.skeleton variant={:circle} size={:sm} />

                <Pyraui.Components.Skeleton.skeleton variant={:circle} size={:md} />

                <Pyraui.Components.Skeleton.skeleton variant={:circle} size={:lg} />

              </div>

              <Pyraui.Components.Skeleton.skeleton variant={:rect} width="200px" height="100px" />

            </div>

          </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">Profile Card Placeholder</h2>

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

            <div class="flex items-start gap-4">

              <Pyraui.Components.Skeleton.skeleton variant={:circle} size={:lg} />

              <div class="flex-1 space-y-3">

                <Pyraui.Components.Skeleton.skeleton variant={:text} size={:lg} width="40%" />

                <Pyraui.Components.Skeleton.skeleton variant={:text} width="70%" />

                <Pyraui.Components.Skeleton.skeleton variant={:text} width="55%" />

              </div>

            </div>

            <div class="mt-6 flex gap-3">

              <Pyraui.Components.Skeleton.skeleton

                variant={:rect}

                width="96px"

                height="36px"

                class="rounded-full"

              />

              <Pyraui.Components.Skeleton.skeleton

                variant={:rect}

                width="96px"

                height="36px"

                class="rounded-full"

              />

            </div>

          </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">List Placeholder</h2>

          <div class="rounded-xl border border-slate-200 bg-white divide-y divide-slate-200">

            <%= for _i <- 1..5 do %>

              <div class="p-5 flex items-center gap-4">

                <Pyraui.Components.Skeleton.skeleton variant={:circle} size={:md} />

                <div class="flex-1 space-y-3">

                  <Pyraui.Components.Skeleton.skeleton variant={:text} width="40%" />

                  <Pyraui.Components.Skeleton.skeleton variant={:text} width="70%" />

                </div>

                <Pyraui.Components.Skeleton.skeleton

                  variant={:rect}

                  width="72px"

                  height="28px"

                  class="rounded-full"

                />

              </div>

            <% end %>

          </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">Table Rows Placeholder</h2>

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

            <div class="grid grid-cols-12 gap-4 mb-4">

              <Pyraui.Components.Skeleton.skeleton variant={:text} width="20%" />

              <Pyraui.Components.Skeleton.skeleton variant={:text} width="15%" />

              <Pyraui.Components.Skeleton.skeleton variant={:text} width="25%" />

              <Pyraui.Components.Skeleton.skeleton variant={:text} width="10%" />

              <Pyraui.Components.Skeleton.skeleton variant={:text} width="15%" />

              <Pyraui.Components.Skeleton.skeleton variant={:text} width="15%" />

            </div>

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

              <%= for _ <- 1..4 do %>

                <div class="grid grid-cols-12 gap-4">

                  <Pyraui.Components.Skeleton.skeleton variant={:text} width="60%" />

                  <Pyraui.Components.Skeleton.skeleton variant={:text} width="50%" />

                  <Pyraui.Components.Skeleton.skeleton variant={:text} width="70%" />

                  <Pyraui.Components.Skeleton.skeleton variant={:text} width="40%" />

                  <Pyraui.Components.Skeleton.skeleton variant={:text} width="55%" />

                  <Pyraui.Components.Skeleton.skeleton variant={:text} width="50%" />

                </div>

              <% end %>

            </div>

          </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">Article Placeholder</h2>

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

            <Pyraui.Components.Skeleton.skeleton variant={:text} size={:lg} width="65%" />

            <Pyraui.Components.Skeleton.skeleton variant={:text} width="90%" />

            <Pyraui.Components.Skeleton.skeleton variant={:text} width="85%" />

            <Pyraui.Components.Skeleton.skeleton variant={:text} width="80%" />

            <div class="grid grid-cols-3 gap-4 pt-2">

              <Pyraui.Components.Skeleton.skeleton variant={:rect} height="140px" />

              <Pyraui.Components.Skeleton.skeleton variant={:rect} height="140px" />

              <Pyraui.Components.Skeleton.skeleton variant={:rect} height="140px" />

            </div>

          </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">

                    variant

                  </td>

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

                    :text | :circle | :rect

                  </td>

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

                  <td class="px-6 py-4 text-sm text-gray-700">Skeleton shape variant</td>

                </tr>

                <tr>

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

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

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

                  <td class="px-6 py-4 text-sm text-gray-700">Size for text and circle variants</td>

                </tr>

                <tr>

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

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

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

                  <td class="px-6 py-4 text-sm text-gray-700">Number of lines for text variant</td>

                </tr>

                <tr>

                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">width</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">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Custom width (e.g., "200px")</td>

                </tr>

                <tr>

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

                    height

                  </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">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Custom height (e.g., "100px")</td>

                </tr>

              </tbody>

            </table>

          </div>

        </section>

      </div>

    </div>

    """

  end

end