src/features/reviews/review-error-toast.tsx

Linked repository file from this build.

"use client";

import { createPortal } from "react-dom";
import { OctagonXIcon, XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { reviewErrorMessage } from "./review-error-message";

/** The workspace's one persistent error. It stays until the user closes it or the error clears. */
export function ReviewErrorToast({ error, onDismiss }: { error: string; onDismiss(): void }) {
  if (!error || typeof document === "undefined") return null;
  return createPortal(
    <div
      role="alert"
      data-slot="toast"
      className="fixed inset-x-4 bottom-4 z-50 mx-auto flex max-w-sm items-start gap-3 rounded-2xl border bg-popover p-4 text-sm text-popover-foreground shadow-lg sm:right-4 sm:left-auto sm:mx-0 sm:w-full"
    >
      <OctagonXIcon className="mt-0.5 size-4 shrink-0 text-destructive" aria-hidden="true" />
      <p className="min-w-0 flex-1 break-words">{reviewErrorMessage(error)}</p>
      <Button
        type="button"
        variant="ghost"
        size="icon"
        className="-m-1 size-8 shrink-0"
        aria-label="Close toast"
        onClick={onDismiss}
      >
        <XIcon aria-hidden="true" />
      </Button>
    </div>,
    document.body,
  );
}