lobe-chat

1
'use client';
2

3
import { Loader } from 'next/dist/shared/lib/dynamic';
4
import dynamic from 'next/dynamic';
5
import { FC, PropsWithChildren, memo } from 'react';
6

7
import MobileSwitchLoading from '@/features/MobileSwitchLoading';
8
import { useIsMobile } from '@/hooks/useIsMobile';
9

10
interface ClientResponsiveLayoutProps {
11
  Desktop: FC<PropsWithChildren>;
12
  Mobile: Loader;
13
}
14

15
const ClientResponsiveLayout = ({ Desktop, Mobile }: ClientResponsiveLayoutProps) => {
16
  const MobileComponent = dynamic(Mobile, {
17
    loading: MobileSwitchLoading,
18
    ssr: false,
19
  }) as FC<PropsWithChildren>;
20

21
  const Layout = memo<PropsWithChildren>(({ children }) => {
22
    const mobile = useIsMobile();
23

24
    return mobile ? <MobileComponent>{children}</MobileComponent> : <Desktop>{children}</Desktop>;
25
  });
26

27
  Layout.displayName = 'ClientLayout';
28

29
  return Layout;
30
};
31

32
export default ClientResponsiveLayout;
33