<iman> add highligth button whatsapp

2 files changed, 50 insertions, 1 deletions

diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index a4f3a856..62c74e3c 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -1,12 +1,13 @@
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } 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 styles from './BasicLayout.module.css'; // Import modul CSS
 
 const AnimationLayout = dynamic(() => import('./AnimationLayout'), {
   ssr: false,
@@ -19,10 +20,14 @@ const BasicLayout = ({ children }) => {
   const [templateWA, setTemplateWA] = useState(null);
   const [payloadWA, setPayloadWa] = useState(null);
   const [urlPath, setUrlPath] = useState(null);
+  const [highlight, setHighlight] = useState(false);
+  const [buttonPosition, setButtonPosition] = useState(null);
 
   const router = useRouter();
+  const buttonRef = useRef(null);
 
   const { product } = useProductContext();
+
   useEffect(() => {
     if (
       router.pathname === '/shop/product/[slug]' ||
@@ -39,6 +44,25 @@ const BasicLayout = ({ children }) => {
     }
   }, [product, router]);
 
+  useEffect(() => {
+    const handleMouseOut = (event) => {
+      const rect = buttonRef.current.getBoundingClientRect();
+      console.log("rect",rect)
+      if (event.clientY <= 0) {
+        console.log("ini pindah")
+        setHighlight(true);
+      } else {
+        setHighlight(false);
+      }
+    };
+
+    window.addEventListener('mouseout', handleMouseOut);
+
+    return () => {
+      window.removeEventListener('mouseout', handleMouseOut);
+    };
+  }, []);
+
   const recordActivity = async (pathname) => {
     const ONLY_ON_PATH = false;
     const recordedPath = [];
@@ -63,12 +87,24 @@ const BasicLayout = ({ children }) => {
       <Navbar />
       <AnimationLayout>
         {children}
+        {highlight && buttonPosition && (
+          <div
+            className={styles['overlay-highlight']}
+            style={{
+              '--button-x': `${buttonPosition.x + buttonPosition.width / 2}px`,
+              '--button-y': `${buttonPosition.y + buttonPosition.height / 2}px`,
+              '--button-radius': `${Math.max(buttonPosition.width, buttonPosition.height) / 2}px`
+            }}
+            onAnimationEnd={() => setHighlight(false)}
+          />
+        )}
         <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'
+            ref={buttonRef}
           >
             <Image
               src='/images/socials/WHATSAPP.svg'
diff --git a/src/core/components/layouts/BasicLayout.module.css b/src/core/components/layouts/BasicLayout.module.css
new file mode 100644
index 00000000..b89aca9f
--- /dev/null
+++ b/src/core/components/layouts/BasicLayout.module.css
@@ -0,0 +1,13 @@
+.overlay-highlight {
+    @apply fixed top-0 left-0 w-full h-full bg-[#4FB84A]/50 z-[900];
+    animation: closeOverlay 10s forwards;
+  }
+  
+  @keyframes closeOverlay {
+    from {
+      clip-path: circle(100%);
+    }
+    to {
+      clip-path: circle(var(--button-radius) at var(--button-x) var(--button-y));
+    }
+  }