diff options
Diffstat (limited to 'src/core/components/elements')
| -rw-r--r-- | src/core/components/elements/DelayRender/DelayRender.jsx | 19 | ||||
| -rw-r--r-- | src/core/components/elements/Footer/BasicFooter.jsx | 28 | ||||
| -rw-r--r-- | src/core/components/elements/Spinner/LogoSpinner.jsx | 3 |
3 files changed, 34 insertions, 16 deletions
diff --git a/src/core/components/elements/DelayRender/DelayRender.jsx b/src/core/components/elements/DelayRender/DelayRender.jsx new file mode 100644 index 00000000..2d412be7 --- /dev/null +++ b/src/core/components/elements/DelayRender/DelayRender.jsx @@ -0,0 +1,19 @@ +const { useState, useEffect } = require('react') + +const DelayRender = ({ renderAfter = 200, children }) => { + const [renderComponent, setRenderComponent] = useState(false) + + useEffect(() => { + const renderTimeout = setTimeout(() => { + setRenderComponent(true) + }, renderAfter) + + return () => { + clearTimeout(renderTimeout) + } + }, [renderAfter]) + + return renderComponent && children +} + +export default DelayRender diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx index 75e9926d..9f68c2f7 100644 --- a/src/core/components/elements/Footer/BasicFooter.jsx +++ b/src/core/components/elements/Footer/BasicFooter.jsx @@ -15,7 +15,7 @@ const BasicFooter = () => { <> <MobileView> <footer className='flex flex-wrap p-4 bg-gray_r-3 text-caption-1'> - <div className='w-1/2 flex flex-col gap-y-4 pr-1.5'> + <div className='w-1/2 flex flex-col gap-y-8 pr-2'> <div> <NextImage src={IndoteknikLogo} alt='Logo Indoteknik' width={90} height={30} /> @@ -30,13 +30,13 @@ const BasicFooter = () => { <SocialMedias /> </div> - <div className='w-1/2 flex flex-col gap-y-4 pl-1.5'> + <div className='w-1/2 flex flex-col gap-y-8 pl-2'> <Form /> <CustomerGuide /> <Payments /> </div> - <div className='w-full mt-4 leading-5 text-caption-2 text-gray_r-12/80'> + <div className='w-full mt-8 leading-5 text-caption-2 text-gray_r-12/80'> Copyright © 2007 - {new Date().getFullYear()}, PT. Indoteknik Dotcom Gemilang </div> </footer> @@ -77,7 +77,7 @@ const BasicFooter = () => { ) } -const headerClassName = 'font-semibold mb-2' +const headerClassName = 'font-semibold mb-4' const OfficeLocation = () => ( <div> @@ -99,8 +99,8 @@ const WarehouseLocation = () => ( const AboutUs = () => ( <div> - <div className={`${headerClassName} mb-3`}>Tentang Kami</div> - <ul className='flex flex-col gap-y-2'> + <div className={headerClassName}>Tentang Kami</div> + <ul className='flex flex-col gap-y-3'> <li> <InternalItemLink href='/tentang-kami'>Company Profile</InternalItemLink> </li> @@ -125,8 +125,8 @@ const AboutUs = () => ( const CustomerGuide = () => ( <div> - <div className={`${headerClassName} mb-3`}>Bantuan & Panduan</div> - <ul className='flex flex-col gap-y-2'> + <div className={headerClassName}>Bantuan & Panduan</div> + <ul className='flex flex-col gap-y-3'> <li> <InternalItemLink href='/metode-pembayaran'>Metode Pembayaran</InternalItemLink> </li> @@ -156,8 +156,8 @@ const CustomerGuide = () => ( const Form = () => ( <div> - <div className={`${headerClassName} mb-3`}>Formulir</div> - <ul className='flex flex-col gap-y-2'> + <div className={headerClassName}>Formulir</div> + <ul className='flex flex-col gap-y-3'> <li> <InternalItemLink href='/my/request-for-quotation'>Request for Quotation</InternalItemLink> </li> @@ -182,8 +182,8 @@ const Form = () => ( const InformationCenter = () => ( <div> - <div className={`${headerClassName} mb-3`}>Layanan Informasi</div> - <ul className='flex flex-col gap-y-2'> + <div className={headerClassName}>Layanan Informasi</div> + <ul className='flex flex-col gap-y-3'> <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> @@ -205,7 +205,7 @@ const InformationCenter = () => ( const OpenHours = () => ( <div> <div className={headerClassName}>Jam Operasional</div> - <ul className='flex flex-col gap-y-1'> + <ul className='flex flex-col gap-y-3'> <li className='block md:flex md:gap-x-2'> <div className='text-gray_r-12'>Senin - Jumat:</div> <div className='text-gray_r-12/80'>08:30 - 17:00</div> @@ -221,7 +221,7 @@ const OpenHours = () => ( const SocialMedias = () => ( <div> <div className={headerClassName + 'block md:hidden'}>Temukan Kami</div> - <div className='flex flex-wrap gap-2 mt-2'> + <div className='flex flex-wrap gap-3 mt-2'> <a target='_blank' rel='noreferrer' href={whatsappUrl(null)}> <NextImage src='/images/socials/Whatsapp.png' alt='Whatsapp Logo' width={24} height={24} /> </a> diff --git a/src/core/components/elements/Spinner/LogoSpinner.jsx b/src/core/components/elements/Spinner/LogoSpinner.jsx index 73b84e84..94da5f1d 100644 --- a/src/core/components/elements/Spinner/LogoSpinner.jsx +++ b/src/core/components/elements/Spinner/LogoSpinner.jsx @@ -1,9 +1,8 @@ import Image from 'next/image' -import IndoteknikLogo from '@/images/LOGO-INDOTEKNIK-GEAR.png' const LogoSpinner = ({ ...props }) => ( <Image - src={IndoteknikLogo} + src='/images/logo-indoteknik-gear.png' alt='Indoteknik Logo' width={64} height={64} |