Add WIP external action buttons

web/components/ExternalActionButton.tsx

@@ -1,9 +0,0 @@
-import { ExternalAction } from '../interfaces/external-action.interface';
-
-interface Props {
-  action: ExternalAction;
-}
-
-export default function ExternalActionButton(props: Props) {
-  return <div>External action button component goes here</div>;
-}

web/components/action-buttons/ExternalActionButton.tsx

@@ -0,0 +1,18 @@
+import { Button } from 'antd';
+import { ExternalAction } from '../interfaces/external-action.interface';
+
+interface Props {
+  action: ExternalAction;
+}
+
+export default function ExternalActionButton(props: Props) {
+  const { action } = props;
+  const { url, title, description, icon, color, openExternally } = action;
+
+  return (
+    <Button type="primary" style={{ backgroundColor: color }}>
+      <img src={icon} width="30px" alt={description} />
+      {title}
+    </Button>
+  );
+}

web/components/action-buttons/ExternalActionButtonRow.tsx

@@ -0,0 +1,18 @@
+import { ExternalAction } from '../interfaces/external-action.interface';
+import ExternalActionButton from './ExternalActionButton';
+
+interface Props {
+  actions: ExternalAction[];
+}
+
+export default function ExternalActionButtonRow(props: Props) {
+  const { actions } = props;
+
+  return (
+    <div>
+      {actions.map(action => (
+        <ExternalActionButton key={action.id} action={action} />
+      ))}
+    </div>
+  );
+}

web/components/ui/Content/Content.tsx

@@ -18,6 +18,7 @@ import ChatContainer from '../../chat/ChatContainer';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import { ChatState, ChatVisibilityState } from '../../../interfaces/application-state';
 import ChatTextField from '../../chat/ChatTextField/ChatTextField';
+import ExternalActionButtonRow from '../../action-buttons/ExternalActionButtonRow';
 
 const { TabPane } = Tabs;
 
@@ -39,6 +40,18 @@ export default function FooterComponent() {
     <Content className={`${s.root}`} data-columns={chatOpen ? 2 : 1}>
       <div className={`${s.leftCol}`}>
         <OwncastPlayer source="https://watch.owncast.online" />
+        <ExternalActionButtonRow
+          actions={[
+            {
+              url: 'https://owncast.online/docs',
+              title: 'Example button',
+              description: 'Example button description',
+              icon: 'https://owncast.online/images/logo.svg',
+              color: '#5232c8',
+              openExternally: true,
+            },
+          ]}
+        />
         <div className={`${s.lowerRow}`}>
           <Tabs defaultActiveKey="1" type="card">
             <TabPane tab="About" key="1">

web/stories/ExternalActionButton.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ExternalActionButton from '../components/ExternalActionButton';
+import ExternalActionButton from '../components/action-buttons/ExternalActionButton';
 
 export default {
   title: 'owncast/External action button',

web/stories/ExternalActionButtonRow.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ExternalActionButtonRow from '../components/action-buttons/ExternalActionButtonRow';
+
+export default {
+  title: 'owncast/External action button row',
+  component: ExternalActionButtonRow,
+  parameters: {},
+} as ComponentMeta<typeof ExternalActionButtonRow>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ExternalActionButtonRow> = args => (
+  <ExternalActionButtonRow {...args} />
+);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Example1 = Template.bind({});
+Example1.args = {
+  actions: [
+    {
+      url: 'https://owncast.online/docs',
+      title: 'Documentation',
+      description: 'Owncast Documentation',
+      icon: 'https://owncast.online/images/logo.svg',
+      color: '#5232c8',
+      openExternally: false,
+    },
+    {
+      url: 'https://opencollective.com/embed/owncast/donate',
+      title: 'Support Owncast',
+      description: 'Contribute to Owncast',
+      icon: 'https://opencollective.com/static/images/opencollective-icon.svg',
+      color: '#2b4863',
+      openExternally: false,
+    },
+  ],
+};