import { createMedia } from '@artsy/fresnel' ; import classNames from 'classnames' ; import type { PropsWithChildren } from 'react' ; import tailwindScreens from '@/utils/tailwindScreens' ; type BreakpointProps = PropsWithChildren < { className ? : string ; } > ; export type Breakpoints = 'laptop' | 'mobile' | 'tablet' ; export const AppMedia = createMedia ( { breakpoints : { mobile : 0 , ... tailwindScreens , } , } ) ; export const mediaStyles = AppMedia . createMediaStyle ( ) ; export const { Media , MediaContextProvider } = AppMedia ; const getMediaRender = ( children , className ? ) => { return function MediaRender ( mediaClassNames , renderChildren ) { return ( < div className = { classNames ( mediaClassNames , className ) } suppressHydrationWarning = { ! renderChildren } > { renderChildren ? children : null } < /div>); } ; } ; export function Mobile ( { children , className } ) { return < Media at = "mobile" > { getMediaRender ( children , className ) } < /Media>; } export function Tablet ( { children , className } ) { return < Media lessThan = "laptop" > { getMediaRender ( children , className ) } < /Media>; } export function Laptop ( { children , className } ) { return ( < Media greaterThanOrEqual = "laptop" > { getMediaRender ( children , className ) } < /Media>); }