a tool for shared writing and social publishing
leaflet.pub
1"use client";
2import { useIsInitialRender, useIsMobile } from "src/hooks/isMobile";
3
4export function Media(props: {
5 mobile: boolean;
6 children: React.ReactNode;
7 className?: string;
8}) {
9 let initialRender = useIsInitialRender();
10 let isMobile = useIsMobile();
11 if (initialRender)
12 return (
13 <div
14 className={`${props.mobile ? "sm:hidden" : "hidden sm:block"} ${props.className}`}
15 >
16 {props.children}
17 </div>
18 );
19 if ((isMobile && props.mobile) || (!isMobile && !props.mobile))
20 return <div className={props.className}>{props.children}</div>;
21 return null;
22}
23
24export function MediaContents(props: {
25 mobile: boolean;
26 children: React.ReactNode;
27 className?: string;
28}) {
29 let initialRender = useIsInitialRender();
30 let isMobile = useIsMobile();
31 if (initialRender)
32 return (
33 <div
34 className={`${props.mobile ? "sm:hidden contents" : "hidden sm:contents"} ${props.className}`}
35 >
36 {props.children}
37 </div>
38 );
39 if ((isMobile && props.mobile) || (!isMobile && !props.mobile))
40 return <div className={props.className}>{props.children}</div>;
41 return null;
42}