Declare motion config outside component

WordPress · Apr 23, 2024 · c147d76 · c147d76
1 parent 23d5fd8
commit c147d76
Showing 1 changed file with 29 additions and 29 deletions.
diff --git a/packages/components/src/drop-zone/index.tsx b/packages/components/src/drop-zone/index.tsx
@@ -25,40 +25,40 @@ import {
 import type { DropType, DropZoneProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
-function DropIndicator( { label }: { label?: string } ) {
-	const disableMotion = useReducedMotion();
-	const backdrop = {
-		hidden: { opacity: 0 },
-		show: {
-			opacity: 1,
-			transition: {
-				type: 'tween',
-				duration: 0.2,
-				delay: 0,
-				delayChildren: 0.1,
-			},
+const backdrop = {
+	hidden: { opacity: 0 },
+	show: {
+		opacity: 1,
+		transition: {
+			type: 'tween',
+			duration: 0.2,
+			delay: 0,
+			delayChildren: 0.1,
 		},
-		exit: {
-			opacity: 0,
-			transition: {
-				duration: 0.2,
-				delayChildren: 0,
-			},
+	},
+	exit: {
+		opacity: 0,
+		transition: {
+			duration: 0.2,
+			delayChildren: 0,
 		},
-	};
+	},
+};
 
-	const foreground = {
-		hidden: { opacity: 0, scale: 0.9 },
-		show: {
-			opacity: 1,
-			scale: 1,
-			transition: {
-				duration: 0.1,
-			},
+const foreground = {
+	hidden: { opacity: 0, scale: 0.9 },
+	show: {
+		opacity: 1,
+		scale: 1,
+		transition: {
+			duration: 0.1,
 		},
-		exit: { opacity: 0, scale: 0.9 },
-	};
+	},
+	exit: { opacity: 0, scale: 0.9 },
+};
 
+function DropIndicator( { label }: { label?: string } ) {
+	const disableMotion = useReducedMotion();
 	const children = (
 		<motion.div
 			variants={ backdrop }