summaryrefslogtreecommitdiff
path: root/src/core/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/core/components')
-rw-r--r--src/core/components/elements/Footer/BasicFooter.jsx2
-rw-r--r--src/core/components/elements/Footer/SimpleFooter.jsx2
-rw-r--r--src/core/components/elements/Navbar/NavbarDesktop.jsx42
-rw-r--r--src/core/components/elements/Navbar/TopBanner.jsx53
-rw-r--r--src/core/components/layouts/BasicLayout.jsx41
5 files changed, 85 insertions, 55 deletions
diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 4688b15b..05dc4d8c 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -264,7 +264,7 @@ const InformationCenter = () => (
<li className='text-gray_r-12/80 flex items-center'>
<PhoneArrowUpRightIcon className='w-[18px] mr-2' />
<a href='tel:02129338828' target='_blank' rel='noreferrer'>
- (021) 2933-8828
+ (021) 29338828
</a>
</li>
<li className='text-gray_r-12/80 flex items-center'>
diff --git a/src/core/components/elements/Footer/SimpleFooter.jsx b/src/core/components/elements/Footer/SimpleFooter.jsx
index 371b1652..1f5e13e7 100644
--- a/src/core/components/elements/Footer/SimpleFooter.jsx
+++ b/src/core/components/elements/Footer/SimpleFooter.jsx
@@ -13,7 +13,7 @@ const SimpleFooter = () => (
<ul className='flex flex-col gap-y-2'>
<li className='text-gray_r-12/80 flex items-center'>
<PhoneArrowUpRightIcon className='w-[18px] mr-2' />
- <a href='tel:02129338828'>(021) 2933-8828 / 29</a>
+ <a href='tel:02129338828'>(021) 29338828</a>
</li>
<li className='text-gray_r-12/80 flex items-center'>
<EnvelopeIcon className='w-[18px] mr-2' />
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index eebfbcd5..fa3df5bf 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -5,34 +5,28 @@ import { createSlug } from '@/core/utils/slug';
import whatsappUrl from '@/core/utils/whatsappUrl';
import IndoteknikLogo from '@/images/logo.png';
import Cardheader from '@/lib/cart/components/Cartheader';
-import Quotationheader from '../../../../../src/lib/quotation/components/Quotationheader.jsx';
import Category from '@/lib/category/components/Category';
-import { useProductCartContext } from '@/contexts/ProductCartContext';
+import useTransactions from '@/lib/transaction/hooks/useTransactions';
+import {
+ Menu,
+ MenuButton,
+ MenuItem,
+ MenuList,
+ useDisclosure
+} from '@chakra-ui/react';
import {
ChevronDownIcon,
- DocumentCheckIcon,
- HeartIcon,
- ArrowUpRightIcon,
+ HeartIcon
} from '@heroicons/react/24/outline';
import dynamic from 'next/dynamic';
-import Image from 'next/image';
+import { default as Image, default as NextImage } from 'next/image';
import { useRouter } from 'next/router';
import { useCallback, useEffect, useState } from 'react';
+import { useCartStore } from '~/modules/cart/stores/useCartStore';
+import Quotationheader from '../../../../../src/lib/quotation/components/Quotationheader.jsx';
import DesktopView from '../../views/DesktopView';
import Link from '../Link/Link';
import NavbarUserDropdown from './NavbarUserDropdown';
-import NextImage from 'next/image';
-import {
- Button,
- Menu,
- MenuButton,
- MenuItem,
- MenuList,
- useDisclosure,
-} from '@chakra-ui/react';
-import style from './style/NavbarDesktop.module.css';
-import useTransactions from '@/lib/transaction/hooks/useTransactions';
-import { useCartStore } from '~/modules/cart/stores/useCartStore';
const Search = dynamic(() => import('./Search'), { ssr: false });
const TopBanner = dynamic(() => import('./TopBanner'), { ssr: false });
@@ -397,7 +391,7 @@ const SocialMedias = () => (
>
<NextImage
src='/images/socials/youtube.webp'
- alt='Youtube - Indoteknik.com'
+ // alt='Youtube - Indoteknik.com'
width={24}
height={24}
/>
@@ -409,7 +403,7 @@ const SocialMedias = () => (
>
<NextImage
src='/images/socials/tiktok.png'
- alt='TikTok - Indoteknik.com'
+ // alt='TikTok - Indoteknik.com'
width={24}
height={24}
/>
@@ -429,7 +423,7 @@ const SocialMedias = () => (
>
<NextImage
src='/images/socials/Facebook.png'
- alt='Facebook - Indoteknik.com'
+ // alt='Facebook - Indoteknik.com'
width={24}
height={24}
/>
@@ -441,7 +435,7 @@ const SocialMedias = () => (
>
<NextImage
src='/images/socials/Instagram.png'
- alt='Instagram - Indoteknik.com'
+ // alt='Instagram - Indoteknik.com'
width={24}
height={24}
/>
@@ -453,7 +447,7 @@ const SocialMedias = () => (
>
<NextImage
src='/images/socials/Linkedin.png'
- alt='Linkedin - Indoteknik.com'
+ // alt='Linkedin - Indoteknik.com'
width={24}
height={24}
/>
@@ -465,7 +459,7 @@ const SocialMedias = () => (
>
<NextImage
src='/images/socials/g_maps.png'
- alt='Maps - Indoteknik.com'
+ // alt='Maps - Indoteknik.com'
width={24}
height={24}
/>
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index f438ae67..709495ce 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -1,22 +1,37 @@
import Image from 'next/image';
-import { useQuery } from 'react-query';import useDevice from '@/core/hooks/useDevice'
+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';
+import { useEffect, useState } from 'react';
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 [topBanner, setTopBanner] = useState([]);
+ const { isDesktop, isMobile } = useDevice();
+
+ useEffect(() => {
+ const fetchData = async () => {
+ const res = await fetch(`/api/hero-banner?type=top-banner`);
+ const { data } = await res.json();
+ if (data) {
+ setTopBanner(data);
+ }
+ };
+
+ fetchData();
+ }, []);
+
+ // 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 hasData = topBanner.data?.length > 0;
- const data = topBanner.data?.[0] || null;
+ const hasData = topBanner?.length > 0;
+ const data = topBanner?.[0] || null;
useEffect(() => {
if (hasData) {
@@ -31,17 +46,15 @@ const TopBanner = ({ onLoad = () => {} }) => {
duration='700ms'
delay='300ms'
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>
+ 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 c4674344..1b62bf05 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -8,6 +8,7 @@ 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
+import useDevice from '@/core/hooks/useDevice';
const AnimationLayout = dynamic(() => import('./AnimationLayout'), {
ssr: false,
@@ -23,6 +24,9 @@ const BasicLayout = ({ children }) => {
const [highlight, setHighlight] = useState(false);
const [buttonPosition, setButtonPosition] = useState(null);
const [wobble, setWobble] = useState(false);
+ const [isProductPage, setIsProductPage] = useState(false);
+
+ const { isDesktop, isMobile } = useDevice();
const router = useRouter();
const buttonRef = useRef(null);
@@ -43,13 +47,16 @@ const BasicLayout = ({ children }) => {
setUrlPath(router.asPath);
}
+ if (router.pathname.includes('/shop/product/')) {
+ setIsProductPage(true);
+ }
}, [product, router]);
useEffect(() => {
const handleMouseOut = (event) => {
const rect = buttonRef.current.getBoundingClientRect();
if (event.clientY <= 0) {
- setButtonPosition(rect)
+ setButtonPosition(rect);
setHighlight(true);
} else {
setHighlight(false);
@@ -92,13 +99,15 @@ const BasicLayout = ({ children }) => {
return (
<>
- {highlight && buttonPosition && (
+ {highlight && buttonPosition && (
<div
className={styles['overlay-highlight']}
style={{
- '--button-x': `${buttonPosition.x + buttonPosition.width / 2}px`,
+ '--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`
+ '--button-radius': `${
+ Math.max(buttonPosition.width, buttonPosition.height) / 2
+ }px`,
}}
onAnimationEnd={() => setHighlight(false)}
/>
@@ -106,11 +115,25 @@ const BasicLayout = ({ children }) => {
<Navbar />
<AnimationLayout>
{children}
- <div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'>
- <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
+ <div
+ className={`fixed ${
+ isMobile && isProductPage ? 'bottom-40' : 'bottom-16'
+ } right-4 sm:bottom-14 sm:right-10 z-50`}
+ >
+ <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)}
+ >
+ {isDesktop && 'Whatsapp'}
</span>
</a>
<a
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 06:33:42 +0000