Packages
moon
2.78.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/getting_started_page.ex
defmodule MoonWeb.Pages.GettingStartedPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Design.Tabs
alias MoonWeb.Components.Page
alias MoonWeb.Components.Started.ForDeveloper
alias MoonWeb.Components.Started.ForDesigner
data(breadcrumbs, :any,
default: [
%{
to: "/getting-started",
name: "Getting Started"
}
]
)
data(tab_index, :integer)
def mount(params, _session, socket) do
{:ok, assign(socket, tab_index: (params["role"] == developer_role() && 1) || 0)}
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<h1 class="text-moon-32 font-semibold">Getting started</h1>
<Tabs
id="getting started"
class="justify-between gap-6"
selected={@tab_index}
on_change="handle_role"
>
<Tabs.List class="w-fit p-1 gap-1 bg-gohan rounded-moon-s-md">
<Tabs.Segment>{designer_role()}</Tabs.Segment>
<Tabs.Segment>{developer_role()}</Tabs.Segment>
</Tabs.List>
<Tabs.Panels class="mt-6">
<Tabs.Panel>
<ForDesigner />
</Tabs.Panel>
<Tabs.Panel>
<ForDeveloper />
</Tabs.Panel>
</Tabs.Panels>
</Tabs>
</Page>
"""
end
def handle_event("handle_role", %{"value" => tab_index}, socket) do
{:noreply, assign(socket, tab_index: String.to_integer(tab_index))}
end
def designer_role(), do: "I'm a designer"
def developer_role(), do: "I'm a developer"
end