Data Display

<.pp_card :for={variant <- ~w(elevated filled outlined)} variant={variant}>
  <:title>{variant}</:title>
  <:subhead>Card variant</:subhead>
  Body text on the card's own surface.
</.pp_card>

<.pp_card>
  <:media><img src="/images/1.jpg" alt="" class="h-36 w-full object-cover" /></:media>
  <:title>Breakfast</:title>
  <:subhead>Open until 11am</:subhead>
  Pancakes, eggs and fresh coffee.
  <:actions>
    <.pp_button variant="text">Directions</.pp_button>
    <.pp_button variant="tonal">Book</.pp_button>
  </:actions>
</.pp_card>

<%!-- The whole card is clickable; :actions stay outside the link --%>
<.pp_card variant="outlined" navigate={~p"/components/surfaces"}>
  <:title>Surfaces</:title>
  Typography, Divider and the sheets.
</.pp_card>

<.pp_avatar>AL</.pp_avatar>
<.pp_avatar><.pp_icon name="hero-user" /></.pp_avatar>

<%!-- An image, falling back to the initials if it fails to load --%>
<.pp_avatar src={@user.avatar_url} alt={@user.name}>GH</.pp_avatar>

<%!-- small badge: no content --%>
<.pp_badge><.pp_icon name="hero-chat-bubble-left" /></.pp_badge>

<%!-- large badge: a count or short label --%>
<.pp_badge content={4}><.pp_icon name="hero-envelope" /></.pp_badge>
<.pp_badge content={150} max={99}><.pp_icon name="hero-inbox" /></.pp_badge>

<%!-- a count of 0 hides it --%>
<.pp_badge content={@unread}><.pp_icon name="hero-bell" /></.pp_badge>

<.pp_chip variant="assist" phx-click="add_to_calendar">
  <:icon><.pp_icon name="hero-calendar" size="sm" /></:icon>
  Add to calendar
</.pp_chip>

<%!-- filter: a client-side toggle (or selected={@unread} + phx-click) --%>
<.pp_chip variant="filter" toggle selected={false}>Unread</.pp_chip>

<%!-- input: removable --%>
<.pp_chip variant="input" deletable on_delete={JS.push("remove_tag", value: %{tag: "elixir"})}>
  elixir
</.pp_chip>

<.pp_chip variant="suggestion" phx-click="reply" phx-value-text="Sounds good">Sounds good</.pp_chip>

<.pp_tooltip title="Delete">
  <.pp_icon_button icon="hero-trash" label="Delete" title={false} />
</.pp_tooltip>

<.pp_tooltip title="Bottom" placement="bottom">
  <.pp_button variant="outlined">Bottom</.pp_button>
</.pp_tooltip>

<.pp_tooltip variant="rich" subhead="Rich tooltip" title="Supporting text with more context.">
  <.pp_button variant="tonal">Hover me</.pp_button>
  <:actions><.pp_button variant="text" size="xs">Learn more</.pp_button></:actions>
</.pp_tooltip>

<.pp_icon name="hero-check" class="text-pp-tertiary" />

<%!-- size, not class="size-4" (which loses to the built-in size) --%>
<.pp_icon :for={size <- ~w(xs sm md lg xl)} name="hero-star" size={size} />

<.pp_carousel id="featured" label="Featured places" controls>
  <:item :for={place <- @places} label={place.name} navigate={~p"/places/#{place.id}"}>
    <img src={place.photo} alt="" class="size-full object-cover" />
  </:item>
</.pp_carousel>

<.pp_carousel id="hero" layout="hero" height="sm" label="Featured">
  <:item :for={place <- @places} label={place.name}>
    <img src={place.photo} alt="" class="size-full object-cover" />
  </:item>
</.pp_carousel>

<.pp_table_container>
  <.pp_table>
    <.pp_table_head>
      <.pp_table_row>
        <.pp_table_cell variant="head" sortable sort_direction={@sort} phx-click="sort">
          Dessert
        </.pp_table_cell>
        <.pp_table_cell variant="head" align="right">Calories</.pp_table_cell>
      </.pp_table_row>
    </.pp_table_head>
    <.pp_table_body>
      <.pp_table_row :for={d <- @desserts} selected={d.id == @selected_id}>
        <.pp_table_cell>{d.name}</.pp_table_cell>
        <.pp_table_cell align="right">{d.calories}</.pp_table_cell>
      </.pp_table_row>
    </.pp_table_body>
  </.pp_table>
</.pp_table_container>

<.pp_table_container>
  <.pp_table>...</.pp_table>

  <%!-- Links: (page, rows_per_page) -> URL --%>
  <.pp_table_pagination
    id="users-pagination"
    page={@page}
    count={@total_rows}
    rows_per_page={@per_page}
    path={&~p"/users?page=#{&1}&per_page=#{&2}"}
  />
</.pp_table_container>

<%!-- Or events: phx-value-page / phx-value-rows_per_page --%>
<.pp_table_pagination
  id="users-pagination"
  page={@page}
  count={@total_rows}
  rows_per_page={@per_page}
  on_page_change="page"
  on_rows_per_page_change="per_page"
/>