122 lines
5.5 KiB
TypeScript
122 lines
5.5 KiB
TypeScript
"use client";
|
|
|
|
import dynamic from "next/dynamic";
|
|
|
|
const AnimatedGridBackground = dynamic(() => import("./AnimatedGridBackground"), { ssr: false, loading: () => null });
|
|
const CanvasRevealBackground = dynamic(() => import("./CanvasRevealBackground"), { ssr: false, loading: () => null });
|
|
const CellWaveBackground = dynamic(() => import("./CellWaveBackground"), { ssr: false, loading: () => null });
|
|
const DownwardRaysBackground = dynamic(() => import("./DownwardRaysBackground"), { ssr: false, loading: () => null });
|
|
const GlowingOrbBackground = dynamic(() => import("./GlowingOrbBackground"), { ssr: false, loading: () => null });
|
|
const GlowingOrbSparklesBackground = dynamic(() => import("./GlowingOrbSparklesBackground"), { ssr: false, loading: () => null });
|
|
const GradientBarsBackground = dynamic(() => import("./GradientBarsBackground"), { ssr: false, loading: () => null });
|
|
const RadialGradientBackground = dynamic(() => import("./RadialGradientBackground"), { ssr: false, loading: () => null });
|
|
const RotatedRaysBackground = dynamic(() => import("./RotatedRaysBackground"), { ssr: false, loading: () => null });
|
|
const RotatingGradientBackground = dynamic(() => import("./RotatingGradientBackground"), { ssr: false, loading: () => null });
|
|
const SparklesGradientBackground = dynamic(() => import("./SparklesGradientBackground"), { ssr: false, loading: () => null });
|
|
|
|
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)} />;
|
|
};
|
|
|
|
|
|
export default HeroBackgrounds;
|