Packages
moon
2.90.5
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
Retired package: Deprecated - Package no longer supported. Use moon_live_view package instead
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/components/card_page.ex
defmodule MoonWeb.Pages.Components.CardPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Autolayouts.LeftToRight
alias Moon.Autolayouts.TopToDown
alias Moon.Components.Card
alias Moon.Components.CardV2
alias Moon.Components.Heading
alias Moon.Components.IconButton
alias Moon.Components.Link
alias Moon.Icons.ArrowsTopRight
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias MoonWeb.Pages.Tutorials.AddDataUsingForm
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/card",
name: "Card"
}
]
)
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<TopToDown>
<Heading size={56} class="mb-4">Card</Heading>
<p>
<Link to="https://github.com/coingaming/moon/blob/main/lib/moon_web/pages/components/card_page.ex">Sourcecode of this page</Link>
</p>
<ExampleAndCode id="card_1">
<:example>
<Card title="Winers">
<:buttons>
<IconButton
id="winers-arrows-update"
icon_name="arrows_update"
height={8}
width={8}
hover_bg_color="bg-gohan"
/>
<IconButton icon_name="controls_expand" height={8} width={8} hover_bg_color="bg-gohan" />
</:buttons>
<:content>
{Faker.Lorem.paragraph()}
</:content>
</Card>
</:example>
<:code>{card_1_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Cards grid for stat" id="card_2">
<:example>
<LeftToRight gap="gap-6">
{#for card <- AddDataUsingForm.Card.cards()}
<CardV2
top_class="text-moon-18"
left_bottom_class="text-moon-14 text-roshi"
right_bottom_class="text-moon-48"
>
<:top>
{card.top}
</:top>
<:left_bottom>
<LeftToRight>
<ArrowsTopRight class="h-5 w-5" color="bg-roshi" />
{card.left_bottom}
</LeftToRight>
</:left_bottom>
<:right_bottom>
{card.right_bottom}
</:right_bottom>
</CardV2>
{/for}
</LeftToRight>
</:example>
<:code>{card_2_code()}</:code>
</ExampleAndCode>
</TopToDown>
</Page>
"""
end
def card_1_code do
"""
alias Moon.Components.Card
alias Moon.Components.IconButton
<Card title="Winers">
<:buttons>
<IconButton
id="winers-arrows-update"
icon_name="arrows_update"
height={8}
width={8}
hover_bg_color="bg-gohan"
/>
<IconButton icon_name="controls_expand" height={8} width={8} hover_bg_color="bg-gohan" />
</:buttons>
<:content>
{Faker.Lorem.paragraph()}
</:content>
</Card>
"""
end
def card_2_code do
"""
<LeftToRight gap="gap-6">
{#for card <- AddDataUsingForm.Card.cards()}
<CardV2
top_class="text-moon-18"
left_bottom_class="text-moon-14 text-roshi"
right_bottom_class="text-moon-48"
>
<:top>
{card.top}
</:top>
<:left_bottom>
<LeftToRight>
<ArrowsTopRight class="h-5 w-5" color="bg-roshi" />
{card.left_bottom}
</LeftToRight>
</:left_bottom>
<:right_bottom>
{card.right_bottom}
</:right_bottom>
</CardV2>
{/for}
</LeftToRight>
"""
end
end