Packages
moon
2.90.3
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/design/avatar_page.ex
defmodule MoonWeb.Pages.Design.AvatarPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Design.Tabs
alias MoonWeb.Components.Anatomy
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.ExamplesList
alias MoonWeb.Components.PropsTable
alias MoonWeb.Examples.Design.AvatarExample
data(breadcrumbs, :any,
default: [
%{
to: "/components",
name: "Components"
},
%{
to: "/components/v2/avatar",
name: "Avatar"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription is_rtl_support title="Avatar" image="facing/components/avatar.png">
<p>
The Avatar component is typically used to display images, icons, or initials representing people or other entities.
</p>
</ComponentPageDescription>
<Tabs id="anatomy-tabs" class="justify-between gap-6">
<h2 class="text-moon-24 font-medium">Anatomy</h2>
<Tabs.List tab_titles={["Short syntax", "Long syntax"]} class="w-auto" />
<Tabs.Panels>
<Tabs.Panel><Anatomy title={false}>{component_anatomy(:short)}</Anatomy></Tabs.Panel>
<Tabs.Panel><Anatomy title={false}>{component_anatomy(:long)}</Anatomy></Tabs.Panel>
</Tabs.Panels>
</Tabs>
<ExamplesList examples={[
AvatarExample.Default,
AvatarExample.Variants,
AvatarExample.Sizes,
AvatarExample.ActiveStatus,
AvatarExample.StatusOrigin,
AvatarExample.Customization
]} />
<PropsTable module={Moon.Design.Avatar} />
<PropsTable module={Moon.Design.Avatar.Status} />
</Page>
"""
end
def component_anatomy(:long) do
"""
<Avatar>
<Icon name="..." />
<Avatar.Status />
</Avatar>
"""
end
def component_anatomy(:short) do
"""
<Avatar>
<Avatar.Status />
</Avatar>
"""
end
end