Packages
moon
2.87.11
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/components/facing/for_developers.ex
defmodule MoonWeb.Components.Facing.ForDevelopers do
@moduledoc false
use MoonWeb, :stateless_component
alias Moon.Design.Button
alias Moon.Icons.ArrowsTopRight
alias MoonWeb.Components.Facing.GithubIcon
alias MoonWeb.Pages.GettingStartedPage
def render(assigns) do
~F"""
<div class="z-20 theme-moon-light text-bulma relative flex grow p-6 gap-6 theme-tokens rounded-moon-s-lg bg-cell 3xl:flex-col 3xl:h-96 3xl:w-80 3xl:rounded-tl-none 3xl:absolute 3xl:top-96 ltr:3xl:right-0 rtl:3xl:left-0">
<div class="flex gap-6 align-center justify-between grow 3xl:flex-col 3xl:justify-end">
<GithubIcon />
<h2 class="text-moon-24 grow 3xl:grow-0">
<a href={live_path(
MoonWeb.Endpoint,
GettingStartedPage,
role: GettingStartedPage.developer_role()
)}>
For developers.
</a>
</h2>
<div class="3xl:absolute 3xl:top-6 ltr:3xl:right-6 rtl:3xl:left-6 cursor-pointer">
<a
href={live_path(
MoonWeb.Endpoint,
GettingStartedPage,
role: GettingStartedPage.developer_role()
)}
aria-label="Read more info for developers"
>
<ArrowsTopRight font_size="2rem" />
</a>
</div>
</div>
<div class="hidden flex-wrap gap-1 3xl:flex bg-transparent">
<Button
variant="outline"
as="a"
href="https://github.com/coingaming/moon"
target="_blank"
rel="noreferrer"
>Github</Button>
<Button variant="outline" as="a" href="/getting-started">Getting Started</Button>
<Button variant="outline" as="a" href="/tokens">Design Tokens</Button>
<Button
variant="outline"
as="a"
href="https://github.com/coingaming/moon/tree/main/priv/static/themes"
target="_blank"
rel="noreferrer"
>Creating Themes</Button>
<Button
variant="outline"
as="a"
href="https://github.com/coingaming/moon/blob/main/CONTRIBUTING.md"
target="_blank"
rel="noreferrer"
>Contribution</Button>
<Button variant="outline" as="a" href="/components">Components</Button>
</div>
</div>
"""
end
end