test7

Author: AlexVOiceover

src/components/ui/popover.tsx

@@ -1,32 +1,37 @@
 'use client';
 
 import * as React from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+// Commenting out to test if this is causing the useLayoutEffect error
+// import * as PopoverPrimitive from '@radix-ui/react-popover';
 
 import { cn } from '@/lib/utils';
 
-const Popover = PopoverPrimitive.Root;
+// Creating mock components to replace Radix UI Popover
+const Popover: React.FC<{ children: React.ReactNode }> = ({ children }) => <>{children}</>;
+const PopoverTrigger: React.FC<{ children: React.ReactNode }> = ({ children }) => <>{children}</>;
+const PopoverContent: React.FC<{ children: React.ReactNode, className?: string }> = ({ children, className }) => 
+  <div className={cn('hidden', className)}>{children}</div>;
 
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      // onClick={() => console.log('PopoverContent clicked')}
-      className={cn(
-        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+// Commenting out the original implementation
+// const Popover = PopoverPrimitive.Root;
+// const PopoverTrigger = PopoverPrimitive.Trigger;
+// const PopoverContent = React.forwardRef<
+//   React.ElementRef<typeof PopoverPrimitive.Content>,
+//   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+// >(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+//   <PopoverPrimitive.Portal>
+//     <PopoverPrimitive.Content
+//       ref={ref}
+//       align={align}
+//       sideOffset={sideOffset}
+//       className={cn(
+//         'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+//         className
+//       )}
+//       {...props}
+//     />
+//   </PopoverPrimitive.Portal>
+// ));
+// PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverTrigger, PopoverContent };

src/components/ui/tooltip.tsx

@@ -1,30 +1,55 @@
 'use client';
 
 import * as React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+// Commenting out to test if this is causing the useLayoutEffect error
+// import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 import { cn } from '@/lib/utils';
 
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-      className
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+// Creating mock components to replace Radix UI Tooltip
+// This will disable all tooltips but will let us test if they're causing the error
+type TooltipProviderProps = { children: React.ReactNode };
+const TooltipProvider: React.FC<TooltipProviderProps> = ({ children }) => <>{children}</>;
+
+type TooltipProps = { children: React.ReactNode };
+const Tooltip: React.FC<TooltipProps> = ({ children }) => <>{children}</>;
+
+type TooltipTriggerProps = { children: React.ReactNode, asChild?: boolean };
+const TooltipTrigger: React.FC<TooltipTriggerProps> = ({ children }) => <>{children}</>;
+
+type TooltipContentProps = { 
+  children: React.ReactNode,
+  className?: string, 
+  sideOffset?: number,
+  [key: string]: any
+};
+const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(
+  ({ children, className, ...props }, ref) => (
+    <div ref={ref} className={cn('hidden', className)} {...props}>
+      {children}
+    </div>
+  )
+);
+TooltipContent.displayName = 'TooltipContent';
+
+// Commenting out the original implementation
+// const TooltipProvider = TooltipPrimitive.Provider;
+// const Tooltip = TooltipPrimitive.Root;
+// const TooltipTrigger = TooltipPrimitive.Trigger;
+// const TooltipContent = React.forwardRef<
+//   React.ElementRef<typeof TooltipPrimitive.Content>,
+//   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+// >(({ className, sideOffset = 4, ...props }, ref) => (
+//   <TooltipPrimitive.Content
+//     ref={ref}
+//     sideOffset={sideOffset}
+//     className={cn(
+//       'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+//       className
+//     )}
+//     {...props}
+//   />
+// ));
+// TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };