Packages
moon
2.78.3
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_designers.ex
defmodule MoonWeb.Components.Facing.ForDesigners do
@moduledoc false
use MoonWeb, :stateless_component
alias Moon.Design.Button
alias Moon.Icons.ArrowsTopRight
alias MoonWeb.Components.Facing.FigmaIcon
alias MoonWeb.Pages.GettingStartedPage
def render(assigns) do
~F"""
<div class="z-20 theme-moon-dark text-bulma relative flex grow p-6 gap-6 theme-tokens rounded-moon-s-lg bg-whis 3xl:flex-col 3xl:h-96 3xl:w-80 3xl:rounded-br-none 3xl:absolute 3xl:top-0 ltr:3xl:right-80 rtl:3xl:left-80">
<div class="flex gap-6 align-center justify-between grow 3xl:flex-col 3xl:justify-end">
<FigmaIcon />
<h2 class="text-moon-24 grow 3xl:grow-0">
<a href={live_path(MoonWeb.Endpoint, GettingStartedPage)}>
For designers.
</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)}
aria-label="Read more info for designers"
>
<ArrowsTopRight font_size="2rem" />
</a>
</div>
</div>
<div class="hidden flex-wrap gap-1 3xl:flex theme-moon-dark bg-transparent">
<Button
as="a"
variant="outline"
href="https://www.figma.com/community/file/1002945721703152933"
target="_blank"
rel="noreferrer"
>Figma</Button>
<Button variant="outline" as="a" href="/getting-started">Getting Started</Button>
<Button variant="outline" as="a" href="/typography">Typography</Button>
<Button variant="outline" as="a" href="/colours">Colour Convention</Button>
</div>
</div>
"""
end
end