intro.lua

local n = require("nui-components")
local spinner_formats = require("nui-components.utils.spinner-formats")

local renderer = n.create_renderer({
  width = 100,
  height = 24,
})

local signal = n.create_signal({
  active_tab = "tab-1",
})

local body = function()
  return n.tabs(
    { active_tab = signal.active_tab },
    n.tab(
      { id = "tab-1" },
      n.gap({ flex = 1 }),
      n.columns(
        { flex = 0 },
        n.gap({ flex = 1 }),
        n.columns(
          { flex = 0 },
          n.spinner({
            is_loading = true,
            frames = spinner_formats.dots,
            on_mount = function()
              vim.defer_fn(function()
                signal.active_tab = "tab-2"
              end, 3000)
            end,
          }),
          n.paragraph({
            lines = { n.text("Loading…", "Italic") },
          })
        ),
        n.gap({ flex = 1 })
      ),
      n.gap({ flex = 1 })
    ),
    n.tab(
      { id = "tab-2" },
      n.gap({ flex = 1 }),
      n.columns(
        { flex = 0 },
        n.gap({ flex = 1 }),
        n.animated_text({
          interval = 20,
          text = [[
     _  ____  ______    _________  __  ______  ____  _  _______  ____________ 
    / |/ / / / /  _/___/ ___/ __ \/  |/  / _ \/ __ \/ |/ / __/ |/ /_  __/ __/ 
   /    / /_/ // //___/ /__/ /_/ / /|_/ / ___/ /_/ /    / _//    / / / _\ \   
  /_/|_/\____/___/    \___/\____/_/  /_/_/   \____/_/|_/___/_/|_/ /_/ /___/   
  ]],
          on_complete = function()
            vim.defer_fn(function()
              signal.active_tab = "tab-3"
            end, 1000)
          end,
        }),
        n.gap({ flex = 1 })
      ),
      n.gap({ flex = 1 })
    ),
    n.tab(
      { id = "tab-3" },
      n.columns(
        n.tree({
          flex = 1,
          autofocus = true,
          border_label = "Tasks:",
          data = {
            n.node({ text = "Code Documentation Standards", is_done = false }),
            n.node({ text = "Version Control Workflow", is_done = true }),
            n.node({ text = "Essential API Documentation", is_done = false }),
            n.node({ text = "Bug Reporting Protocol", is_done = false }),
            n.node({ text = "Testing Strategy Overview", is_done = true }),
            n.node({ text = "Code Review Checklist", is_done = false }),
            n.node({ text = "Agile Sprint Planning Guide", is_done = false }),
            n.node({ text = "Deployment Process Documentation", is_done = false }),
            n.node({ text = "Continuous Integration Setup", is_done = false }),
            n.node({ text = "Security Protocol Documentation", is_done = true }),
          },
          on_select = function(node, component)
            local tree = component:get_tree()
            node.is_done = not node.is_done
            tree:render()
          end,
          prepare_node = function(node, line, component)
            if node.is_done then
              line:append("✔", "String")
            else
              line:append("◻", "Comment")
            end

            line:append(" ")
            line:append(node.text)

            return line
          end,
        }),
        n.rows(
          { flex = 2 },
          n.text_input({
            size = 1,
            border_label = {
              icon = "",
              text = n.text("Title", "NuiComponentsBorderLabel"),
              align = "center",
            },
          }),
          n.text_input({
            flex = 1,
            border_label = {
              icon = "󰦨",
              text = "Description",
              align = "center",
            },
          })
        )
      )
    )
  )
end

renderer:render(body)