Packages
moon
2.90.5
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
Retired package: Deprecated - Package no longer supported. Use moon_live_view package instead
Current section
Files
Jump to
Current section
Files
lib/moon_web/components/tokens_table.ex
defmodule MoonWeb.Components.TokensTable do
@moduledoc false
use MoonWeb, :stateless_component
alias Moon.Design.Table
alias Moon.Design.Table.Column
prop(title, :string, default: "Props")
prop(data, :list)
def render(assigns) do
~F"""
<section class="flex flex-col gap-6 overflow-x-auto">
<div class="text-moon-24 font-semibold">{@title}</div>
<Table
items={item <- @data}
header_row_class="bg-transparent"
class="bg-transparent"
row_bg="bg-gohan whitespace-nowrap"
>
<Column name="property" label="Property">
{item.property}
</Column>
<Column name="css" label="CSS variable">
{item.css}
</Column>
<Column name="key" label="Class name">
{item.key}
</Column>
<Column name="value" label="Value">
{item.value}
</Column>
</Table>
</section>
"""
end
end