defmodule PyrauiWeb.DocsLive.ListDocs do use PyrauiWeb, :html def render(assigns) do ~H"""

List

Data list component for displaying structured information with titles and content.

Basic Example

<:item title="Name">John Doe <:item title="Email">john@example.com <:item title="Role">Administrator <:item title="Status">Active 

    <.list>
      <:item title="Name">John Doe</:item>
      <:item title="Email">john@example.com</:item>
      <:item title="Role">Administrator</:item>
    </.list>

Team Directory

Studio

Design Systems Group

3 collaborators online
<:item :for={profile <- @list_profiles} title={profile.name}>
{"#{profile.name}

{profile.title}

{profile.team} ยท {profile.location}

{profile.availability} {profile.focus}
{tag} 

    <.list>
      <:item :for={profile <- @profiles} title={profile.name}>
        <div class="flex items-center justify-between">
          <div>
            <p class="font-medium">{profile.title}</p>
            <p class="text-sm text-gray-500">{profile.team}</p>
          </div>
          <.badge variant={:outline}>{profile.availability}</.badge>
        </div>
      </:item>
    </.list>

With Badges

<:item title="Status"> Active <:item title="Priority"> High <:item title="Category"> Feature 

    <.list>
      <:item title="Status">
        <.badge variant={:success}>Active</.badge>
      </:item>
      <:item title="Priority">
        <.badge variant={:warning}>High</.badge>
      </:item>
    </.list>

Activity Feed

<:item :for={activity <- @list_activity} title={activity.label}>
<.icon name={activity.icon} class="size-5" />

{activity.description}

{activity.timestamp}
<.icon name="hero-arrow-top-right-on-square" class="size-3" /> View thread 

    <.list>
      <:item :for={item <- @activity} title={item.label}>
        <div class="flex gap-3">
          <.icon name={item.icon} class="size-4 text-blue-500" />
          <div>
            <p class="text-sm text-gray-600">{item.description}</p>
            <p class="text-xs text-gray-400">{item.timestamp}</p>
          </div>
        </div>
      </:item>
    </.list>

Props & Slots

Prop Type Default Description
item (slot) slot required List items. Each item accepts:
  • title - Title/label for the item (required)
""" end defp activity_badge_class(:in_progress), do: "bg-blue-50 text-blue-500 ring-1 ring-inset ring-blue-100" defp activity_badge_class(:review), do: "bg-amber-50 text-amber-600 ring-1 ring-inset ring-amber-100" defp activity_badge_class(:done), do: "bg-emerald-50 text-emerald-600 ring-1 ring-inset ring-emerald-100" defp activity_badge_class(_status), do: "bg-gray-100 text-gray-500 ring-1 ring-inset ring-gray-200" end