From 4e634a9d3556e94c7ce0729ef9f15b73495b2e28 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 15 Mar 2023 14:52:16 +0700
Subject: product detail desktop

---
 src/core/components/layouts/AnimationLayout.jsx | 32 +++++++++++++++++--------
 1 file changed, 22 insertions(+), 10 deletions(-)

(limited to 'src/core/components/layouts/AnimationLayout.jsx')

diff --git a/src/core/components/layouts/AnimationLayout.jsx b/src/core/components/layouts/AnimationLayout.jsx
index c4dee606..7acf21dc 100644
--- a/src/core/components/layouts/AnimationLayout.jsx
+++ b/src/core/components/layouts/AnimationLayout.jsx
@@ -1,20 +1,32 @@
+import useDevice from '@/core/hooks/useDevice'
 import { motion } from 'framer-motion'
 
 const AnimationLayout = ({ children, ...props }) => {
-  const transition = {
-    ease: 'easeIn',
-    duration: 0.2
+  const { isMobile } = useDevice()
+
+  const initialConfig = {
+    opacity: 0,
+    x: 0,
+    y: 0
+  }
+
+  const animateConfig = {
+    opacity: 1,
+    x: 0,
+    y: 0,
+    transition: { duration: 0.2, delay: 0.2, ease: 'easeInOut' }
+  }
+
+  const exitConfig = {
+    opacity: 0,
+    x: isMobile ? 30 : 0,
+    y: 0,
+    transition: { duration: 0.2, ease: 'easeInOut' }
   }
 
   return (
     children && (
-      <motion.main
-        initial={{ opacity: 0, x: 0, y: 0 }}
-        animate={{ opacity: 1, x: 0, y: 0 }}
-        exit={{ opacity: 0, x: 30, y: 0 }}
-        transition={transition}
-        {...props}
-      >
+      <motion.main initial={initialConfig} animate={animateConfig} exit={exitConfig} {...props}>
         {children}
       </motion.main>
     )
-- 
cgit v1.2.3