Packages
moon
2.80.1
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/components/avatar_page.ex
defmodule MoonWeb.Pages.Components.AvatarPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Components.Avatar
alias Moon.Components.Avatar.StatusOrigin
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
alias MoonWeb.Components.Facing.DeprecationWarning
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/avatar",
name: "Avatar"
}
]
)
data(props_info_array, :list,
default: [
%{
:name => ~c"bg_color",
:type => ~c"string",
:required => ~c"No",
:default => ~c"bg-goku",
:description => ~c"Background color"
},
%{
:name => ~c"color",
:type => ~c"string",
:required => ~c"No",
:default => ~c"text-bulma",
:description => ~c"Text color"
},
%{
:name => ~c"image_url",
:type => ~c"string",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Path to the image"
},
%{
:name => ~c"is_rounded",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"false",
:description => ~c""
},
%{
:name => ~c"is_status_active",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"false",
:description => ~c"Active state for status indication"
},
%{
:name => ~c"name",
:type => ~c"string",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Capital letters of name"
},
%{
:name => ~c"size",
:type => ~c"xs | sm | md | lg | xl | 2xl",
:required => ~c"No",
:default => ~c"md",
:description => ~c"Size for avatar"
},
%{
:name => ~c"status_origin",
:type => ~c"%StatusOrigin{ vertical: top | bottom, horizontal: left | right }",
:required => ~c"No",
:default => ~c"%StatusOrigin{vertical: \"bottom\", horizontal: \"right\"}",
:description => ~c"Position for status indication"
}
]
)
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
@spec render(any) :: Phoenix.LiveView.Rendered.t()
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Avatar">
<DeprecationWarning
name="Avatar"
href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.Design.AvatarPage)}
/>
</ComponentPageDescription>
<ExampleAndCode title="Default" id="avatar_01">
<:example>
<Avatar />
</:example>
<:code>{avatar_01_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Variants" id="avatar_1">
<:example>
<Avatar />
<Avatar name="JS" />
<Avatar image_url="https://www.fillmurray.com/200/200" />
</:example>
<:code>{avatar_1_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Rounded" id="avatar_1_1">
<:example>
<Avatar is_rounded />
<Avatar is_rounded name="JS" />
<Avatar is_rounded image_url="https://www.fillmurray.com/200/200" />
</:example>
<:code>{avatar_1_0_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Different colours" id="avatar_2">
<:example>
<Avatar />
<Avatar color="text-frieza" bg_color="bg-chichi" />
<Avatar color="text-goku" bg_color="bg-krillin" />
<Avatar color="text-chichi" bg_color="bg-frieza" />
</:example>
<:code>{avatar_2_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Sizes" id="avatar_3">
<:example>
<div class="flex flex-wrap items-center justify-around gap-2 w-full">
<Avatar size="xs" />
<Avatar size="sm" />
<Avatar />
<Avatar size="lg" />
<Avatar size="xl" />
<Avatar size="2xl" />
</div>
<div class="flex flex-wrap items-center justify-around gap-2 w-full">
<Avatar name="xs" size="xs" />
<Avatar name="sm" size="sm" />
<Avatar name="md" />
<Avatar name="lg" size="lg" />
<Avatar name="xl" size="xl" />
<Avatar name="2xl" size="2xl" />
</div>
<div class="flex flex-wrap items-center justify-around gap-2 w-full">
<Avatar image_url="https://www.fillmurray.com/200/200" size="xs" />
<Avatar image_url="https://www.fillmurray.com/200/200" size="sm" />
<Avatar image_url="https://www.fillmurray.com/200/200" />
<Avatar image_url="https://www.fillmurray.com/200/200" size="lg" />
<Avatar image_url="https://www.fillmurray.com/200/200" size="xl" />
<Avatar image_url="https://www.fillmurray.com/200/200" size="2xl" />
</div>
</:example>
<:code>{avatar_3_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Active status" id="avatar_4">
<:example>
<Avatar />
<Avatar is_status_active />
<Avatar image_url="https://www.fillmurray.com/200/200" />
<Avatar image_url="https://www.fillmurray.com/200/200" is_status_active />
</:example>
<:code>{avatar_4_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Status origin" id="avatar_5">
<:example>
<Avatar is_status_active status_origin={%StatusOrigin{vertical: "top", horizontal: "right"}} />
<Avatar is_status_active status_origin={%StatusOrigin{vertical: "top", horizontal: "left"}} />
<Avatar is_status_active />
<Avatar is_status_active status_origin={%StatusOrigin{vertical: "bottom", horizontal: "left"}} />
</:example>
<:code>{avatar_5_code()}</:code>
</ExampleAndCode>
<PropsTable title="Avatar props" data={@props_info_array} />
</Page>
"""
end
def avatar_01_code do
"""
<Avatar />
"""
end
def avatar_1_code do
"""
<Avatar />
<Avatar name="JS" />
<Avatar image_url="https://www.fillmurray.com/200/200" />
"""
end
def avatar_1_0_code do
"""
<Avatar is_rounded />
<Avatar is_rounded name="JS" />
<Avatar is_rounded image_url="https://www.fillmurray.com/200/200" />
"""
end
def avatar_2_code do
"""
<Avatar />
<Avatar color="text-frieza" bg_color="bg-chichi" />
<Avatar color="text-goku" bg_color="bg-krillin" />
<Avatar color="text-chichi" bg_color="bg-frieza" />
"""
end
def avatar_3_code do
"""
<div class="flex flex-wrap items-center justify-around gap-2 w-full">
<Avatar size="xs" />
<Avatar size="sm" />
<Avatar />
<Avatar size="lg" />
<Avatar size="xl" />
<Avatar size="2xl" />
</div>
<div class="flex flex-wrap items-center justify-around gap-2 w-full">
<Avatar name="xs" size="xs" />
<Avatar name="sm" size="sm" />
<Avatar name="md" />
<Avatar name="lg" size="lg" />
<Avatar name="xl" size="xl" />
<Avatar name="2xl" size="2xl" />
</div>
<div class="flex flex-wrap items-center justify-around gap-2 w-full">
<Avatar image_url="https://www.fillmurray.com/200/200" size="xs" />
<Avatar image_url="https://www.fillmurray.com/200/200" size="sm" />
<Avatar image_url="https://www.fillmurray.com/200/200" />
<Avatar image_url="https://www.fillmurray.com/200/200" size="lg" />
<Avatar image_url="https://www.fillmurray.com/200/200" size="xl" />
<Avatar image_url="https://www.fillmurray.com/200/200" size="2xl" />
</div>
"""
end
def avatar_4_code do
"""
<Avatar />
<Avatar is_status_active />
<Avatar image_url="https://www.fillmurray.com/200/200" />
<Avatar image_url="https://www.fillmurray.com/200/200" is_status_active />
"""
end
def avatar_5_code do
"""
<Avatar
is_status_active
status_origin={%StatusOrigin{ vertical: "top", horizontal: "right" }}
/>
<Avatar
is_status_active
status_origin={%StatusOrigin{ vertical: "top", horizontal: "left" }}
/>
<Avatar is_status_active />
<Avatar
is_status_active
status_origin={%StatusOrigin{ vertical: "bottom", horizontal: "left" }}
/>
"""
end
end