From 6a7fdbe195d0e7ced55a9a3d722feac1d42a4563 Mon Sep 17 00:00:00 2001 From: Nguyen Dinh Nam Date: Wed, 27 Dec 2023 12:02:32 +0700 Subject: [PATCH] fix: select image format and hide scrollbar --- components/Header/Header.tsx | 10 +- components/Hero/Hero.tsx | 8 +- components/Logo/Logo.tsx | 12 +- .../home/DesignGuideView/DesignGuide.tsx | 9 +- .../DesignGuideView/DesignGuideCardItem.tsx | 2 +- .../EasyCustomizationView/CodeSnippet.tsx | 8 +- .../pages/home/RichComponentsView/Card.tsx | 8 +- .../home/RichComponentsView/Dropdown.tsx | 17 +- .../pages/home/RichComponentsView/Modal.tsx | 13 +- .../RichComponentsView/RichComponents.tsx | 2 +- components/pages/home/RoadmapView/Roadmap.tsx | 14 +- hooks/useFetchNPMData.ts | 2 +- hooks/useIsMobile.ts | 5 + package.json | 8 +- pages/examples/rich-components/dropdown.tsx | 4 +- pages/examples/rich-components/modal.tsx | 4 +- pages/index.tsx | 23 +- public/img/user-avatar.webp | Bin 0 -> 14330 bytes styles/globals.css | 24 +- yarn.lock | 1702 ++++++++++++----- 20 files changed, 1327 insertions(+), 548 deletions(-) create mode 100644 hooks/useIsMobile.ts create mode 100644 public/img/user-avatar.webp diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx index 89b9f56..7136789 100644 --- 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 = [ diff --git a/components/Hero/Hero.tsx b/components/Hero/Hero.tsx index 25f5a00..1334011 100644 --- 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 (
+
) => { const { src, fallbackImgUrl, ...rest } = props + const isMobile = useIsMobile() return ( { + const isMobile = useIsMobile() + return (
@@ -18,7 +21,7 @@ export const DesignGuide = ({ className }: { className?: string }) => {
@@ -39,7 +42,7 @@ export const DesignGuide = ({ className }: { className?: string }) => { /> diff --git a/components/pages/home/DesignGuideView/DesignGuideCardItem.tsx b/components/pages/home/DesignGuideView/DesignGuideCardItem.tsx index 1ca0432..b9ebc5f 100644 --- 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, 'title'> diff --git a/components/pages/home/EasyCustomizationView/CodeSnippet.tsx b/components/pages/home/EasyCustomizationView/CodeSnippet.tsx index 14b3389..e3c6306 100644 --- 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 @@ -114,9 +114,11 @@ export const CodeSnippet = () => {
-
+ 
-            {demoCode}
+            
+              {demoCode}
+
diff --git a/components/pages/home/RichComponentsView/Card.tsx b/components/pages/home/RichComponentsView/Card.tsx index 3d01e9e..d85ad57 100644 --- 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 (
diff --git a/components/pages/home/RichComponentsView/Dropdown.tsx b/components/pages/home/RichComponentsView/Dropdown.tsx index 620ea8c..1bb725c 100644 --- 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 ( - setIsOpened(!isOpened)}> + setIsOpened(!isOpened)} + >
{ { + console.log(event) + // if (event.type === 'dismissableLayer.pointerDownOutside') { + // event.preventDefault() + // } + }} > } diff --git a/components/pages/home/RichComponentsView/Modal.tsx b/components/pages/home/RichComponentsView/Modal.tsx index b4ef369..0ea0baa 100644 --- 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 ( - setIsOpened(!isOpened)}> + setIsOpened(!isOpened)} + >
{ Various components
-
+
{tabData.map((tab, index) => (