Preview

React preview

LiveView (HEEx)

alias DesignSystem.UI.StackedShell

<StackedShell.stacked_shell
  id="app-shell"
  brand_label="Goodbones"
  page_title="Dashboard"
  nav_links={[
    %{label: "Dashboard", href: "/", active: true},
    %{label: "Team", href: "/team", active: false}
  ]}
  user_name={@current_user.name}
  user_email={@current_user.email}
  user_avatar={@current_user.avatar_url}
  user_links={[
    %{label: "Your profile", href: "/profile"},
    %{label: "Sign out", href: "/sign_out"}
  ]}
>
  Page content
</StackedShell.stacked_shell>

React (JSX)

import { StackedShell } from "../ui/index.mjs"

<StackedShell
  brandLabel="Goodbones"
  pageTitle="Dashboard"
  navLinks={[
    { label: "Dashboard", href: "/", active: page === "dashboard" },
    { label: "Team", href: "/team" },
  ]}
  userName={user.name}
  userEmail={user.email}
  userAvatar={user.avatarUrl}
  userLinks={[
    { label: "Your profile", href: "/profile" },
    { label: "Sign out", href: "/sign_out" },
  ]}
>
  {/* page content */}
</StackedShell>