@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/splash-screen/SplashScreen.tsx

@@ -0,0 +1,195 @@
+import { Card } from "../components/ui/card";
+import { Logo, MagicEditIcon } from "../editor/ui/Icons";
+import { useEditContext } from "../editor/client/editContext";
+import { useEffect, useState } from "react";
+import { getWizards } from "../page-wizard/service";
+import { Wizard } from "../page-wizard/PageWizard";
+import { ActionButton } from "../components/ActionButton";
+import { RecentPages } from "./RecentPages";
+import { Spinner } from "../editor/ui/Spinner";
+import { PanelsTopLeft } from "lucide-react";
+
+export function SplashScreen() {
+  const editContext = useEditContext();
+  const [demoId, setDemoId] = useState<string | null>(null);
+  const [demoWizard, setDemoWizard] = useState<Wizard | null>(null);
+
+  useEffect(() => {
+    // Check for demoId in URL parameters
+    if (typeof window !== "undefined") {
+      const searchParams = new URLSearchParams(window.location.search);
+      const demoIdParam = searchParams.get("demoId");
+      setDemoId(demoIdParam);
+    }
+  }, []);
+
+  useEffect(() => {
+    const loadDemoData = async () => {
+      if (!demoId || !editContext) return;
+
+      try {
+        // Get available wizards for this parent item
+        const wizards = await getWizards({
+          id: demoId,
+          language: "en",
+          version: 0,
+        });
+        if (wizards && wizards.length > 0) {
+          setDemoWizard(wizards[0] || null); // Choose the first available wizard
+        }
+      } catch (error) {
+        console.error("Failed to load demo data:", error);
+      }
+    };
+
+    loadDemoData();
+  }, [demoId]);
+
+  const launchDemoWizard = () => {
+    if (!demoWizard || !demoId || !editContext) return;
+
+    editContext.executeCommand({
+      command: editContext.configuration.pageWizard.startWizardCommand,
+      data: {
+        wizard: demoWizard,
+        item: {
+          id: demoId,
+          language: "en",
+          version: 0,
+        },
+      },
+    });
+  };
+
+  if (demoId && !demoWizard)
+    return (
+      <div className="relative flex h-full w-full bg-gray-100 md:items-center md:justify-center">
+        <Spinner />
+        <div className="bg-wizard absolute inset-0" />
+      </div>
+    );
+
+  if (demoWizard) {
+    return (
+      <>
+        <div className="relative flex h-full w-full bg-gray-100 md:items-center md:justify-center">
+          <div className="mt-2 flex flex-col gap-6 p-4 md:mt-6 md:gap-12">
+            <div className="z-10">
+              <h1 className="text-xl font-semibold">Your global website</h1>
+              <div className="text-sm text-gray-500">
+                Add a new page or manage existing ones
+              </div>
+            </div>
+
+            <div className="z-10 flex flex-1 flex-col items-stretch gap-4 md:max-w-screen-xl md:flex-row">
+              <div className="flex flex-1 flex-col gap-4">
+                <div className="flex-1 flex-col gap-7 rounded-lg bg-white p-6">
+                  <div className="flex flex-col gap-4 md:flex-row">
+                    <div className="flex flex-col gap-2">
+                      <h1 className="text-normal flex items-center gap-2 font-bold">
+                        <Logo className="h-5" /> Create content like magic
+                      </h1>
+                      <h2 className="mb-2 text-xs text-gray-500">
+                        Stunning business pages in no time. Just describe your
+                        idea and let the AI-wizard do the magic.
+                      </h2>
+                    </div>
+
+                    <ActionButton onClick={launchDemoWizard}>
+                      Launch wizard <MagicEditIcon />
+                    </ActionButton>
+                  </div>
+                  <div className="bg-wizard-demo mt-3 aspect-[1.75] w-full rounded-lg"></div>
+                </div>
+                <Card
+                  title="Experience AI-Powered Editing"
+                  description="Try our intelligent WYSIWYG editor with a ready-to-go sample page"
+                  icon={<PanelsTopLeft />}
+                  className="flex-1"
+                >
+                  <div className="flex flex-col gap-4 text-sm text-gray-500">
+                    Dive into the future of content editing with our
+                    AI-integrated editor.
+                    <ActionButton
+                      onClick={() => {
+                        editContext?.loadItem({
+                          id: demoId!,
+                          language: "en",
+                          version: 0,
+                        });
+                      }}
+                      className="w-1/3"
+                    >
+                      Try AI Editor
+                    </ActionButton>
+                  </div>
+                </Card>
+              </div>
+              <div className="flex-1">
+                <RecentPages />
+              </div>
+            </div>
+          </div>
+          <div className="bg-wizard absolute inset-0" />
+        </div>
+      </>
+    );
+  } else {
+    return (
+      <div className="flex h-full w-full gap-2 bg-gray-100 md:items-center md:justify-center">
+        <div className="z-10 flex flex-1 flex-col items-stretch gap-4 p-4 md:min-h-[40vh] md:max-w-screen-xl md:flex-row">
+          <Card
+            title="Welcome to the Editor Without A Name"
+            description="The easiest way to create and manage your content"
+            icon={<Logo />}
+            className="flex-1"
+          >
+            <div className="flex flex-col gap-4 text-sm text-gray-500">
+              Ai Workbench is an editor for your favorite content management
+              system. It allows you to create and manage your content in a
+              simple and intuitive way.
+              <div className="flex flex-col gap-4">
+                <ActionButton
+                  onClick={() => editContext?.switchView("new-page")}
+                >
+                  Create new page
+                </ActionButton>
+                <ActionButton
+                  onClick={() => editContext?.switchView("open-page")}
+                >
+                  Open existing page
+                </ActionButton>
+                {/* <ActionButton onClick={() => editContext?.startTour()}>
+                  Take tour <MagicEditIcon />
+                </ActionButton> */}
+                <ActionButton
+                  onClick={() => {
+                    window.open(
+                      "/sitecore/shell/sitecore/client/Applications/Launchpad",
+                      "_blank",
+                    );
+                  }}
+                >
+                  Open Sitecore Launchpad
+                </ActionButton>
+
+                <ActionButton
+                  className="mt-6 md:mt-18"
+                  onClick={() => {
+                    editContext?.switchView("page-editor");
+                  }}
+                >
+                  Return to editor
+                </ActionButton>
+              </div>
+            </div>
+          </Card>
+          <div className="flex-1">
+            <RecentPages />
+          </div>
+        </div>
+        <div className="bg-wizard absolute inset-0" />
+      </div>
+    );
+  }
+}