Packages
moon
2.73.7
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/design/progress/pin.ex
defmodule Moon.Design.Progress.Pin do
@moduledoc false
use Moon.StatelessComponent, slot: "pin"
@doc "Id of the component"
prop(id, :string)
@doc "Data-testid attribute value"
prop(testid, :string)
@doc "Tailwind classes for customization"
prop(class, :css_class, from_context: :class)
@doc "Will be got from Progress in most cases"
prop(size, :css_class, from_context: :size)
@doc "Will be got from Progress in most cases"
prop(value, :decimal, from_context: :value)
def render(assigns) do
~F"""
<div class={[
merge([
"absolute box-content flex items-center justify-center w-8 h-8 border-2 font-medium",
"text-moon-10-caption uppercase text-goten bg-popo border-goten rounded-full",
"shadow-[0_2px_8px_0_rgba(0,0,0,0.16)]",
"before:absolute before:bg-goten before:rounded-full",
"before:shadow-[0_2px_8px_0_rgba(0,0,0,0.16)]",
"after:absolute after:w-0 after:h-0 after:border-x-4 after:border-x-transparent",
"after:-bottom-[6px] after:border-t-goten",
get_pin_style(@size),
@class
]),
"border-2",
"after:border-x-4",
"after:border-t-[6px]"
]}>
{"#{round(@value || 0)}%"}
</div>
"""
end
def get_pin_style(size) do
case size do
"6xs" ->
"bottom-[18px] ltr:-right-3 rtl:-left-3 before:w-3 before:h-3 before:-bottom-[25px]"
"5xs" ->
"bottom-5 ltr:-right-3 rtl:-left-3 before:w-3 before:h-3 before:-bottom-[26px]"
"4xs" ->
"bottom-6 ltr:-right-3 rtl:-left-3 before:w-3 before:h-3 before:-bottom-7"
"3xs" ->
"bottom-7 ltr:-right-3 rtl:-left-3 before:w-3 before:h-3 before:-bottom-[30px]"
"2xs" ->
"bottom-8 ltr:-right-[10px] rtl:-left-[10px] before:w-4 before:h-4 before:-bottom-[34px]"
end
end
end