component EmptyState {
  props {
    class = ""
    icon = "◇"
    title = "Nothing here yet"
    description = ""
    actionLabel = ""
    actionHref = "#"
  }
  view {
    <div class="rounded-3xl border border-dashed border-slate-300 text-center dark:border-slate-700 {class}"><div class="mx-auto flex size-14 items-center justify-center rounded-2xl bg-violet-100 text-2xl text-violet-700 dark:bg-violet-950 dark:text-violet-300">{icon}</div><h3 class="mt-4 text-lg font-bold">{title}</h3><p data-show="description" class="mx-auto mt-2 max-w-md text-sm text-slate-500">{description}</p><a data-show="actionLabel" href="{actionHref}" class="mt-5 inline-flex min-h-11 items-center rounded-xl bg-violet-600 px-4 py-2.5 text-sm font-semibold text-white">{actionLabel}</a></div>
  }
}