summaryrefslogtreecommitdiff
path: root/src/core
diff options
context:
space:
mode:
Diffstat (limited to 'src/core')
-rw-r--r--src/core/components/elements/Navbar/NavbarDesktop.jsx2
-rw-r--r--src/core/components/elements/Navbar/NavbarMobile.jsx4
-rw-r--r--src/core/components/elements/Navbar/TopBanner.jsx35
-rw-r--r--src/core/components/layouts/BasicLayout.jsx96
-rw-r--r--src/core/components/layouts/BasicLayout.module.css13
5 files changed, 107 insertions, 43 deletions
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 2ddf5efe..6c308f11 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -291,7 +291,7 @@ const NavbarDesktop = () => {
<Link
href='/shop/search?orderBy=stock'
className={`${
- router.asPath === '/shop/search?orderBy=stock' &&
+ router.asPath.includes('/shop/search?orderBy=stock') &&
'bg-gray_r-3'
} p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
target='_blank'
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index bcf45e0a..90314671 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -11,7 +11,7 @@ import Image from 'next/image';
import { useEffect, useState } from 'react';
import MobileView from '../../views/MobileView';
import Link from '../Link/Link';
-// import TopBanner from './TopBanner';
+import TopBanner from './TopBanner';
const Search = dynamic(() => import('./Search'));
@@ -39,7 +39,7 @@ const NavbarMobile = () => {
return (
<MobileView>
- {/* <TopBanner /> */}
+ <TopBanner />
<nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
<div className='flex justify-between items-center mb-2'>
<Link href='/'>
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index 7bc8fb6a..f438ae67 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -1,19 +1,20 @@
import Image from 'next/image';
-import { useQuery } from 'react-query';
-
+import { useQuery } from 'react-query';import useDevice from '@/core/hooks/useDevice'
import odooApi from '@/core/api/odooApi';
import SmoothRender from '~/components/ui/smooth-render';
import Link from '../Link/Link';
+import { background } from '@chakra-ui/react';
import { useEffect } from 'react';
-const TopBanner = ({ onLoad }) => {
+const TopBanner = ({ onLoad = () => {} }) => {
+ const { isDesktop, isMobile } = useDevice()
const topBanner = useQuery({
queryKey: 'topBanner',
queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'),
refetchOnWindowFocus: false,
});
- const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent';
+ // const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent';
const hasData = topBanner.data?.length > 0;
const data = topBanner.data?.[0] || null;
@@ -26,21 +27,21 @@ const TopBanner = ({ onLoad }) => {
return (
<SmoothRender
isLoaded={hasData}
- height='36px'
+ // height='36px'
duration='700ms'
delay='300ms'
- style={{ backgroundColor }}
- >
- <Link href={data?.url}>
- <Image
- src={data?.image}
- alt={data?.name}
- width={1440}
- height={40}
- className='object-cover object-center h-full mx-auto'
- />
- </Link>
- </SmoothRender>
+ className='h-auto'
+ >
+ <Link
+ href={data?.url}
+ className="block bg-cover bg-center h-3 md:h-6 lg:h-[36px]"
+ style={{
+ backgroundImage: `url('${data?.image}')`,
+ }}
+ >
+ </Link>
+
+ </SmoothRender>
);
};
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index a4f3a856..c4674344 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,15 @@ 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 [wobble, setWobble] = useState(false);
const router = useRouter();
+ const buttonRef = useRef(null);
const { product } = useProductContext();
+
useEffect(() => {
if (
router.pathname === '/shop/product/[slug]' ||
@@ -39,6 +45,32 @@ const BasicLayout = ({ children }) => {
}
}, [product, router]);
+ useEffect(() => {
+ const handleMouseOut = (event) => {
+ const rect = buttonRef.current.getBoundingClientRect();
+ if (event.clientY <= 0) {
+ setButtonPosition(rect)
+ setHighlight(true);
+ } else {
+ setHighlight(false);
+ }
+ };
+
+ window.addEventListener('mouseout', handleMouseOut);
+
+ return () => {
+ window.removeEventListener('mouseout', handleMouseOut);
+ };
+ }, []);
+
+ useEffect(() => {
+ if (highlight) {
+ // Set wobble animation after overlay highlight animation completes
+ const timer = setTimeout(() => setWobble(true), 1000); // Adjust timing if needed
+ return () => clearTimeout(timer);
+ }
+ }, [highlight]);
+
const recordActivity = async (pathname) => {
const ONLY_ON_PATH = false;
const recordedPath = [];
@@ -60,32 +92,50 @@ const BasicLayout = ({ children }) => {
return (
<>
+ {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)}
+ />
+ )}
<Navbar />
<AnimationLayout>
{children}
<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'
- >
- <Image
- 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'
- width={44}
- height={44}
- />
- <span className='text-white font-bold ml-1.5'>Whatsapp</span>
- </a>
+ <div className='flex flex-row items-center'>
+ <a href={whatsappUrl(templateWA, payloadWA, urlPath)} className='flex flex-row items-center' rel='noopener noreferrer' target='_blank'>
+ <span className={`text-green-300 text-lg font-bold mr-4 ${wobble ? 'animate-wobble' : ''}`} onAnimationEnd={() => setWobble(false)}>
+ Whatsapp
+ </span>
+ </a>
+ <a
+ href={whatsappUrl(templateWA, payloadWA, urlPath)}
+ className='elemen-whatsapp p-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'
+ alt='Whatsapp'
+ className='block sm:hidden'
+ width={36}
+ height={36}
+ />
+ <Image
+ src='/images/socials/WHATSAPP.svg'
+ alt='Whatsapp'
+ className='hidden sm:block'
+ width={44}
+ height={44}
+ />
+ </a>
+ </div>
</div>
</AnimationLayout>
<BasicFooter />
diff --git a/src/core/components/layouts/BasicLayout.module.css b/src/core/components/layouts/BasicLayout.module.css
new file mode 100644
index 00000000..4945c420
--- /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]/30 z-[900];
+ animation: closeOverlay 1s forwards;
+ }
+
+ @keyframes closeOverlay {
+ from {
+ clip-path: circle(100% at 50% 50%);
+ }
+ to {
+ clip-path: circle(var(--button-radius) at var(--button-x) var(--button-y));
+ }
+ }
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-09 00:37:30 +0000