@refinedev/core 4.46.3-alpha.0 → 4.47.0

package/src/components/pages/config-error/index.tsx

@@ -0,0 +1,444 @@
+import React from "react";
+
+export const ConfigErrorPage = () => {
+    return (
+        <div
+            style={{
+                position: "fixed",
+                zIndex: 11,
+                inset: 0,
+                overflow: "auto",
+                width: "100dvw",
+                height: "100dvh",
+            }}
+        >
+            <div
+                style={{
+                    width: "100%",
+                    height: "100%",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    padding: "24px",
+                    background: "#14141FBF",
+                    backdropFilter: "blur(3px)",
+                }}
+            >
+                <div
+                    style={{
+                        maxWidth: "640px",
+                        width: "100%",
+                        background: "#1D1E30",
+                        borderRadius: "16px",
+                        border: "1px solid #303450",
+                        boxShadow: "0px 0px 120px -24px #000000",
+                    }}
+                >
+                    <div
+                        style={{
+                            padding: "16px 20px",
+                            borderBottom: "1px solid #303450",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px",
+                            position: "relative",
+                        }}
+                    >
+                        <ErrorGradient
+                            style={{
+                                position: "absolute",
+                                left: 0,
+                                top: 0,
+                            }}
+                        />
+                        <div
+                            style={{
+                                lineHeight: "24px",
+                                fontSize: "16px",
+                                color: "#FFFFFF",
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "16px",
+                            }}
+                        >
+                            <ErrorIcon />
+                            <span
+                                style={{
+                                    fontWeight: 400,
+                                }}
+                            >
+                                Configuration Error
+                            </span>
+                        </div>
+                    </div>
+                    <div
+                        style={{
+                            padding: "20px",
+                            color: "#A3ADC2",
+                            lineHeight: "20px",
+                            fontSize: "14px",
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: "20px",
+                        }}
+                    >
+                        <p
+                            style={{
+                                margin: 0,
+                                padding: 0,
+                                lineHeight: "28px",
+                                fontSize: "16px",
+                            }}
+                        >
+                            <code
+                                style={{
+                                    display: "inline-block",
+                                    background: "#30345080",
+                                    padding: "0 4px",
+                                    lineHeight: "24px",
+                                    fontSize: "16px",
+                                    borderRadius: "4px",
+                                    color: "#FFFFFF",
+                                }}
+                            >{`<Refine />`}</code>{" "}
+                            is not initialized. Please make sure you have it
+                            mounted in your app and placed your components
+                            inside it.
+                        </p>
+                        <div>
+                            <ExampleImplementation />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const ExampleImplementation = () => {
+    return (
+        <pre
+            style={{
+                display: "block",
+                overflowX: "auto",
+                borderRadius: "8px",
+                fontSize: "14px",
+                lineHeight: "24px",
+                backgroundColor: "#14141F",
+                color: "#E5ECF2",
+                padding: "16px",
+                margin: "0",
+                maxHeight: "400px",
+                overflow: "auto",
+            }}
+        >
+            <span style={{ color: "#FF7B72" }}>import</span> {"{"} Refine,
+            WelcomePage {"}"} <span style={{ color: "#FF7B72" }}>from</span>{" "}
+            <span style={{ color: "#A5D6FF" }}>{'"@refinedev/core"'}</span>;
+            {"\n"}
+            {"\n"}
+            <span style={{ color: "#FF7B72" }}>export</span>{" "}
+            <span style={{ color: "#FF7B72" }}>default</span>{" "}
+            <span>
+                <span style={{ color: "#FF7B72" }}>function</span>{" "}
+                <span style={{ color: "#FFA657" }}>App</span>
+                (
+                <span style={{ color: "rgb(222, 147, 95)" }} />){" "}
+            </span>
+            {"{"}
+            {"\n"}
+            {"  "}
+            <span style={{ color: "#FF7B72" }}>return</span> ({"\n"}
+            {"    "}
+            <span>
+                <span style={{ color: "#79C0FF" }}>
+                    &lt;
+                    <span style={{ color: "#79C0FF" }}>Refine</span>
+                    {"\n"}
+                    {"      "}
+                    <span style={{ color: "#E5ECF2", opacity: 0.6 }}>
+                        {"// "}
+                        <span>...</span>
+                    </span>
+                    {"\n"}
+                    {"    "}&gt;
+                </span>
+                {"\n"}
+                {"      "}
+                <span style={{ opacity: 0.6 }}>
+                    {"{"}
+                    {"/* ... */"}
+                    {"}"}
+                </span>
+                {"\n"}
+                {"      "}
+                <span style={{ color: "#79C0FF" }}>
+                    &lt;
+                    <span style={{ color: "#79C0FF" }}>WelcomePage</span> /&gt;
+                </span>
+                {"\n"}
+                {"      "}
+                <span style={{ opacity: 0.6 }}>
+                    {"{"}
+                    {"/* ... */"}
+                    {"}"}
+                </span>
+                {"\n"}
+                {"    "}
+                <span style={{ color: "#79C0FF" }}>
+                    &lt;/
+                    <span style={{ color: "#79C0FF" }}>Refine</span>
+                    &gt;
+                </span>
+            </span>
+            {"\n"}
+            {"  "});{"\n"}
+            {"}"}
+        </pre>
+    );
+};
+
+const ErrorGradient = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={204}
+        height={56}
+        viewBox="0 0 204 56"
+        fill="none"
+        {...props}
+    >
+        <path fill="url(#welcome-page-error-gradient-a)" d="M12 0H0v12L12 0Z" />
+        <path
+            fill="url(#welcome-page-error-gradient-b)"
+            d="M28 0h-8L0 20v8L28 0Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-c)"
+            d="M36 0h8L0 44v-8L36 0Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-d)"
+            d="M60 0h-8L0 52v4h4L60 0Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-e)"
+            d="M68 0h8L20 56h-8L68 0Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-f)"
+            d="M92 0h-8L28 56h8L92 0Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-g)"
+            d="M100 0h8L52 56h-8l56-56Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-h)"
+            d="M124 0h-8L60 56h8l56-56Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-i)"
+            d="M140 0h-8L76 56h8l56-56Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-j)"
+            d="M132 0h8L84 56h-8l56-56Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-k)"
+            d="M156 0h-8L92 56h8l56-56Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-l)"
+            d="M164 0h8l-56 56h-8l56-56Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-m)"
+            d="M188 0h-8l-56 56h8l56-56Z"
+        />
+        <path
+            fill="url(#welcome-page-error-gradient-n)"
+            d="M204 0h-8l-56 56h8l56-56Z"
+        />
+        <defs>
+            <radialGradient
+                id="welcome-page-error-gradient-a"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-b"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-c"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-d"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-e"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-f"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-g"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-h"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-i"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-j"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-k"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-l"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-m"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+            <radialGradient
+                id="welcome-page-error-gradient-n"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="scale(124)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#FF4C4D" stopOpacity={0.1} />
+                <stop offset={1} stopColor="#FF4C4D" stopOpacity={0} />
+            </radialGradient>
+        </defs>
+    </svg>
+);
+
+const ErrorIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={16}
+        height={16}
+        viewBox="0 0 16 16"
+        fill="none"
+        {...props}
+    >
+        <path
+            fill="#FF4C4D"
+            fillRule="evenodd"
+            d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z"
+            clipRule="evenodd"
+        />
+        <path
+            fill="#fff"
+            fillRule="evenodd"
+            d="M7 8a1 1 0 1 0 2 0V5a1 1 0 1 0-2 0v3Zm0 3a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);