ported schema builder

components/AnimatedPageContainer/index.css

@@ -0,0 +1,6 @@
+.page {
+  transition: 
+    transform 500ms,
+    opacity 300ms,
+    z-index 0ms 500ms
+}

components/AnimatedPageContainer/index.tsx

@@ -0,0 +1,46 @@
+import React, { FC, PropsWithChildren, ReactNode, useState } from "react";
+import "./index.css";
+
+interface IProps {
+  currentPage: number;
+}
+
+const AnimatedPageContainer: FC<PropsWithChildren<IProps>> = (
+  { children, currentPage },
+) => {
+  const [uuid] = useState(crypto.randomUUID());
+
+  const renderChild = (child: ReactNode, index: number) => {
+    const isActive = index === currentPage;
+    let position = "active";
+    switch ((index - currentPage) / Math.abs(index - currentPage)) {
+      case 1:
+        position = "right";
+        break;
+      case -1:
+        position = "left";
+        break;
+      default:
+        position = "active";
+    }
+
+    return (
+      <div
+        key={`page container ${uuid}: ${index}`}
+        data-active={isActive}
+        data-position={position}
+        className="data-[active=true]:opacity-100 data-[active=true]:static opacity-0 top-0 left-0 absolute page data-[position=left]:-translate-x-96 data-[position=right]:translate-x-96 translate-x-0"
+      >
+        {child}
+      </div>
+    );
+  };
+
+  return (
+    <div className="relative overflow-hidden p-2">
+      {React.Children.map(children, renderChild)}
+    </div>
+  );
+};
+
+export default AnimatedPageContainer;