More blank components and stories to be filled in

web/stories/Follower.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import * as FollowerComponent from '../components/Follower';
+
+export default {
+  title: 'owncast/Follower',
+  component: FollowerComponent,
+  parameters: {},
+} as ComponentMeta<typeof FollowerComponent>;
+
+const Template: ComponentStory<typeof FollowerComponent> = args => <FollowerComponent {...args} />;
+
+export const Example = Template.bind({});
+Example.args = {
+  follower: {
+    name: 'John Doe',
+    description: 'User',
+    username: '@account@domain.tld',
+    image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
+    link: 'https://yahoo.com',
+  },
+};

web/stories/Followercollection.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import FollowerCollection from '../components/FollowersCollection';
+
+export default {
+  title: 'owncast/Follower collection',
+  component: FollowerCollection,
+  parameters: {},
+} as ComponentMeta<typeof FollowerCollection>;
+
+const Template: ComponentStory<typeof FollowerCollection> = args => (
+  <FollowerCollection {...args} />
+);
+
+export const Example = Template.bind({});
+Example.args = {
+  followers: [
+    {
+      name: 'John Doe',
+      description: 'User',
+      username: '@account@domain.tld',
+      image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
+      link: 'https://yahoo.com',
+    },
+    {
+      name: 'John Doe',
+      description: 'User',
+      username: '@account@domain.tld',
+      image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
+      link: 'https://yahoo.com',
+    },
+    {
+      name: 'John Doe',
+      description: 'User',
+      username: '@account@domain.tld',
+      image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
+      link: 'https://yahoo.com',
+    },
+    {
+      name: 'John Doe',
+      description: 'User',
+      username: '@account@domain.tld',
+      image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
+      link: 'https://yahoo.com',
+    },
+    {
+      name: 'John Doe',
+      description: 'User',
+      username: '@account@domain.tld',
+      image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
+      link: 'https://yahoo.com',
+    },
+    {
+      name: 'John Doe',
+      description: 'User',
+      username: '@account@domain.tld',
+      image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
+      link: 'https://yahoo.com',
+    },
+  ],
+};

web/stories/Footer.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Footer from '../components/ui/Footer/Footer';
+
+export default {
+  title: 'owncast/Footer',
+  component: Footer,
+  parameters: {},
+} as ComponentMeta<typeof Footer>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-Footer
+const Template: ComponentStory<typeof Footer> = args => <Footer {...args} />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Example = Template.bind({});
+Example.args = {
+  version: 'v1.2.3',
+};

web/stories/Header.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Header from '../components/ui/Header/Header';
+
+export default {
+  title: 'owncast/Header',
+  component: Header,
+  parameters: {},
+} as ComponentMeta<typeof Header>;
+
+const Template: ComponentStory<typeof Header> = args => <Header {...args} />;
+
+export const Example = Template.bind({});
+Example.args = {
+  name: 'Example Stream Name',
+};