%= pb_rails("button", props: { id: "toggle-user-button", margin_bottom: "md", text: "Show User", variant: "secondary" }) %>
<%= pb_rails("flex", props: { align_items: "center" }) do %>
<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "38px", padding_right: "sm", width: "38px"}) %>
<%= pb_rails("skeleton_loading", props: { gap: "xxs", height: "18px", stack: 2, width: "161px"}) %>
<% end %>
<%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
<%= pb_rails("flex", props: { align_items: "center", flex_direction: "column" }) do %>
<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "100px", padding_bottom: "xs", width: "100px"}) %>
<%= pb_rails("skeleton_loading", props: { height: "32px", padding_bottom: "xxs", width: "144px"}) %>
<%= pb_rails("skeleton_loading", props: { height: "21px", width: "164px"}) %>
<% end %>
<% end %>
<%= pb_rails("user", props: {
name: "Anna Black",
title: "Remodeling Consultant",
orientation: "horizontal",
align: "left",
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
}) %>
<%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
<%= pb_rails("user", props: {
name: "Anna Black",
title: "Remodeling Consultant",
orientation: "vertical",
align: "center",
size: "lg",
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
}) %>
<% end %>