ported schema builder

components/Poppables/help.tsx

@@ -0,0 +1,15 @@
+import { FC, PropsWithChildren } from "react";
+import { Poppable } from "@/lib/poppables/components/poppable";
+import { Icon } from "@/components/Icon";
+
+export const HelpPopper: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <Poppable
+      content={children}
+      preferredAlign="centered"
+      preferredEdge="bottom"
+    >
+      <Icon icon="help" className="svg-white w-4 h-4" />
+    </Poppable>
+  );
+};

components/Poppables/truncation.tsx

@@ -0,0 +1,14 @@
+import { FC, PropsWithChildren } from "react";
+import { Poppable } from "@/lib/poppables/components/poppable";
+
+export const Truncate: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <Poppable
+      content={children}
+      preferredAlign="centered"
+      preferredEdge="top"
+    >
+      <p className="truncate max-w-full underline">{children}</p>
+    </Poppable>
+  );
+};