snapshot of https://github.com/excalidraw/excalidraw.git (master, 2026-09-16; blobs > 131072B omitted)

packages/excalidraw/components/ViewportStatusFrame/ViewportStatusFrame.tsx

@@ -0,0 +1,82 @@
+import { useId } from "react";
+
+import clsx from "clsx";
+
+import { t } from "../../i18n";
+import { CloseIcon } from "../icons";
+
+import "./ViewportStatusFrame.scss";
+
+import type { CSSProperties } from "react";
+
+import type { ViewportStatusFrame as ViewportStatusFrameType } from "../../types";
+
+export const ViewportStatusBorder = ({
+  border,
+  style,
+}: {
+  border: string;
+  style?: CSSProperties;
+}) => (
+  <div
+    className="viewport-status-frame__border"
+    style={{ borderColor: border, ...style }}
+  />
+);
+
+export const ViewportStatusBadge = ({
+  label,
+  border,
+}: {
+  label: NonNullable<ViewportStatusFrameType["label"]>;
+  border?: ViewportStatusFrameType["border"];
+}) => {
+  const labelId = useId();
+  const labelContent = (
+    <>
+      {label.icon && (
+        <span className="viewport-status-frame__badge-icon">{label.icon}</span>
+      )}
+      {label.label}
+    </>
+  );
+
+  return (
+    <div
+      className={clsx("viewport-status-frame__badge", {
+        "viewport-status-frame__badge--clickable": label.onClick,
+      })}
+      role="status"
+      style={{
+        ["--viewport-status-frame-badge-background" as string]:
+          label.background || border || "var(--color-primary)",
+        color: label.color,
+      }}
+    >
+      {label.onClick && (
+        <button
+          type="button"
+          className="viewport-status-frame__badge-action"
+          aria-labelledby={labelId}
+          onClick={label.onClick}
+        />
+      )}
+      <div
+        className="viewport-status-frame__badge-label"
+        id={label.onClick ? labelId : undefined}
+      >
+        {labelContent}
+      </div>
+      {label.onClose && (
+        <button
+          type="button"
+          className="viewport-status-frame__badge-close"
+          aria-label={t("buttons.close")}
+          onClick={label.onClose}
+        >
+          {CloseIcon}
+        </button>
+      )}
+    </div>
+  );
+};