Packages
moon
2.72.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/components/facing/card_contributor.ex
defmodule MoonWeb.Components.Facing.CardContributor do
@moduledoc false
use MoonWeb, :stateless_component
prop(variant, :string, values: ["default", "tiny", "tall"], default: "default")
prop(name, :string, required: true)
prop(title, :string)
prop(image_src, :string, required: true)
def render(assigns) do
~F"""
<li class="flex flex-col">
<div
class={
"relative relative w-72 h-96 rounded-moon-s-lg overflow-hidden bg-cover bg-center grayscale",
get_dimensions(@variant)
}
style={"background-image: url('#{@image_src}')"}
>
<p class="list-item absolute bottom-12 pb-2 ltr:left-full rtl:right-full whitespace-nowrap text-goten text-moon-24 transform origin-bottom-left -rotate-90 z-10 font-semibold drop-shadow-sm">
{@title}
</p>
</div>
<p class="text-moon-24 mt-2 font-semibold">{@name}</p>
</li>
"""
end
defp get_dimensions(variant) do
case variant do
"tall" -> "md:w-96 md:h-[28rem]"
"tiny" -> "md:w-64 md:h-80"
_ -> "md:w-96 md:h-96"
end
end
end