LiveRegion

"use client";

import {
  LiveRegion,
  useAnnouncer,
} from "@dashboardpack/core/components/ui/live-region";
import { Button } from "@dashboardpack/core/components/ui/button";

export default function LiveRegionExample() {
  const { message, announce } = useAnnouncer();
  return (
    <div className="space-y-4">
      <Button onClick={() => announce("Your changes have been saved.")}>
        Announce saved changes
      </Button>
      <LiveRegion visible className="min-h-6 text-sm text-muted-foreground">
        {message}
      </LiveRegion>
      <p className="text-xs text-muted-foreground">
        The status region is mounted before its message changes. Click again to
        repeat the announcement.
      </p>
    </div>
  );
}