fix: select image format and hide scrollbar

consolelabs · Dec 27, 2023 · 6a7fdbe · 6a7fdbe
1 parent 9eed0e8
commit 6a7fdbe
Show file tree

Hide file tree

Showing 20 changed files with 1,327 additions and 548 deletions.
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -3,13 +3,9 @@ import { motion } from 'framer-motion'
 import clsx from 'clsx'
 import { useMemo } from 'react'
 import { useEffect, useState } from 'react'
-import {
-  COMPONENTS_LINK,
-  DOCS_LINK,
-  MOCHI_GITHUB_LINK,
-} from '../../constants/url'
-import { useFetchNPMData } from '../../hooks/useFetchNPMData'
-import { Logo } from '../Logo'
+import { COMPONENTS_LINK, DOCS_LINK, MOCHI_GITHUB_LINK } from '@/constants/url'
+import { useFetchNPMData } from '@/hooks/useFetchNPMData'
+import { Logo } from '@/components/Logo'
 
 const desktopNavItems = [
   <a key="components-button" href={COMPONENTS_LINK}>

diff --git a/components/Hero/Hero.tsx b/components/Hero/Hero.tsx
@@ -1,6 +1,7 @@
 import { Typography } from '@mochi-ui/core'
 import clsx from 'clsx'
 import { Fragment, ReactNode } from 'react'
+import { useIsMobile } from '@/hooks/useIsMobile'
 
 type HeroProps = {
   title: string
@@ -19,6 +20,8 @@ export const Hero = ({
   contentClassName,
   heroImgUrl,
 }: HeroProps) => {
+  const isMobile = useIsMobile()
+
   return (
     <section
       className={clsx(
@@ -30,10 +33,13 @@ export const Hero = ({
         style={{
           backgroundImage:
             heroImgUrl ??
-            'image-set(url("/img/hero-banner.png") 2x, url("/img/hero-banner.webp") 1x)',
+            (isMobile
+              ? 'url("/img/hero-banner.webp")'
+              : 'url("/img/hero-banner.png")'),
         }}
         className="h-full w-full bg-cover bg-center absolute top-0 -right-24"
       />
+
       <div className="section-container w-full absolute p-4 xl:p-0">
         <div
           className={clsx(

diff --git a/components/Logo/Logo.tsx b/components/Logo/Logo.tsx
@@ -1,11 +1,19 @@
-import { ImageWithFallback, ImageWithFallbackProps } from '../ImageWithFallback'
+import { useIsMobile } from '@/hooks/useIsMobile'
+import {
+  ImageWithFallback,
+  ImageWithFallbackProps,
+} from '@/components/ImageWithFallback'
 
 export const Logo = (props: Partial<ImageWithFallbackProps>) => {
   const { src, fallbackImgUrl, ...rest } = props
+  const isMobile = useIsMobile()
 
   return (
     <ImageWithFallback
-      src={src ?? '/img/logo-with-text.png'}
+      src={
+        src ??
+        (isMobile ? '/img/logo-with-text.webp' : '/img/logo-with-text.png')
+      }
       fallbackImgUrl={fallbackImgUrl ?? '/img/logo-with-text.webp'}
       width={130}
       height={40}

diff --git a/components/pages/home/DesignGuideView/DesignGuide.tsx b/components/pages/home/DesignGuideView/DesignGuide.tsx
@@ -3,9 +3,12 @@ import { LinkCircledSolid } from '@mochi-ui/icons'
 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 { 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">
@@ -18,7 +21,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="/img/select.png"
+            imgUrl={isMobile ? '/img/select.webp' : '/img/select.png'}
             fallbackImgUrl="/img/select.webp"
             title={
               <div className="flex gap-2 items-center">
@@ -39,7 +42,7 @@ export const DesignGuide = ({ className }: { className?: string }) => {
           />
 
           <DesignGuideCardItem
-            imgUrl="/img/paperplane.png"
+            imgUrl={isMobile ? '/img/paperplane.webp' : '/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
@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import { AnchorHTMLAttributes, ReactNode } from 'react'
-import { ImageWithFallback } from '../../../ImageWithFallback'
+import { ImageWithFallback } from '@/components/ImageWithFallback'
 
 type DesignGuideCardItemProps = Partial<
   Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'title'>

diff --git a/components/pages/home/EasyCustomizationView/CodeSnippet.tsx b/components/pages/home/EasyCustomizationView/CodeSnippet.tsx
@@ -102,7 +102,7 @@ export const CodeSnippet = () => {
             level="p6"
             className="!text-[13px]"
             fontWeight="md"
-            color="textTertiary"
+            color="textContrast"
           >
             custom-card.tsx
           </Typography>
@@ -114,9 +114,11 @@ export const CodeSnippet = () => {
             <CopySolid className="w-6 h-6 text-neutral-0" onClick={onCopy} />
           </Tooltip>
         </div>
-        <div className="h-full overflow-auto px-6 md:px-8">
+        <div className="h-full overflow-auto hide-scrollbar px-6 md:px-8">
           <pre className="!bg-transparent !m-0 !pt-0 !pb-2 !text-sm static language-javascript">
-            <code className="language-javascript !px-0">{demoCode}</code>
+            <code className="language-javascript !px-0 hide-scrollbar">
+              {demoCode}
+            </code>
           </pre>
         </div>
 

diff --git a/components/pages/home/RichComponentsView/Card.tsx b/components/pages/home/RichComponentsView/Card.tsx
@@ -12,6 +12,7 @@ import {
   TrashBinLine,
   EditLine,
 } from '@mochi-ui/icons'
+import { useIsMobile } from '@/hooks/useIsMobile'
 
 const cardContent = [
   {
@@ -39,14 +40,17 @@ 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:
-              'image-set(url("/img/profile-background.png") 2x, url("/img/profile-background.webp") 1x)',
+            backgroundImage: isMobile
+              ? 'url("/img/profile-background.webp")'
+              : 'url("/img/profile-background.png")',
           }}
         >
           <div className="absolute -bottom-[44px] left-2">

diff --git a/components/pages/home/RichComponentsView/Dropdown.tsx b/components/pages/home/RichComponentsView/Dropdown.tsx
@@ -15,11 +15,14 @@ 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)
@@ -31,11 +34,15 @@ export const DropdownShowcase = () => {
   }, [])
 
   return (
-    <DropdownMenu open={isOpened} onOpenChange={() => setIsOpened(!isOpened)}>
+    <DropdownMenu
+      open={isOpened}
+      modal={false}
+      onOpenChange={() => setIsOpened(!isOpened)}
+    >
       <div className="w-[240px] h-max max-w-full flex justify-end">
         <DropdownMenuTrigger asChild>
           <ProfileBadge
-            avatar="/img/user-avatar.png"
+            avatar={isMobile ? '/img/user-avatar.webp' : '/img/user-avatar.png'}
             name="Kathryn Murphy"
             platform=""
             className="h-max"
@@ -45,6 +52,12 @@ export const DropdownShowcase = () => {
       <DropdownMenuContent
         className="max-h-[645px] overflow-y-auto"
         align="end"
+        onInteractOutside={(event) => {
+          console.log(event)
+          //   if (event.type === 'dismissableLayer.pointerDownOutside') {
+          //     event.preventDefault()
+          //   }
+        }}
       >
         <DropdownMenuLabel
           leftIcon={<UserSolid className="!text-neutral-800" />}

diff --git a/components/pages/home/RichComponentsView/Modal.tsx b/components/pages/home/RichComponentsView/Modal.tsx
@@ -9,12 +9,15 @@ import {
 import { SolidDotSolid } from '@mochi-ui/icons'
 import clsx from 'clsx'
 import { useState } from 'react'
-import { ImageWithFallback } from '../../../ImageWithFallback'
+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(() => {
@@ -24,14 +27,18 @@ export const ModalShowcase = () => {
   }
 
   return (
-    <Modal open={isOpened} onOpenChange={() => setIsOpened(!isOpened)}>
+    <Modal
+      open={isOpened}
+      modal={false}
+      onOpenChange={() => setIsOpened(!isOpened)}
+    >
       <ModalTrigger asChild>
         <Button>Open Modal</Button>
       </ModalTrigger>
       <ModalContent className="space-y-2 text-center !p-4">
         <div className="mb-8">
           <ImageWithFallback
-            src="/img/macbook.png"
+            src={isMobile ? '/img/macbook.webp' : '/img/macbook.png'}
             fallbackImgUrl="/img/macbook.webp"
             alt="Mochi UI Logo"
             width={350}

diff --git a/components/pages/home/RichComponentsView/RichComponents.tsx b/components/pages/home/RichComponentsView/RichComponents.tsx
@@ -56,7 +56,7 @@ export const RichComponents = ({ className }: { className?: string }) => {
           Various components
         </Typography>
         <div className="flex flex-col md:flex-row gap-4 md:gap-8 justify-stretch">
-          <div className="flex flex-row md:flex-col gap-2 overflow-auto w-full md:w-[280px] shrink-0 h-full">
+          <div className="flex flex-row md:flex-col gap-2 overflow-auto hide-scrollbar w-full md:w-[280px] shrink-0 h-full">
             {tabData.map((tab, index) => (
               <Button
                 key={tab.title}

diff --git a/components/pages/home/RoadmapView/Roadmap.tsx b/components/pages/home/RoadmapView/Roadmap.tsx
@@ -1,18 +1,22 @@
 import { Typography } from '@mochi-ui/core'
 import clsx from 'clsx'
-import { ROADMAP } from '../../../../constants/roadmap'
-import { ImageWithFallback } from '../../../ImageWithFallback'
+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',
         className,
       )}
       style={{
-        backgroundImage:
-          'image-set(url("/img/gradient.png") 2x, url("/img/gradient.webp") 1x)',
+        backgroundImage: isMobile
+          ? 'url("/img/gradient.webp")'
+          : 'url("/img/gradient.png")',
       }}
     >
       <div className="section-container pl-4 xl:pl-0">
@@ -25,7 +29,7 @@ export const Roadmap = ({ className }: { className?: string }) => {
         </Typography>
       </div>
 
-      <div className="overflow-auto pl-6 sm:pl-4">
+      <div className="overflow-auto hide-scrollbar pl-6 sm:pl-4">
         <div
           className="overflow-visible pb-8 pt-4 sm:pt-8"
           style={{

diff --git a/hooks/useFetchNPMData.ts b/hooks/useFetchNPMData.ts
@@ -1,5 +1,5 @@
 import useSWR from 'swr'
-import { NPM_DATA_ENDPOINT } from '../constants/npm'
+import { NPM_DATA_ENDPOINT } from '@/constants/npm'
 import { NPMDataResponse } from '../types/npm'
 
 export const SWR_KEY_FETCH_NPM_DATA = 'SWR_KEY_FETCH_NPM_DATA'

diff --git a/hooks/useIsMobile.ts b/hooks/useIsMobile.ts
@@ -0,0 +1,5 @@
+import { useMedia } from '@dwarvesf/react-hooks'
+
+export function useIsMobile(): boolean {
+  return useMedia([`(max-width: 767px)`], [true], false)
+}
diff --git a/package.json b/package.json
@@ -13,11 +13,11 @@
     "postinstall": "npx husky install"
   },
   "dependencies": {
-    "@mochi-ui/core": "^0.10.0",
-    "@mochi-ui/icons": "^0.6.0",
-    "@mochi-ui/theme": "^0.11.0",
-    "highlight.js": "^11.9.0",
+    "@mochi-ui/core": "^0.11.1",
+    "@mochi-ui/icons": "^0.7.0",
+    "@mochi-ui/theme": "^0.12.1",
     "clsx": "^2.0.0",
+    "highlight.js": "^11.9.0",
     "next": "14.0.3",
     "next-plausible": "^3.12.0",
     "react": "^18",

diff --git a/pages/examples/rich-components/dropdown.tsx b/pages/examples/rich-components/dropdown.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { DropdownShowcase } from '../../../components/pages/home/RichComponentsView'
+import { DropdownShowcase } from '@/components/pages/home/RichComponentsView'
 
 const MochiUIModal = () => {
   const [isSSR, setIsSSR] = useState(true)
@@ -9,7 +9,7 @@ const MochiUIModal = () => {
   }, [])
 
   return !isSSR ? (
-    <div className="h-[450px] md:h-[478px] flex justify-center p-4 md:p-6 pt-12">
+    <div className="h-[478px] flex justify-center p-4 sm:p-6 pt-12 bg-neutral-100">
       <DropdownShowcase />
     </div>
   ) : null

diff --git a/pages/examples/rich-components/modal.tsx b/pages/examples/rich-components/modal.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { ModalShowcase } from '../../../components/pages/home/RichComponentsView'
+import { ModalShowcase } from '@/components/pages/home/RichComponentsView'
 
 const MochiUIModal = () => {
   const [isSSR, setIsSSR] = useState(true)
@@ -9,7 +9,7 @@ const MochiUIModal = () => {
   }, [])
 
   return !isSSR ? (
-    <div className="h-[450px] md:h-[478px] p-4 md:p-6 flex justify-center items-center">
+    <div className="h-[478px] p-4 sm:p-6 flex justify-center items-center bg-neutral-100">
       <ModalShowcase />
     </div>
   ) : null

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -8,26 +8,27 @@ import {
   TipColored,
 } from '@mochi-ui/icons'
 import Head from 'next/head'
-import { Header } from '../components/Header'
-import { Hero } from '../components/Hero'
-import { GridContent } from '../components/GridContent'
-import { Divider } from '../components/Divider'
-import { RichComponents } from '../components/pages/home/RichComponentsView'
-import { EasyCustomization } from '../components/pages/home/EasyCustomizationView'
-import { DesignGuide } from '../components/pages/home/DesignGuideView'
-import { CallToAction } from '../components/CallToAction'
 import { Inter } from 'next/font/google'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
+import clsx from 'clsx'
+import { Header } from '@/components/Header'
+import { Hero } from '@/components/Hero'
+import { GridContent } from '@/components/GridContent'
+import { Divider } from '@/components/Divider'
+import { RichComponents } from '@/components/pages/home/RichComponentsView'
+import { EasyCustomization } from '@/components/pages/home/EasyCustomizationView'
+import { DesignGuide } from '@/components/pages/home/DesignGuideView'
+import { CallToAction } from '@/components/CallToAction'
 import {
   COMPONENTS_LINK,
   DOCS_LINK,
   MOCHI_DISCORD_LINK,
   MOCHI_GITHUB_BUG_REPORT_LINK,
   MOCHI_GITHUB_ISSUES_LINK,
   MOCHI_GITHUB_LINK,
-} from '../constants/url'
-import { Roadmap } from '../components/pages/home/RoadmapView'
+} from '@/constants/url'
+import { Roadmap } from '@/components/pages/home/RoadmapView'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -55,7 +56,7 @@ export default function Home() {
         />
       </Head>
 
-      <div className={inter.className}>
+      <div className={clsx('bg-white', inter.className)}>
         <Header />
 
         <main>

diff --git a/public/img/user-avatar.webp b/public/img/user-avatar.webp