Split out desktop and mobile layouts to make it easier to work on them

web/components/ui/Content/DesktopContent.tsx

@@ -0,0 +1,76 @@
+import React, { ComponentType, FC } from 'react';
+import dynamic from 'next/dynamic';
+import { TabsProps } from 'antd';
+import { SocialLink } from '../../../interfaces/social-link.model';
+import styles from './Content.module.scss';
+import { CustomPageContent } from '../CustomPageContent/CustomPageContent';
+import { ContentHeader } from '../../common/ContentHeader/ContentHeader';
+
+export type DesktopContentProps = {
+  name: string;
+  streamTitle: string;
+  summary: string;
+  tags: string[];
+  socialHandles: SocialLink[];
+  extraPageContent: string;
+  setShowFollowModal: (show: boolean) => void;
+  supportFediverseFeatures: boolean;
+};
+
+// lazy loaded components
+
+const Tabs: ComponentType<TabsProps> = dynamic(() => import('antd').then(mod => mod.Tabs), {
+  ssr: false,
+});
+
+const FollowerCollection = dynamic(
+  () =>
+    import('../followers/FollowerCollection/FollowerCollection').then(
+      mod => mod.FollowerCollection,
+    ),
+  {
+    ssr: false,
+  },
+);
+
+export const DesktopContent: FC<DesktopContentProps> = ({
+  name,
+  streamTitle,
+  summary,
+  tags,
+  socialHandles,
+  extraPageContent,
+  setShowFollowModal,
+  supportFediverseFeatures,
+}) => {
+  const aboutTabContent = <CustomPageContent content={extraPageContent} />;
+  const followersTabContent = (
+    <div>
+      <FollowerCollection name={name} onFollowButtonClick={() => setShowFollowModal(true)} />
+    </div>
+  );
+
+  const items = [{ label: 'About', key: '2', children: aboutTabContent }];
+  if (supportFediverseFeatures) {
+    items.push({ label: 'Followers', key: '3', children: followersTabContent });
+  }
+
+  return (
+    <>
+      <div className={styles.lowerHalf} id="skip-to-content">
+        <ContentHeader
+          name={name}
+          title={streamTitle}
+          summary={summary}
+          tags={tags}
+          links={socialHandles}
+          logo="/logo"
+        />
+      </div>
+
+      <div className={styles.lowerSection}>
+        {items.length > 1 ? <Tabs defaultActiveKey="0" items={items} /> : aboutTabContent}
+      </div>
+    </>
+  );
+};