bsky-app/src/view/com/util/layouts/withBreakpoints.tsx
2023-08-30 15:15:10 -07:00

21 lines
578 B
TypeScript

import React from 'react'
import {isNative} from 'platform/detection'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
export const withBreakpoints =
<P extends object>(
Mobile: React.ComponentType<P>,
Tablet: React.ComponentType<P>,
Desktop: React.ComponentType<P>,
): React.FC<P> =>
(props: P) => {
const {isMobile, isTabletOrMobile} = useWebMediaQueries()
if (isMobile || isNative) {
return <Mobile {...props} />
}
if (isTabletOrMobile) {
return <Tablet {...props} />
}
return <Desktop {...props} />
}