tabler/shared/ui/Empty.astro

---
import Icon from './Icon.astro'
import Button from './Button.astro'
import Illustration from './Illustration.astro'
import type { IllustrationImage } from '@shared/lib/svg'

type PolymorphicProps = { as?: 'p' | 'h1' | 'h2' }

interface Props extends PolymorphicProps {
  icon?: string
  height?: number | string
  class?: string
  /** illustration file name, e.g. "computer-fix.svg" */
  illustration?: IllustrationImage | undefined
  /** big text rendered instead of an icon/illustration */
  iconText?: string | undefined
  title?: string
  description?: string | undefined
  /** the action button renders only when buttonText is set */
  buttonText?: string
  buttonIcon?: string
}

const { as: Title = 'p', icon, height = 256, class: className, illustration, iconText, title, description, buttonText, buttonIcon } = Astro.props

const classes = ['empty', className]
---

<div class:list={classes}>
  {
    illustration ? (
      <div class="empty-img">
        <Illustration image={illustration} height={height} />
      </div>
    ) : iconText ? (
      <div class="empty-header" set:html={iconText} />
    ) : icon ? (
      <div class="empty-icon">
        <Icon name={icon} />
      </div>
    ) : null
  }

  <Title class="empty-title" set:html={title} />
  <p class="empty-subtitle text-secondary" set:html={description} />
  {
    buttonText && (
      <div class="empty-action">
        <Button text={buttonText} color="primary" icon={buttonIcon} href="." />
      </div>
    )
  }
</div>