zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Simplify the RecommendedFeeds with breakpoint components

Browse source
This commit is contained in:
Paul Frazee 2023-08-30 16:13:09 -07:00
parent 3fa9b6daba
commit 8bc8dcc094
6 changed files with 203 additions and 259 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/view/com/util/layouts/Breakpoints.tsx Normal file
View file

@ -0,0 +1,8 @@
import React from 'react'
export const Desktop = ({}: React.PropsWithChildren<{}>) => null
export const TabletOrDesktop = ({}: React.PropsWithChildren<{}>) => null
export const Tablet = ({}: React.PropsWithChildren<{}>) => null
export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) =>
children
export const Mobile = ({children}: React.PropsWithChildren<{}>) => children

20
src/view/com/util/layouts/Breakpoints.web.tsx Normal file
View file

@ -0,0 +1,20 @@
import React from 'react'
import MediaQuery from 'react-responsive'
export const Desktop = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery minWidth={1224}>{children}</MediaQuery>
)
export const TabletOrDesktop = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery minWidth={800}>{children}</MediaQuery>
)
export const Tablet = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery minWidth={800} maxWidth={1224}>
{children}
</MediaQuery>
)
export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery maxWidth={1224}>{children}</MediaQuery>
)
export const Mobile = ({children}: React.PropsWithChildren<{}>) => (
<MediaQuery maxWidth={800}>{children}</MediaQuery>
)