Packages
moon
2.81.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/tutorials/introduction.ex
defmodule MoonWeb.Pages.Tutorials.Introduction do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Autolayouts.TopToDown
alias Moon.Components.Carousel
alias Moon.Components.Heading
alias Moon.Components.Link
alias MoonWeb.Components.Page
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Tutorials"
},
%{
to: "/tutorials/process-description-and-team-interactions",
name: "Introduction"
}
]
)
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={32}>Design team and design rules</Heading>
<Carousel class="mt-4 mb-8">
<Link
class="w-10/12 overflow-hidden carousel-item mr-4 bg-goku"
to="https://www.figma.com/file/WbVNWP2v4SKxuPvdTDUXCkD3/Assets?node-id=362%3A251"
>
<Heading size={24}>Icons</Heading>
<img
class="max-w-full border-radius-default"
src={static_path(@socket, "/images/tutorials/invision_moon_icons.png")}
/>
</Link>
<Link
class="w-10/12 overflow-hidden carousel-item"
to="https://www.figma.com/file/S3q1SkVngbwHuwpxHKCsgtJj/Components?node-id=15965%3A14977"
>
<Heading size={24}>Components</Heading>
<img
class="max-w-full border-radius-default"
src={static_path(@socket, "/images/tutorials/invision_moon_dropdown.png")}
/>
</Link>
</Carousel>
<Heading size={32}>Component libary implementations</Heading>
<Carousel class="mt-4 mb-8">
<Link
class="w-10/12 overflow-hidden carousel-item mr-4 bg-goku"
to="https://moon-surface.coingaming.io/sportsbet-dark/assets/icons"
>
<Heading size={24}>Elixir (Phoenix & Surface)</Heading>
<img
class="max-w-full border-radius-default"
src={static_path(@socket, "/images/tutorials/moon_surface_icons.png")}
/>
</Link>
<Link class="w-10/12 overflow-hidden carousel-item" to="https://moon.io/assets/icons">
<Heading size={24}>Typescript (React)</Heading>
<img
class="max-w-full border-radius-default"
src={static_path(@socket, "/images/tutorials/moon_react_icons.png")}
/>
</Link>
</Carousel>
</TopToDown>
</Page>
"""
end
end