Add action buttons and status bar

web/components/action-buttons/ActionButton.module.scss

@@ -0,0 +1,7 @@
+.button {
+  margin: 3px;
+  .icon {
+    width: 20px;
+    margin-right: 3px;
+  }
+}

web/components/action-buttons/ActionButton.tsx

@@ -1,17 +1,18 @@
 import { Button } from 'antd';
 import { ExternalAction } from '../interfaces/external-action.interface';
+import s from './ActionButton.module.scss';
 
 interface Props {
   action: ExternalAction;
 }
 
-export default function ExternalActionButton(props: Props) {
+export default function ActionButton(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} />
+    <Button type="primary" className={`${s.button}`} style={{ backgroundColor: color }}>
+      <img src={icon} className={`${s.icon}`} alt={description} />
       {title}
     </Button>
   );

web/components/action-buttons/ActionButtonRow.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import s from './ActionButtons.module.scss';
+
+interface Props {
+  children: React.ReactNode[];
+}
+
+export default function ActionButtonRow(props: Props) {
+  const { children } = props;
+
+  return <div className={`${s.row}`}>{children}</div>;
+}

web/components/action-buttons/ActionButtons.module.scss

@@ -0,0 +1,10 @@
+.row {
+  margin: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  button {
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+}

web/components/action-buttons/ExternalActionButtonRow.tsx

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