Initial commit

src/components/background/HeroBackgrounds.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { memo } from "react";
+import AnimatedGridBackground from "./AnimatedGridBackground";
+import CanvasRevealBackground from "./CanvasRevealBackground";
+import CellWaveBackground from "./CellWaveBackground";
+import DownwardRaysBackground from "./DownwardRaysBackground";
+import GlowingOrbBackground from "./GlowingOrbBackground";
+import GlowingOrbSparklesBackground from "./GlowingOrbSparklesBackground";
+import GradientBarsBackground from "./GradientBarsBackground";
+import RadialGradientBackground from "./RadialGradientBackground";
+import RotatedRaysBackground from "./RotatedRaysBackground";
+import RotatingGradientBackground from "./RotatingGradientBackground";
+import SparklesGradientBackground from "./SparklesGradientBackground";
+
+export type HeroBackgroundVariant =
+  | "plain"
+  | "animated-grid"
+  | "canvas-reveal"
+  | "cell-wave"
+  | "downward-rays-animated"
+  | "downward-rays-animated-grid"
+  | "downward-rays-static"
+  | "downward-rays-static-grid"
+  | "glowing-orb"
+  | "glowing-orb-sparkles"
+  | "gradient-bars"
+  | "radial-gradient"
+  | "rotated-rays-animated"
+  | "rotated-rays-animated-grid"
+  | "rotated-rays-static"
+  | "rotated-rays-static-grid"
+  | "rotating-gradient"
+  | "sparkles-gradient";
+
+type AnimatedGridProps = React.ComponentProps<typeof AnimatedGridBackground>;
+type CanvasRevealProps = React.ComponentProps<typeof CanvasRevealBackground>;
+type CellWaveProps = React.ComponentProps<typeof CellWaveBackground>;
+type GlowingOrbProps = React.ComponentProps<typeof GlowingOrbBackground>;
+type GlowingOrbSparklesProps = React.ComponentProps<typeof GlowingOrbSparklesBackground>;
+type GradientBarsProps = React.ComponentProps<typeof GradientBarsBackground>;
+type RadialGradientProps = React.ComponentProps<typeof RadialGradientBackground>;
+type RotatingGradientProps = React.ComponentProps<typeof RotatingGradientBackground>;
+type SparklesGradientProps = React.ComponentProps<typeof SparklesGradientBackground>;
+
+export type HeroBackgroundVariantProps =
+  | { variant: "plain" }
+  | ({ variant: "animated-grid" } & AnimatedGridProps)
+  | ({ variant: "canvas-reveal" } & CanvasRevealProps)
+  | ({ variant: "cell-wave" } & CellWaveProps)
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | ({ variant: "glowing-orb" } & GlowingOrbProps)
+  | ({ variant: "glowing-orb-sparkles" } & GlowingOrbSparklesProps)
+  | ({ variant: "gradient-bars" } & GradientBarsProps)
+  | ({ variant: "radial-gradient" } & RadialGradientProps)
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | ({ variant: "rotating-gradient" } & RotatingGradientProps)
+  | ({ variant: "sparkles-gradient" } & SparklesGradientProps);
+
+const heroBackgroundComponents = {
+  "animated-grid": AnimatedGridBackground,
+  "canvas-reveal": CanvasRevealBackground,
+  "cell-wave": CellWaveBackground,
+  "downward-rays": DownwardRaysBackground,
+  "glowing-orb": GlowingOrbBackground,
+  "glowing-orb-sparkles": GlowingOrbSparklesBackground,
+  "gradient-bars": GradientBarsBackground,
+  "radial-gradient": RadialGradientBackground,
+  "rotated-rays": RotatedRaysBackground,
+  "rotating-gradient": RotatingGradientBackground,
+  "sparkles-gradient": SparklesGradientBackground,
+} as const;
+
+const HeroBackgrounds = (props: HeroBackgroundVariantProps) => {
+  if (props.variant === "plain") {
+    return null;
+  }
+
+  const { variant, ...restProps } = props;
+
+  // Handle rotated-rays preset variants
+  if (variant === "rotated-rays-animated") {
+    return <RotatedRaysBackground animated={true} showGrid={false} {...(restProps as any)} />;
+  }
+  if (variant === "rotated-rays-animated-grid") {
+    return <RotatedRaysBackground animated={true} showGrid={true} {...(restProps as any)} />;
+  }
+  if (variant === "rotated-rays-static") {
+    return <RotatedRaysBackground animated={false} showGrid={false} {...(restProps as any)} />;
+  }
+  if (variant === "rotated-rays-static-grid") {
+    return <RotatedRaysBackground animated={false} showGrid={true} {...(restProps as any)} />;
+  }
+
+  // Handle downward-rays preset variants
+  if (variant === "downward-rays-animated") {
+    return <DownwardRaysBackground animated={true} showGrid={false} {...(restProps as any)} />;
+  }
+  if (variant === "downward-rays-animated-grid") {
+    return <DownwardRaysBackground animated={true} showGrid={true} {...(restProps as any)} />;
+  }
+  if (variant === "downward-rays-static") {
+    return <DownwardRaysBackground animated={false} showGrid={false} {...(restProps as any)} />;
+  }
+  if (variant === "downward-rays-static-grid") {
+    return <DownwardRaysBackground animated={false} showGrid={true} {...(restProps as any)} />;
+  }
+
+  const BackgroundComponent = heroBackgroundComponents[variant];
+  return <BackgroundComponent {...(restProps as any)} />;
+};
+
+HeroBackgrounds.displayName = "HeroBackgrounds";
+
+export default memo(HeroBackgrounds);