29 lines
878 B
Svelte
29 lines
878 B
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
|
|
role="group"
|
|
aria-label={healthCheck.title}
|
|
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>
|