Merge pull request #469 from tianenpang/fix/confetti-position

fix(docs-landing): confetti position

apps/docs/content/landing/index.tsx

@@ -252,7 +252,7 @@ const MyComponent = () => {
       showPassword: !values.showPassword
     });
   };
-  
+
   const handleMouseDownPassword = (event) => {
     event.preventDefault();
   };
@@ -296,7 +296,7 @@ const darkTheme = createTheme({
   }
 })
 
-// 3. Apply dark theme 
+// 3. Apply dark theme
 // Entry point of your app
 const App = () => {
   return (
@@ -314,13 +314,9 @@ import confetti from 'canvas-confetti';
 
 const CustomButton = () => {
   const handleConfetti = () => {
-    confetti({
-      zIndex: 999,
-      particleCount: 100,
-      spread: 70,
-      origin: { x: 0.75, y: 0.8 }
-    });
+    confetti({...});
   };
+
   return (
     <Button
       auto
@@ -411,6 +407,6 @@ export default CustomButton;
     WebkitBackgroundClip: value,
     backgroundClip: value
   }),
-  
+
 }`
 };

apps/docs/src/components/templates/custom-button/index.tsx

@@ -3,14 +3,28 @@ import { Button } from '@nextui-org/react';
 import confetti from 'canvas-confetti';
 
 const CustomButton = () => {
-  const handleConfetti = () => {
+  const handleConfetti = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    const { currentTarget } = event;
+    const { clientWidth, clientHeight } = document.documentElement;
+    const {
+      y: targetY,
+      x: targetX,
+      width: targetWidth
+    } = currentTarget.getBoundingClientRect();
+    const targetCenterX = targetX + targetWidth / 2;
     confetti({
       zIndex: 999,
       particleCount: 100,
       spread: 70,
-      origin: { x: 0.75, y: 0.8 }
+      origin: {
+        y: targetY / clientHeight,
+        x: targetCenterX / clientWidth
+      }
     });
   };
+
   return (
     <Button
       auto

apps/docs/src/pages/_document.tsx

@@ -16,12 +16,7 @@ class MyDocument extends Document {
 
     return {
       ...initialProps,
-      styles: [
-        <>
-          {initialProps.styles}
-          {styledJSXStyles}
-        </>
-      ]
+      styles: React.Children.toArray([initialProps.styles, styledJSXStyles])
     };
   }
   render() {