@bravostudioai/react 0.1.0

package/src/components/EncoreErrorBoundary.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+type Props = {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+};
+
+type State = {
+    hasError: boolean;
+    error: unknown;
+};
+
+export default class EncoreErrorBoundary extends React.Component<Props, State> {
+    constructor(props: Props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+
+    static getDerivedStateFromError(error: unknown): State {
+        return { hasError: true, error };
+    }
+
+    componentDidCatch(error: unknown) {
+        // eslint-disable-next-line no-console
+        console.error("EncoreErrorBoundary caught:", error);
+    }
+
+    render() {
+        if (this.state.hasError) {
+            return (
+                this.props.fallback || (
+                    <div
+                        style={{
+                            padding: 16,
+                            color: "#b91c1c",
+                            background: "#fef2f2",
+                            border: "1px solid #fecaca",
+                            borderRadius: 8,
+                            fontFamily: "ui-sans-serif, system-ui, sans-serif",
+                        }}
+                    >
+                        Failed to render. Check console for details.
+                    </div>
+                )
+            );
+        }
+        return this.props.children;
+    }
+}

package/src/components/EncoreLoadingFallback.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+const EncoreLoadingFallback: React.FC = () => {
+    return (
+        <div className="flex flex-col items-center justify-center h-full w-full bg-white">
+            <div className="mb-8">
+                <div
+                    style={{
+                        fontSize: "48px",
+                        fontWeight: "bold",
+                        color: "#6366f1",
+                        fontFamily: "ui-sans-serif, system-ui, sans-serif",
+                    }}
+                >
+                    Encore
+                </div>
+            </div>
+            <div className="text-gray-700 text-lg font-medium">
+                <span className="inline-block animate-pulse">loading...</span>
+            </div>
+        </div>
+    );
+};
+
+export default EncoreLoadingFallback;