fix: remove useismobile hook

consolelabs · Dec 27, 2023 · cdcc1f3 · cdcc1f3
1 parent 580b98b
commit cdcc1f3
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 83 deletions.
diff --git a/components/Hero/Hero.tsx b/components/Hero/Hero.tsx
@@ -1,7 +1,6 @@
 import { Typography } from '@mochi-ui/core'
 import clsx from 'clsx'
 import { Fragment, ReactNode } from 'react'
-import { useIsMobile } from '@/hooks/useIsMobile'
 
 type HeroProps = {
   title: string
@@ -20,8 +19,6 @@ export const Hero = ({
   contentClassName,
   heroImgUrl,
 }: HeroProps) => {
-  const isMobile = useIsMobile()
-
   return (
     <section
       className={clsx(
@@ -31,13 +28,16 @@ export const Hero = ({
     >
       <div
         style={{
-          backgroundImage:
-            heroImgUrl ??
-            (isMobile
-              ? 'url("/img/hero-banner.webp")'
-              : 'url("/img/hero-banner.png")'),
+          backgroundImage: heroImgUrl ?? 'url("/img/hero-banner.png")',
+        }}
+        className="h-full w-full bg-cover bg-center absolute top-0 -right-24 md:block hidden"
+      />
+
+      <div
+        style={{
+          backgroundImage: heroImgUrl ?? 'url("/img/hero-banner.webp")',
         }}
-        className="h-full w-full bg-cover bg-center absolute top-0 -right-24"
+        className="h-full w-full bg-cover bg-center absolute top-0 -right-24 block md:hidden"
       />
 
       <div className="section-container w-full absolute p-4 xl:p-0">

diff --git a/components/Logo/Logo.tsx b/components/Logo/Logo.tsx
@@ -1,25 +1,34 @@
-import { useIsMobile } from '@/hooks/useIsMobile'
 import {
   ImageWithFallback,
   ImageWithFallbackProps,
 } from '@/components/ImageWithFallback'
+import clsx from 'clsx'
 
 export const Logo = (props: Partial<ImageWithFallbackProps>) => {
-  const { src, fallbackImgUrl, ...rest } = props
-  const isMobile = useIsMobile()
+  const { src, fallbackImgUrl, className, ...rest } = props
 
   return (
-    <ImageWithFallback
-      src={
-        src ??
-        (isMobile ? '/img/logo-with-text.webp' : '/img/logo-with-text.png')
-      }
-      fallbackImgUrl={fallbackImgUrl ?? '/img/logo-with-text.webp'}
-      width={130}
-      height={40}
-      priority
-      alt="Mochi UI Logo"
-      {...rest}
-    />
+    <>
+      <ImageWithFallback
+        src={src ?? '/img/logo-with-text.png'}
+        fallbackImgUrl={fallbackImgUrl ?? '/img/logo-with-text.webp'}
+        width={130}
+        height={40}
+        priority
+        alt="Mochi UI Logo"
+        className={clsx('hidden md:block', className)}
+        {...rest}
+      />
+      <ImageWithFallback
+        src={src ?? '/img/logo-with-text.webp'}
+        fallbackImgUrl={fallbackImgUrl ?? '/img/logo-with-text.webp'}
+        width={130}
+        height={40}
+        priority
+        alt="Mochi UI Logo"
+        className={clsx('md:hidden block', className)}
+        {...rest}
+      />
+    </>
   )
 }
diff --git a/components/pages/home/DesignGuideView/DesignGuide.tsx b/components/pages/home/DesignGuideView/DesignGuide.tsx
@@ -4,11 +4,8 @@ import PaperplaneCircle from '@mochi-ui/icons/solid/paperplane-circle'
 import clsx from 'clsx'
 import { DesignGuideCardItem } from './DesignGuideCardItem'
 import { DOCS_LINK, MOCHI_DISCORD_LINK } from '@/constants/url'
-import { useIsMobile } from '@/hooks/useIsMobile'
 
 export const DesignGuide = ({ className }: { className?: string }) => {
-  const isMobile = useIsMobile()
-
   return (
     <section className={clsx('px-4', className)}>
       <div className="section-container">
@@ -21,7 +18,7 @@ export const DesignGuide = ({ className }: { className?: string }) => {
 
         <div className="flex flex-col sm:flex-row gap-4 md:gap-8 md:pb-8">
           <DesignGuideCardItem
-            imgUrl={isMobile ? '/img/select.webp' : '/img/select.png'}
+            imgUrl="/img/select.png"
             fallbackImgUrl="/img/select.webp"
             title={
               <div className="flex gap-2 items-center">
@@ -42,7 +39,7 @@ export const DesignGuide = ({ className }: { className?: string }) => {
           />
 
           <DesignGuideCardItem
-            imgUrl={isMobile ? '/img/paperplane.webp' : '/img/paperplane.png'}
+            imgUrl="/img/paperplane.png"
             fallbackImgUrl="/img/paperplane.webp"
             title={
               <div className="flex gap-2 items-center">

diff --git a/components/pages/home/DesignGuideView/DesignGuideCardItem.tsx b/components/pages/home/DesignGuideView/DesignGuideCardItem.tsx
@@ -40,6 +40,16 @@ export const DesignGuideCardItem = (props: DesignGuideCardItemProps) => {
             width={170}
             height={170}
             loading="lazy"
+            className="hidden md:block"
+          />
+          <ImageWithFallback
+            src={fallbackImgUrl}
+            fallbackImgUrl={fallbackImgUrl}
+            alt=""
+            width={170}
+            height={170}
+            loading="lazy"
+            className="md:hidden block"
           />
         </div>
       ) : null}

diff --git a/components/pages/home/RichComponentsView/Card.tsx b/components/pages/home/RichComponentsView/Card.tsx
@@ -12,7 +12,6 @@ import {
   TrashBinLine,
   EditLine,
 } from '@mochi-ui/icons'
-import { useIsMobile } from '@/hooks/useIsMobile'
 
 const cardContent = [
   {
@@ -40,19 +39,10 @@ const cardContent = [
 ]
 
 export const CardShowcase = () => {
-  const isMobile = useIsMobile()
-
   return (
     <div className="h-full w-full flex p-4 justify-center items-center">
       <Card className="bg-white w-[300px] rounded-xl overflow-hidden !p-0 shadow-md">
-        <div
-          className="bg-cover h-[75px] relative"
-          style={{
-            backgroundImage: isMobile
-              ? 'url("/img/profile-background.webp")'
-              : 'url("/img/profile-background.png")',
-          }}
-        >
+        <div className="bg-cover h-[75px] relative bg-[url('/img/profile-background.webp')] md:bg-[url('/img/profile-background.png')]">
           <div className="absolute -bottom-[44px] left-2">
             <Avatar src="/img/user-avatar.png" size="xl" />
           </div>

diff --git a/components/pages/home/RichComponentsView/Dropdown.tsx b/components/pages/home/RichComponentsView/Dropdown.tsx
@@ -15,14 +15,11 @@ import {
   UserSolid,
 } from '@mochi-ui/icons'
 import { useEffect, useState } from 'react'
-import { useIsMobile } from '@/hooks/useIsMobile'
 
 export const DropdownShowcase = () => {
   const [isOpened, setIsOpened] = useState(false)
   const [switchState, setSwitchState] = useState(false)
 
-  const isMobile = useIsMobile()
-
   useEffect(() => {
     const timeout = setTimeout(() => {
       setIsOpened(true)
@@ -42,10 +39,16 @@ export const DropdownShowcase = () => {
       <div className="w-[240px] h-max max-w-full flex justify-end">
         <DropdownMenuTrigger asChild>
           <ProfileBadge
-            avatar={isMobile ? '/img/user-avatar.webp' : '/img/user-avatar.png'}
+            avatar="/img/user-avatar.png"
+            name="Kathryn Murphy"
+            platform=""
+            className="h-max hidden md:block"
+          />
+          <ProfileBadge
+            avatar="/img/user-avatar.webp"
             name="Kathryn Murphy"
             platform=""
-            className="h-max"
+            className="h-max md:hidden block"
           />
         </DropdownMenuTrigger>
       </div>

diff --git a/components/pages/home/RichComponentsView/Modal.tsx b/components/pages/home/RichComponentsView/Modal.tsx
@@ -10,14 +10,11 @@ import { SolidDotSolid } from '@mochi-ui/icons'
 import clsx from 'clsx'
 import { useState } from 'react'
 import { ImageWithFallback } from '@/components/ImageWithFallback'
-import { useIsMobile } from '@/hooks/useIsMobile'
 
 export const ModalShowcase = () => {
   const [isOpened, setIsOpened] = useState(true)
   const [isConfirming, setIsConfirming] = useState(false)
 
-  const isMobile = useIsMobile()
-
   const onConfirm = () => {
     setIsConfirming(true)
     setTimeout(() => {
@@ -38,11 +35,21 @@ export const ModalShowcase = () => {
       <ModalContent className="space-y-2 text-center !p-4">
         <div className="mb-8">
           <ImageWithFallback
-            src={isMobile ? '/img/macbook.webp' : '/img/macbook.png'}
+            src="/img/macbook.png"
+            fallbackImgUrl="/img/macbook.webp"
+            alt="Mochi UI Logo"
+            width={350}
+            height={200}
+            className="hidden md:block"
+            priority
+          />
+          <ImageWithFallback
+            src="/img/macbook.webp"
             fallbackImgUrl="/img/macbook.webp"
             alt="Mochi UI Logo"
             width={350}
             height={200}
+            className="md:hidden block"
             priority
           />
           <Typography

diff --git a/components/pages/home/RoadmapView/Roadmap.tsx b/components/pages/home/RoadmapView/Roadmap.tsx
@@ -1,23 +1,15 @@
 import { Typography } from '@mochi-ui/core'
 import clsx from 'clsx'
 import { ROADMAP } from '@/constants/roadmap'
-import { useIsMobile } from '@/hooks/useIsMobile'
 import { ImageWithFallback } from '@/components/ImageWithFallback'
 
 export const Roadmap = ({ className }: { className?: string }) => {
-  const isMobile = useIsMobile()
-
   return (
     <section
       className={clsx(
-        'bg-neutral-900 bg-contain bg-right-bottom bg-no-repeat',
+        'bg-neutral-900 bg-contain bg-right-bottom bg-no-repeat bg-[url("/img/gradient.webp")] md:bg-[url("/img/gradient.png")]',
         className,
       )}
-      style={{
-        backgroundImage: isMobile
-          ? 'url("/img/gradient.webp")'
-          : 'url("/img/gradient.png")',
-      }}
     >
       <div className="section-container pl-4 xl:pl-0">
         <Typography

diff --git a/hooks/useIsMobile.ts b/hooks/useIsMobile.ts
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -64,20 +64,12 @@ export default function Home() {
             title="Mochi UI Kit"
             description="Help designers and developers create eye-catching and adaptable products using different Web3 frameworks effortlessly."
             actions={[
-              <a
-                key="get-started-action"
-                href={DOCS_LINK}
-                className="inline-block"
-              >
+              <a key="get-started-action" href={DOCS_LINK}>
                 <Button>
-                  Get Started <ArrowRightLine />
+                  Get Started <ArrowRightLine className="h-3.5 w-3.5" />
                 </Button>
               </a>,
-              <a
-                key="preview-action"
-                href={COMPONENTS_LINK}
-                className="inline-block"
-              >
+              <a key="preview-action" href={COMPONENTS_LINK}>
                 <Button color="white">Preview Online</Button>
               </a>,
             ]}