garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

use useMobile

Browse Source
This commit is contained in:
Athou
2023-06-21 21:58:11 +02:00
parent 6a5052787d
commit b1938c234c
2 changed files with 8 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
commafeed-client/src/components/responsive/OnDesktop.tsx
View File

@@ -1,11 +1,8 @@
import { Box, MediaQuery } from "@mantine/core" import { Box } from "@mantine/core"
import { Constants } from "app/constants" import { useMobile } from "hooks/useMobile"
import React from "react" import React from "react"
export function OnDesktop(props: { children: React.ReactNode }) { export function OnDesktop(props: { children: React.ReactNode }) {
return ( const mobile = useMobile()
<MediaQuery smallerThan={Constants.layout.mobileBreakpoint} styles={{ display: "none" }}> return <Box>{!mobile && props.children}</Box>
<Box>{props.children}</Box>
</MediaQuery>
)
} }

11
commafeed-client/src/components/responsive/OnMobile.tsx
View File

@@ -1,11 +1,8 @@
import { Box, MediaQuery } from "@mantine/core" import { Box } from "@mantine/core"
import { Constants } from "app/constants" import { useMobile } from "hooks/useMobile"
import React from "react" import React from "react"
export function OnMobile(props: { children: React.ReactNode }) { export function OnMobile(props: { children: React.ReactNode }) {
return ( const mobile = useMobile()
<MediaQuery largerThan={Constants.layout.mobileBreakpoint} styles={{ display: "none" }}> return <Box>{mobile && props.children}</Box>
<Box>{props.children}</Box>
</MediaQuery>
)
} }