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) => (