Alert

const alertFixture = {
  id: "alert",
  alerts: [
    { variant: "info", message: "Region us-east-1 has a maintenance window Sunday 02:00–04:00 UTC." },
    { variant: "success", message: "ledger-api v2.4.1 is live in prod. Health checks passed." },
    { variant: "error", message: "analytics-ingest is returning 503s in us-west-2." },
  ],
} satisfies {
  id: string;
  alerts: Array<{ variant: "info" | "success" | "warning" | "error"; message: string }>;
};
 
import { Alert } from "@grassroot/ui-react";
 
export default function AlertDemo() {
  return (
    <div>
      {alertFixture.alerts.map((alert) => (
        <Alert key={alert.variant} variant={alert.variant}>
          {alert.message}
        </Alert>
      ))}
    </div>
  );
}

<script setup lang="ts">
import { Alert } from "@grassroot/ui-vue";
const alertFixture = {
  id: "alert",
  alerts: [
    { variant: "info", message: "Region us-east-1 has a maintenance window Sunday 02:00–04:00 UTC." },
    { variant: "success", message: "ledger-api v2.4.1 is live in prod. Health checks passed." },
    { variant: "error", message: "analytics-ingest is returning 503s in us-west-2." },
  ],
} satisfies {
  id: string;
  alerts: Array<{ variant: "info" | "success" | "warning" | "error"; message: string }>;
};
 
</script>
 
<template>
  <div>
    <Alert v-for="alert in alertFixture.alerts" :key="alert.variant" :variant="alert.variant">{{
      alert.message
    }}</Alert>
  </div>
</template>

import { Component } from "@angular/core";
import { GrassrootAlert } from "@grassroot/ui-angular";
const alertFixture = {
  id: "alert",
  alerts: [
    { variant: "info", message: "Region us-east-1 has a maintenance window Sunday 02:00–04:00 UTC." },
    { variant: "success", message: "ledger-api v2.4.1 is live in prod. Health checks passed." },
    { variant: "error", message: "analytics-ingest is returning 503s in us-west-2." },
  ],
} satisfies {
  id: string;
  alerts: Array<{ variant: "info" | "success" | "warning" | "error"; message: string }>;
};
 
@Component({
  selector: "app-alert-demo",
  standalone: true,
  imports: [GrassrootAlert],
  template: `
    <div>
      @for (alert of fixture.alerts; track alert.variant) {
        <grassroot-alert [variant]="alert.variant">{{ alert.message }}</grassroot-alert>
      }
    </div>
  `,
})
export class AlertDemoComponent {
  protected readonly fixture = alertFixture;
}
 
export default AlertDemoComponent;

<script lang="ts">
  import { Alert } from "@grassroot/ui-svelte";
  const alertFixture = {
    id: "alert",
    alerts: [
      { variant: "info", message: "Region us-east-1 has a maintenance window Sunday 02:00–04:00 UTC." },
      { variant: "success", message: "ledger-api v2.4.1 is live in prod. Health checks passed." },
      { variant: "error", message: "analytics-ingest is returning 503s in us-west-2." },
    ],
  } satisfies {
    id: string;
    alerts: Array<{ variant: "info" | "success" | "warning" | "error"; message: string }>;
  };
 
  </script>
 
<div>
  {#each alertFixture.alerts as alert (alert.variant)}
    <Alert variant={alert.variant}>{alert.message}</Alert>
  {/each}
</div>

/** @jsxImportSource solid-js */
import { Alert } from "@grassroot/ui-solid";
const alertFixture = {
  id: "alert",
  alerts: [
    { variant: "info", message: "Region us-east-1 has a maintenance window Sunday 02:00–04:00 UTC." },
    { variant: "success", message: "ledger-api v2.4.1 is live in prod. Health checks passed." },
    { variant: "error", message: "analytics-ingest is returning 503s in us-west-2." },
  ],
} satisfies {
  id: string;
  alerts: Array<{ variant: "info" | "success" | "warning" | "error"; message: string }>;
};
 
import type { JSX } from "solid-js";
 
export default function AlertDemo(): JSX.Element {
  return (
    <div>
      {alertFixture.alerts.map((alert) => (
        <Alert variant={alert.variant}>{alert.message}</Alert>
      ))}
    </div>
  );
}