Initial commit with 🏗️ create-eth @ 2.0.4

packages/nextjs/components/TooltipInfo.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
+
+interface TooltipInfoProps {
+  top?: number;
+  right?: number;
+  infoText: string;
+  className?: string;
+}
+
+// Note: The relative positioning is required for the tooltip to work.
+const TooltipInfo: React.FC<TooltipInfoProps> = ({ top, right, infoText, className = "" }) => {
+  const baseClasses = "tooltip tooltip-secondary font-normal [--radius-field:0.25rem]";
+  const tooltipClasses = className ? `${baseClasses} ${className}` : `${baseClasses} tooltip-right`;
+
+  if (top !== undefined && right !== undefined) {
+    return (
+      <span className="absolute z-10" style={{ top: `${top * 0.25}rem`, right: `${right * 0.25}rem` }}>
+        <div className={tooltipClasses} data-tip={infoText}>
+          <QuestionMarkCircleIcon className="h-5 w-5 m-1" />
+        </div>
+      </span>
+    );
+  }
+
+  return (
+    <div className={tooltipClasses} data-tip={infoText}>
+      <QuestionMarkCircleIcon className="h-5 w-5 m-1" />
+    </div>
+  );
+};
+
+export default TooltipInfo;