Start of empty follower tab state. For #1913

web/components/ui/followers/FollowerCollection/FollowerCollection.tsx

@@ -2,9 +2,14 @@ import { FC, useEffect, useState } from 'react';
 import { Col, Pagination, Row } from 'antd';
 import { Follower } from '../../../../interfaces/follower';
 import { SingleFollower } from '../SingleFollower/SingleFollower';
-import styles from '../SingleFollower/SingleFollower.module.scss';
+import styles from './FollowerCollection.module.scss';
+import { FollowButton } from '../../../action-buttons/FollowButton';
 
-export const FollowerCollection: FC = () => {
+export type FollowerCollectionProps = {
+  name: string;
+};
+
+export const FollowerCollection: FC<FollowerCollectionProps> = ({ name }) => {
   const ENDPOINT = '/api/followers';
   const ITEMS_PER_PAGE = 24;
 
@@ -35,7 +40,20 @@ export const FollowerCollection: FC = () => {
   }, [page]);
 
   const noFollowers = (
-    <div>A message explaining how to follow goes here since there are no followers.</div>
+    <div className={styles.noFollowers}>
+      <h2>Be the first follower!</h2>
+      <p>
+        {name !== 'Owncast' ? name : 'This server'} is a part of the{' '}
+        <a href="https://owncast.online/join-fediverse">Fediverse</a>, an interconnected network of
+        independent users and servers.
+      </p>
+      <p>
+        By following {name !== 'Owncast' ? name : 'this server'} you&apos;ll be able to get updates
+        from the stream, share it with others, and and show your appreciation when it goes live, all
+        from your own Fediverse account.
+      </p>
+      <FollowButton />
+    </div>
   );
 
   if (!followers?.length) {