l4r-s/confetti.tsx

## confetti.tsx
"use client";

import Confetti from "react-confetti";
import { useState, useEffect } from "react";

export default function ConfettiComponent() {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
  const [isSafari, setIsSafari] = useState(false);

  useEffect(() => {
    const updateDimensions = () => {
      setDimensions({
        width: window.innerWidth,
        height: document.documentElement.scrollHeight,
      });
    };

    // Only set dimensions on client side
    if (typeof window !== "undefined") {
      updateDimensions();
      window.addEventListener("resize", updateDimensions);

      // Detect if the browser is Safari
      const userAgent = window.navigator.userAgent;
      const isSafariBrowser = /^((?!chrome|android).)*safari/i.test(userAgent);
      setIsSafari(isSafariBrowser);
    }

    // Cleanup event listener on component unmount
    return () => {
      if (typeof window !== "undefined") {
        window.removeEventListener("resize", updateDimensions);
      }
    };
  }, []);

  return (
    <div style={{ position: "fixed", zIndex: 1 }}>
      <Confetti
        width={dimensions.width}
        height={dimensions.height}
        wind={isSafari ? 0.1 : 0.02}
        gravity={isSafari ? 0.1 : 0.04}
        numberOfPieces={30}
        recycle={true}
      />
    </div>
  );
}

## layout.tsx
import ConfettiComponent from "./_components/confett";

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div>
          <ConfettiComponent />
          <div style={{ position: "relative", zIndex: 10 }}>
            <div className="min-h-screen">
              {children}
            </div>
          </div>
        </div>
      </body>
    </html>
  );
}

## page.tsx
export default function Home() {
  return (
    <div className="container mx-auto px-4 py-8 max-w-3xl">
      <h1 className="text-3xl font-bold text-center text-gray-800 mb-8">Welcome to the amazing Confetti Sparkling!</h1>
    </div>
  );
}
	"use client";

	import Confetti from "react-confetti";
	import { useState, useEffect } from "react";

	export default function ConfettiComponent() {
	const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
	const [isSafari, setIsSafari] = useState(false);

	useEffect(() => {
	const updateDimensions = () => {
	setDimensions({
	width: window.innerWidth,
	height: document.documentElement.scrollHeight,
	});
	};

	// Only set dimensions on client side
	if (typeof window !== "undefined") {
	updateDimensions();
	window.addEventListener("resize", updateDimensions);

	// Detect if the browser is Safari
	const userAgent = window.navigator.userAgent;
	const isSafariBrowser = /^((?!chrome\|android).)*safari/i.test(userAgent);
	setIsSafari(isSafariBrowser);
	}

	// Cleanup event listener on component unmount
	return () => {
	if (typeof window !== "undefined") {
	window.removeEventListener("resize", updateDimensions);
	}
	};
	}, []);

	return (
	<div style={{ position: "fixed", zIndex: 1 }}>
	<Confetti
	width={dimensions.width}
	height={dimensions.height}
	wind={isSafari ? 0.1 : 0.02}
	gravity={isSafari ? 0.1 : 0.04}
	numberOfPieces={30}
	recycle={true}
	/>
	</div>
	);
	}
	import ConfettiComponent from "./_components/confett";

	const inter = Inter({ subsets: ["latin"] });

	export default function RootLayout({
	children,
	}: Readonly<{
	children: React.ReactNode;
	}>) {
	return (
	<html lang="en">
	<body className={inter.className}>
	<div>
	<ConfettiComponent />
	<div style={{ position: "relative", zIndex: 10 }}>
	<div className="min-h-screen">
	{children}
	</div>
	</div>
	</div>
	</body>
	</html>
	);
	}
	export default function Home() {
	return (
	<div className="container mx-auto px-4 py-8 max-w-3xl">
	<h1 className="text-3xl font-bold text-center text-gray-800 mb-8">Welcome to the amazing Confetti Sparkling!</h1>
	</div>
	);
	}