feat: text-to-diagram (#7325)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

src/components/TTDDialog/TTDDialogTabs.tsx

@@ -0,0 +1,38 @@
+import * as RadixTabs from "@radix-ui/react-tabs";
+import { ReactNode } from "react";
+import { useExcalidrawSetAppState } from "../App";
+
+const TTDDialogTabs = ({
+  children,
+  tab,
+  ...rest
+}: {
+  children: ReactNode;
+  tab: string;
+}) => {
+  const setAppState = useExcalidrawSetAppState();
+
+  return (
+    <RadixTabs.Root
+      className="ttd-dialog-tabs-root"
+      value={tab}
+      onValueChange={(
+        // at least in test enviros, `tab` can be `undefined`
+        tab: string | undefined,
+      ) => {
+        if (tab) {
+          setAppState({
+            openDialog: { name: "ttd", tab },
+          });
+        }
+      }}
+      {...rest}
+    >
+      {children}
+    </RadixTabs.Root>
+  );
+};
+
+TTDDialogTabs.displayName = "TTDDialogTabs";
+
+export default TTDDialogTabs;