metabuilder/packages/ui_header/seed/scripts/render.lua

-- Header render component

---@class HeaderProps
---@field variant? "default"|"admin"
---@field title? string
---@field showHome? boolean
---@field username? string
---@field showBadge? boolean
---@field showAvatar? boolean
---@field showLogout? boolean

---@class UIComponent
---@field type string
---@field props? table
---@field children? UIComponent[]

local M = {}

---@param props HeaderProps
---@return UIComponent
function M.render(props)
  local variant = props.variant or "default"
  local bg = variant == "admin" and "bg-sidebar" or "bg-card"
  
  return {
    type = "Box",
    props = { className = "border-b sticky top-0 z-50 " .. bg },
    children = {
      {
        type = "Container",
        props = { className = "flex justify-between items-center h-16 px-4" },
        children = {
          M.logo_section(props),
          M.user_section(props)
        }
      }
    }
  }
end

---@param props HeaderProps
---@return UIComponent
function M.logo_section(props)
  return {
    type = "Flex",
    props = { className = "items-center gap-6" },
    children = {
      { type = "Box", props = { className = "w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-accent" } },
      { type = "Typography", props = { variant = "h6", text = props.title or "MetaBuilder" } },
      props.showHome and {
        type = "Button",
        props = { variant = "ghost", text = "Home", onClick = "navigateHome" }
      } or nil
    }
  }
end

---@param props HeaderProps
---@return UIComponent
function M.user_section(props)
  local children = {}
  if props.username and props.showBadge then
    children[#children + 1] = { type = "Badge", props = { text = props.username } }
  end
  if props.username and props.showAvatar then
    children[#children + 1] = { type = "Avatar", props = { fallback = string.sub(props.username, 1, 1) } }
  end
  if props.showLogout then
    children[#children + 1] = { type = "Button", props = { variant = "ghost", text = "Logout", onClick = "handleLogout" } }
  end
  return { type = "Flex", props = { className = "items-center gap-2" }, children = children }
end

return M