diff options
Diffstat (limited to 'src/core/components/elements')
6 files changed, 89 insertions, 26 deletions
diff --git a/src/core/components/elements/CountDown/CountDown2.jsx b/src/core/components/elements/CountDown/CountDown2.jsx index 61503d17..e85a22cb 100644 --- a/src/core/components/elements/CountDown/CountDown2.jsx +++ b/src/core/components/elements/CountDown/CountDown2.jsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react' const CountDown2 = ({ initialTime }) => { - const hours = Math.floor(initialTime / 3600) + /*const hours = Math.floor(initialTime / 3600) const minutes = Math.floor((initialTime % 3600) / 60) const seconds = initialTime % 60 @@ -25,24 +25,58 @@ const CountDown2 = ({ initialTime }) => { } }, 1000) return () => clearInterval(timer) + }, [timeLeft])*/ + + const days = Math.floor(initialTime / 86400) + const hours = Math.floor((initialTime % 86400) / 3600) + const minutes = Math.floor((initialTime % 3600) / 60) + const seconds = initialTime % 60 + + const [timeLeft, setTimeLeft] = useState({ + day: days, + hour: hours, + minute: minutes, + second: seconds + }) + + useEffect(() => { + const timer = setInterval(() => { + const totalSeconds = + timeLeft.day * 86400 + timeLeft.hour * 3600 + timeLeft.minute * 60 + timeLeft.second + const secondsLeft = totalSeconds - 1 + if (secondsLeft < 0) { + clearInterval(timer) + } else { + const days = Math.floor(secondsLeft / 86400) + const hours = Math.floor((secondsLeft % 86400) / 3600) + const minutes = Math.floor((secondsLeft % 3600) / 60) + const seconds = secondsLeft % 60 + setTimeLeft({ day: days, hour: hours, minute: minutes, second: seconds }) + } + }, 1000) + return () => clearInterval(timer) }, [timeLeft]) + return ( - <div className='flex justify-between gap-x-2'> + <div className='flex justify-between gap-x-2 mt-18'> <div className='flex flex-col items-center'> - <span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'> - {timeLeft.hour.toString().padStart(2, '0')} + <span className='bg-yellow-400 border border-yellow-400 text-black font-sm w-10 h-7 flex items-center justify-center rounded-lg'> + {timeLeft.day.toString().padStart(2, '0')} </span> + <span className='text-xs text-white'>Hari</span> </div> <div className='flex flex-col items-center'> - <span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'> - {timeLeft.minute.toString().padStart(2, '0')} + <span className='bg-yellow-400 border border-yellow-400 text-black font-sm w-10 h-7 flex items-center justify-center rounded-lg'> + {timeLeft.hour.toString().padStart(2, '0')} </span> + <span className='text-xs text-white'>Jam</span> </div> <div className='flex flex-col items-center'> - <span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'> - {timeLeft.second.toString().padStart(2, '0')} + <span className='bg-yellow-400 border border-yellow-400 text-black font-sm w-10 h-7 flex items-center justify-center rounded-lg'> + {timeLeft.minute.toString().padStart(2, '0')} </span> + <span className='text-xs text-white'>Menit</span> </div> </div> ) diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index 17aedeb6..6fdea644 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -14,7 +14,6 @@ import { useContext, useEffect, useState } from 'react' import useAuth from '@/core/hooks/useAuth' import NavbarUserDropdown from './NavbarUserDropdown' import { getCountCart } from '@/core/utils/cart' -import TopBanner from './TopBanner' import whatsappUrl from '@/core/utils/whatsappUrl' import { useRouter } from 'next/router' import { getAuth, setAuth } from '@/core/utils/auth' @@ -22,8 +21,12 @@ import { createSlug, getIdFromSlug } from '@/core/utils/slug' import productApi from '@/lib/product/api/productApi' import { useSession } from 'next-auth/react' import { AuthContext } from '@/pages/_app' +import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton' const Search = dynamic(() => import('./Search')) +const TopBanner = dynamic(() => import('./TopBanner'), { + loading: () => <TopBannerSkeleton /> +}) const NavbarDesktop = () => { const [isOpenCategory, setIsOpenCategory] = useState(false) @@ -165,8 +168,10 @@ const NavbarDesktop = () => { Ready Stock </Link> <Link - href='/blog' + href='https://blog.indoteknik.com/' className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition' + target='_blank' + rel='noreferrer noopener' > Blog Indoteknik </Link> diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx index 47a9c235..f4a8ab3a 100644 --- a/src/core/components/elements/Navbar/Search.jsx +++ b/src/core/components/elements/Navbar/Search.jsx @@ -64,21 +64,21 @@ const Search = () => { <MagnifyingGlassIcon className='w-6' /> </button> - {suggestions.length > 0 && ( - <> - <div className='absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6 z-50'> - {suggestions.map((suggestion, index) => ( - <Link - href={`/shop/search?q=${suggestion.term}`} - key={index} - className='px-3 py-3 !text-gray_r-12 font-normal' - > - {suggestion.term} - </Link> - ))} - </div> - </> - )} + <div + className={`absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6 z-50 ${ + suggestions.length > 0 ? 'block' : 'hidden' + }`} + > + {suggestions.map((suggestion, index) => ( + <Link + href={`/shop/search?q=${suggestion.term}`} + key={index} + className='px-3 py-3 !text-gray_r-12 font-normal' + > + {suggestion.term} + </Link> + ))} + </div> </form> </> ) diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx index 9efd0a8d..dca2e930 100644 --- a/src/core/components/elements/Navbar/TopBanner.jsx +++ b/src/core/components/elements/Navbar/TopBanner.jsx @@ -2,11 +2,16 @@ import odooApi from '@/core/api/odooApi' import { useQuery } from 'react-query' import Image from 'next/image' import Link from '../Link/Link' +import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton' const TopBanner = () => { const fetchTopBanner = async () => await odooApi('GET', '/api/v1/banner?type=top-banner') const topBanner = useQuery('topBanner', fetchTopBanner) + if (topBanner.isLoading) { + return <TopBannerSkeleton /> + } + return ( topBanner.isFetched && topBanner.data?.length > 0 && ( diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx index 7ea8f7c4..f0bcb7b7 100644 --- a/src/core/components/elements/Sidebar/Sidebar.jsx +++ b/src/core/components/elements/Sidebar/Sidebar.jsx @@ -120,7 +120,7 @@ const Sidebar = ({ active, close }) => { <SidebarLink className={itemClassName} href='/shop/brands'> Semua Brand </SidebarLink> - <SidebarLink className={itemClassName} href='/blog'> + <SidebarLink className={itemClassName} href='https://blog.indoteknik.com/' target="_blank" rel="noreferrer noopener"> Blog Indoteknik </SidebarLink> <SidebarLink className={itemClassName} href='/video'> diff --git a/src/core/components/elements/Skeleton/TopBannerSkeleton.jsx b/src/core/components/elements/Skeleton/TopBannerSkeleton.jsx new file mode 100644 index 00000000..f7d2e748 --- /dev/null +++ b/src/core/components/elements/Skeleton/TopBannerSkeleton.jsx @@ -0,0 +1,19 @@ +import useDevice from '@/core/hooks/useDevice' +import classNames from 'classnames' +import Skeleton from 'react-loading-skeleton' + +const TopBannerSkeleton = () => { + const { isDesktop, isMobile } = useDevice() + + const deviceClassName = { + 'h-10': isDesktop, + 'h-2.5': isMobile + } + const combinedClassName = classNames(deviceClassName) + + return ( + <Skeleton className={combinedClassName} count={1} containerClassName='w-full h-full block' /> + ) +} + +export { TopBannerSkeleton } |