flotilla/src/app/components/HealthCheckItem.svelte

<script lang="ts">
  import Stars from "@assets/icons/stars.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import Button from "@lib/components/Button.svelte"
  import type {HealthCheck} from "@app/healthChecks"
  import {healthChecks} from "@app/healthChecks"

  type Props = {
    healthCheck: HealthCheck
  }

  const {healthCheck}: Props = $props()

  const apply = () => $healthChecks.apply(healthCheck)
</script>

<div class="flex items-start justify-between gap-3 px-4 py-3">
  <div class="flex min-w-0 flex-col gap-1">
    <strong class="text-sm">{healthCheck.title}</strong>
    <p class="text-sm opacity-75">{healthCheck.description}</p>
  </div>
  <Button class="button button-neutral button-sm shrink-0" onclick={apply}>
    <Icon icon={Stars} size={4} />
    {healthCheck.action}
  </Button>
</div>