public-apps/kino_ui_widgets.livemd

<!-- livebook:{"app_settings":{"access_type":"public","auto_shutdown_ms":3600000,"output_type":"rich","show_source":true,"slug":"kino-widgets"}} -->

# Kino UI widgets

```elixir
Mix.install([
  {:kino, "~> 0.12.3"}
])
```

## Kino.Input

````elixir
defmodule Helpers do
  def display_widget_demo(function_name) when function_name == "select" do
    code =
      quote do
        Kino.Input.select(unquote(function_name), en: "English", fr: "Français")
      end

    markdown = build_code_sample(function_name, code)

    render_input_demo(markdown, code)
  end

  def display_widget_demo(function_name) when function_name == "image" do
    code =
      quote do
        Kino.Input.image(unquote(function_name), format: :png, width: 500, height: 500)
      end

    markdown = build_code_sample(function_name, code)

    render_input_demo(markdown, code)
  end

  def display_widget_demo(function_name) do
    code =
      quote do
        Kino.Input.unquote(String.to_atom(function_name))(unquote(function_name))
      end

    markdown = build_code_sample(function_name, code)

    render_input_demo(markdown, code)
  end

  defp build_code_sample(title, code) do
    Kino.Markdown.new("""
    ### #{title}

    ```elixir
    #{Macro.to_string(code)}
    ```
    """)
  end

  defp render_input_demo(code_sample_markdown, code) do
    {result, _bindings} = Code.eval_quoted(code)

    Kino.render(
      Kino.Layout.grid([code_sample_markdown, result, Kino.HTML.new("<br/>")], boxed: true)
    )

    Kino.render(Kino.HTML.new("<br/>"))
  end
end
````

```elixir
import Helpers
```

```elixir
Kino.Markdown.new("## Kino.input")
```

```elixir
kino_input_functions = ~w(
audio
checkbox
color
file
image
number
password
range
select
text
textarea
url
utc_datetime
utc_time
)

Enum.each(kino_input_functions, fn function_name ->
  display_widget_demo(function_name)
end)
```