alpha wip

apps/website/components/alpha/FeatureLimitationTooltip.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+interface FeatureLimitationTooltipProps {
+  message: string;
+  children: React.ReactNode;
+}
+
+export default function FeatureLimitationTooltip({ message, children }: FeatureLimitationTooltipProps) {
+  return (
+    <div className="group relative inline-block">
+      {children}
+      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-sm text-gray-300 whitespace-nowrap opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none z-50">
+        <div className="flex items-center gap-2">
+          <svg className="w-4 h-4 text-primary-blue flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <span>{message}</span>
+        </div>
+        <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-iron-gray" />
+      </div>
+    </div>
+  );
+}