diff options
Diffstat (limited to 'src/core/components/layouts/BasicLayout.jsx')
| -rw-r--r-- | src/core/components/layouts/BasicLayout.jsx | 77 |
1 files changed, 13 insertions, 64 deletions
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index 4d995a3a..ba51022d 100644 --- a/src/core/components/layouts/BasicLayout.jsx +++ b/src/core/components/layouts/BasicLayout.jsx @@ -1,13 +1,12 @@ import dynamic from 'next/dynamic'; import Image from 'next/image'; import { useRouter } from 'next/router'; -import { useEffect, useState, useRef } from 'react'; +import { useEffect, useState } from 'react'; import { useProductContext } from '@/contexts/ProductContext'; import odooApi from '@/core/api/odooApi'; import whatsappUrl from '@/core/utils/whatsappUrl'; import Navbar from '../elements/Navbar/Navbar'; -import { AnimatePresence, motion } from 'framer-motion'; const AnimationLayout = dynamic(() => import('./AnimationLayout'), { ssr: false, @@ -20,10 +19,8 @@ const BasicLayout = ({ children }) => { const [templateWA, setTemplateWA] = useState(null); const [payloadWA, setPayloadWa] = useState(null); const [urlPath, setUrlPath] = useState(null); - const [isVisible, setIsVisible] = useState(true); const router = useRouter(); - const whatsappRef = useRef(null); const { product } = useProductContext(); useEffect(() => { @@ -61,81 +58,33 @@ const BasicLayout = ({ children }) => { recordActivity(router.pathname); }, [router.pathname]); - useEffect(() => { - const handleMouseOut = (event) => { - if (event.clientY <= 0) { - setIsVisible(false); - } else { - setIsVisible(true); - } - }; - - window.addEventListener('mouseout', handleMouseOut); - - return () => { - window.removeEventListener('mouseout', handleMouseOut); - }; - }, []); - - const getWhatsappPosition = () => { - if (whatsappRef.current) { - const rect = whatsappRef.current.getBoundingClientRect(); - return { - x: rect.left + 80, - y: rect.top + 40, - width: rect.width, - height: rect.height, - }; - } - return { x: 0, y: 0, width: 0, height: 0 }; - }; - return ( <> - {!isVisible && ( - <AnimatePresence> - <motion.div - initial={{ opacity: 1 }} - animate={[ - { opacity: 0.6, x: window.innerWidth - 100, y: window.innerHeight - 100, scale: 0.4 }, - { - opacity: 0, - x: getWhatsappPosition().x - window.innerWidth / 2, - y: getWhatsappPosition().y - window.innerHeight / 2, - scale: 0, - }, - ]} - exit={{ opacity: 1 }} - transition={{ duration: 1 }} - className={`fixed left-0 w-full h-full bg-[#4FB84A]/50 z-[90]`} - /> - </AnimatePresence> - )} <Navbar /> <AnimationLayout> {children} - <div ref={whatsappRef} className="fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50"> + <div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'> <a href={whatsappUrl(templateWA, payloadWA, urlPath)} - className="py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center" - rel="noopener noreferrer" - target="_blank" + className='py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center' + rel='noopener noreferrer' + target='_blank' > <Image - src="/images/socials/WHATSAPP.svg" - alt="Whatsapp" - className="block sm:hidden" + src='/images/socials/WHATSAPP.svg' + alt='Whatsapp' + className='block sm:hidden' width={36} height={36} /> <Image - src="/images/socials/WHATSAPP.svg" - alt="Whatsapp" - className="hidden sm:block" + src='/images/socials/WHATSAPP.svg' + alt='Whatsapp' + className='hidden sm:block' width={44} height={44} /> - <span className="text-white font-bold ml-1.5">Whatsapp</span> + <span className='text-white font-bold ml-1.5'>Whatsapp</span> </a> </div> </AnimationLayout> @@ -144,4 +93,4 @@ const BasicLayout = ({ children }) => { ); }; -export default BasicLayout; +export default BasicLayout;
\ No newline at end of file |
