sample deployment

Author: KayvanShah1

frontend/src/components/ui/animated-group.tsx

@@ -1,7 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 "use client";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { motion, Variants } from "motion/react";
-import React from "react";
+import { JSX } from "react/jsx-runtime";
 
 export type PresetType =
 	| "fade"
@@ -15,6 +16,8 @@ export type PresetType =
 	| "rotate"
 	| "swing";
 
+type As = keyof JSX.IntrinsicElements | React.ComponentType<any>;
+
 export type AnimatedGroupProps = {
 	children: ReactNode;
 	className?: string;
@@ -23,15 +26,13 @@ export type AnimatedGroupProps = {
 		item?: Variants;
 	};
 	preset?: PresetType;
-	as?: React.ElementType;
-	asChild?: React.ElementType;
+	as?: As;
+	asChild?: As;
 };
 
 const defaultContainerVariants: Variants = {
 	visible: {
-		transition: {
-			staggerChildren: 0.1,
-		},
+		transition: { staggerChildren: 0.1 },
 	},
 };
 
@@ -42,74 +43,59 @@ const defaultItemVariants: Variants = {
 
 const presetVariants: Record<PresetType, Variants> = {
 	fade: {},
-	slide: {
-		hidden: { y: 20 },
-		visible: { y: 0 },
-	},
-	scale: {
-		hidden: { scale: 0.8 },
-		visible: { scale: 1 },
-	},
-	blur: {
-		hidden: { filter: "blur(4px)" },
-		visible: { filter: "blur(0px)" },
-	},
+	slide: { hidden: { y: 20 }, visible: { y: 0 } },
+	scale: { hidden: { scale: 0.8 }, visible: { scale: 1 } },
+	blur: { hidden: { filter: "blur(4px)" }, visible: { filter: "blur(0px)" } },
 	"blur-slide": {
 		hidden: { filter: "blur(4px)", y: 20 },
 		visible: { filter: "blur(0px)", y: 0 },
 	},
 	zoom: {
 		hidden: { scale: 0.5 },
-		visible: {
-			scale: 1,
-			transition: { type: "spring", stiffness: 300, damping: 20 },
-		},
+		visible: { scale: 1, transition: { type: "spring", stiffness: 300, damping: 20 } },
 	},
 	flip: {
 		hidden: { rotateX: -90 },
-		visible: {
-			rotateX: 0,
-			transition: { type: "spring", stiffness: 300, damping: 20 },
-		},
+		visible: { rotateX: 0, transition: { type: "spring", stiffness: 300, damping: 20 } },
 	},
 	bounce: {
 		hidden: { y: -50 },
-		visible: {
-			y: 0,
-			transition: { type: "spring", stiffness: 400, damping: 10 },
-		},
+		visible: { y: 0, transition: { type: "spring", stiffness: 400, damping: 10 } },
 	},
 	rotate: {
 		hidden: { rotate: -180 },
-		visible: {
-			rotate: 0,
-			transition: { type: "spring", stiffness: 200, damping: 15 },
-		},
+		visible: { rotate: 0, transition: { type: "spring", stiffness: 200, damping: 15 } },
 	},
 	swing: {
 		hidden: { rotate: -10 },
-		visible: {
-			rotate: 0,
-			transition: { type: "spring", stiffness: 300, damping: 8 },
-		},
+		visible: { rotate: 0, transition: { type: "spring", stiffness: 300, damping: 8 } },
 	},
 };
 
-const addDefaultVariants = (variants: Variants) => ({
-	hidden: { ...defaultItemVariants.hidden, ...variants.hidden },
-	visible: { ...defaultItemVariants.visible, ...variants.visible },
+const addDefaultVariants = (variants?: Variants): Variants => ({
+	hidden: { ...(defaultItemVariants.hidden || {}), ...((variants?.hidden as object) || {}) },
+	visible: { ...(defaultItemVariants.visible || {}), ...((variants?.visible as object) || {}) },
 });
 
+// Prefer built-in motion tags (motion.div, motion.section, etc.)
+// and fall back to motion.create for custom components.
+function getMotionComponent(as: As) {
+	const maybeIntrinsic = (motion as any)[as as any];
+	if (maybeIntrinsic) return maybeIntrinsic as React.ComponentType<any>;
+	return (motion as any).create(as as string | React.ComponentType<any>) as React.ComponentType<any>;
+}
+
 function AnimatedGroup({ children, className, variants, preset, as = "div", asChild = "div" }: AnimatedGroupProps) {
 	const selectedVariants = {
 		item: addDefaultVariants(preset ? presetVariants[preset] : {}),
 		container: addDefaultVariants(defaultContainerVariants),
 	};
+
 	const containerVariants = variants?.container || selectedVariants.container;
 	const itemVariants = variants?.item || selectedVariants.item;
 
-	const MotionComponent = React.useMemo(() => motion.create(as as keyof JSX.IntrinsicElements), [as]);
-	const MotionChild = React.useMemo(() => motion.create(asChild as keyof JSX.IntrinsicElements), [asChild]);
+	const MotionComponent = React.useMemo(() => getMotionComponent(as), [as]);
+	const MotionChild = React.useMemo(() => getMotionComponent(asChild), [asChild]);
 
 	return (
 		<MotionComponent initial="hidden" animate="visible" variants={containerVariants} className={className}>