Normalize components declarations to export default named functions

components/magicui/dot-pattern.tsx

@@ -12,17 +12,18 @@ interface DotPatternProps {
   className?: string;
   [key: string]: any;
 }
-export function DotPattern({
-  width = 16,
-  height = 16,
-  x = 0,
-  y = 0,
-  cx = 1,
-  cy = 1,
-  cr = 1,
-  className,
-  ...props
-}: DotPatternProps) {
+const DotPattern = (props: DotPatternProps) => {
+  const {
+    width = 16,
+    height = 16,
+    x = 0,
+    y = 0,
+    cx = 1,
+    cy = 1,
+    cr = 1,
+    className,
+    ...restProps
+  } = props;
   const id = useId();
 
   return (
@@ -32,7 +33,7 @@ export function DotPattern({
         "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/40",
         className
       )}
-      {...props}
+      {...restProps}
     >
       <defs>
         <pattern
@@ -50,6 +51,8 @@ export function DotPattern({
       <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
     </svg>
   );
-}
+};
+
+export default DotPattern;
 
 export default DotPattern;

lib/hooks/use-toast.ts

@@ -169,24 +169,26 @@ function toast({ ...props }: Toast) {
   }
 }
 
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
+const useToast = () => {
+  const [state, setState] = React.useState<State>(memoryState);
 
   React.useEffect(() => {
-    listeners.push(setState)
+    listeners.push(setState);
     return () => {
-      const index = listeners.indexOf(setState)
+      const index = listeners.indexOf(setState);
       if (index > -1) {
-        listeners.splice(index, 1)
+        listeners.splice(index, 1);
       }
-    }
-  }, [state])
+    };
+  }, [state]);
 
   return {
     ...state,
     toast,
     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
-}
+  };
+};
+
+export default useToast;
 
 export { useToast, toast }