-

3 files changed, 43 insertions, 89 deletions

diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 76a7cac2..8819b87b 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -6,39 +6,37 @@ import {
   PhoneArrowUpRightIcon
 } from '@heroicons/react/24/outline'
 import Link from '../Link/Link'
+import MobileView from '../../views/MobileView'
 
 const BasicFooter = () => {
   return (
-    <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>
-          <NextImage
-            src={IndoteknikLogo}
-            alt='Logo Indoteknik'
-            width={90}
-            height={30}
-          />
-
-          <div className='font-semibold mt-2'>PT. Indoteknik Dotcom Gemilang</div>
+    <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>
+            <NextImage src={IndoteknikLogo} alt='Logo Indoteknik' width={90} height={30} />
+
+            <div className='font-semibold mt-2'>PT. Indoteknik Dotcom Gemilang</div>
+          </div>
+
+          <OfficeLocation />
+          <WarehouseLocation />
+          <InformationCenter />
+          <OpenHours />
+          <SocialMedias />
         </div>
 
-        <OfficeLocation />
-        <WarehouseLocation />
-        <InformationCenter />
-        <OpenHours />
-        <SocialMedias />
-      </div>
-
-      <div className='w-1/2 flex flex-col gap-y-4 pl-1.5'>
-        <AboutUs />
-        <CustomerGuide />
-        <Payments />
-      </div>
+        <div className='w-1/2 flex flex-col gap-y-4 pl-1.5'>
+          <AboutUs />
+          <CustomerGuide />
+          <Payments />
+        </div>
 
-      <div className='w-full mt-4 leading-5 text-caption-2 text-gray_r-12/80'>
-        Copyright © 2007 - 2022, PT. Indoteknik Dotcom Gemilang
-      </div>
-    </footer>
+        <div className='w-full mt-4 leading-5 text-caption-2 text-gray_r-12/80'>
+          Copyright © 2007 - 2022, PT. Indoteknik Dotcom Gemilang
+        </div>
+      </footer>
+    </MobileView>
   )
 }
 
@@ -172,30 +170,10 @@ const SocialMedias = () => (
   <div>
     <div className={headerClassName}>Temukan Kami</div>
     <div className='flex flex-wrap gap-2'>
-      <NextImage
-        src='/images/socials/Whatsapp.png'
-        alt='Whatsapp Logo'
-        width={24}
-        height={24}
-      />
-      <NextImage
-        src='/images/socials/Facebook.png'
-        alt='Facebook Logo'
-        width={24}
-        height={24}
-      />
-      <NextImage
-        src='/images/socials/Twitter.png'
-        alt='Twitter Logo'
-        width={24}
-        height={24}
-      />
-      <NextImage
-        src='/images/socials/Linkedin.png'
-        alt='Linkedin Logo'
-        width={24}
-        height={24}
-      />
+      <NextImage src='/images/socials/Whatsapp.png' alt='Whatsapp Logo' width={24} height={24} />
+      <NextImage src='/images/socials/Facebook.png' alt='Facebook Logo' width={24} height={24} />
+      <NextImage src='/images/socials/Twitter.png' alt='Twitter Logo' width={24} height={24} />
+      <NextImage src='/images/socials/Linkedin.png' alt='Linkedin Logo' width={24} height={24} />
     </div>
   </div>
 )
@@ -204,30 +182,10 @@ const Payments = () => (
   <div>
     <div className={headerClassName}>Pembayaran</div>
     <div className='flex flex-wrap gap-2'>
-      <NextImage
-        src='/images/payments/bca.png'
-        alt='Bank BCA Logo'
-        width={48}
-        height={24}
-      />
-      <NextImage
-        src='/images/payments/bni.png'
-        alt='Bank BNI Logo'
-        width={48}
-        height={24}
-      />
-      <NextImage
-        src='/images/payments/bri.png'
-        alt='Bank BRI Logo'
-        width={48}
-        height={24}
-      />
-      <NextImage
-        src='/images/payments/gopay.png'
-        alt='Gopay Logo'
-        width={48}
-        height={24}
-      />
+      <NextImage src='/images/payments/bca.png' alt='Bank BCA Logo' width={48} height={24} />
+      <NextImage src='/images/payments/bni.png' alt='Bank BNI Logo' width={48} height={24} />
+      <NextImage src='/images/payments/bri.png' alt='Bank BRI Logo' width={48} height={24} />
+      <NextImage src='/images/payments/gopay.png' alt='Gopay Logo' width={48} height={24} />
       <NextImage
         src='/images/payments/mandiri.png'
         alt='Bank Mandiri Logo'
@@ -246,21 +204,13 @@ const Payments = () => (
         width={48}
         height={24}
       />
-      <NextImage
-        src='/images/payments/visa.png'
-        alt='Visa Logo'
-        width={48}
-        height={24}
-      />
+      <NextImage src='/images/payments/visa.png' alt='Visa Logo' width={48} height={24} />
     </div>
   </div>
 )
 
 const InternalItemLink = ({ href, children }) => (
-  <Link
-    href={href}
-    className='!text-gray_r-12/80 font-normal line-clamp-1'
-  >
+  <Link href={href} className='!text-gray_r-12/80 font-normal line-clamp-1'>
     {children}
   </Link>
 )
diff --git a/src/core/components/views/DesktopView.jsx b/src/core/components/views/DesktopView.jsx
index 9042a766..cf5f65a4 100644
--- a/src/core/components/views/DesktopView.jsx
+++ b/src/core/components/views/DesktopView.jsx
@@ -1,15 +1,17 @@
 import useDevice from '@/core/hooks/useDevice'
 import { useEffect, useState } from 'react'
 
+const initialView = <></>
+
 const DesktopView = ({ children }) => {
   const { isDesktop } = useDevice()
-  const [view, setView] = useState(<></>)
+  const [view, setView] = useState(initialView)
 
   useEffect(() => {
     if (isDesktop) {
       setView(children)
     } else {
-      setView(<></>)
+      setView(initialView)
     }
   }, [isDesktop, children])
 
diff --git a/src/core/components/views/MobileView.jsx b/src/core/components/views/MobileView.jsx
index 0c8a806c..fc8fb6a8 100644
--- a/src/core/components/views/MobileView.jsx
+++ b/src/core/components/views/MobileView.jsx
@@ -1,15 +1,17 @@
 import useDevice from '@/core/hooks/useDevice'
 import { useEffect, useState } from 'react'
 
+const initialView = <></>
+
 const MobileView = ({ children }) => {
   const { isMobile } = useDevice()
-  const [view, setView] = useState(<></>)
+  const [view, setView] = useState(initialView)
 
   useEffect(() => {
     if (isMobile) {
       setView(children)
     } else {
-      setView(<></>)
+      setView(initialView)
     }
   }, [isMobile, children])