Render actual external action buttons. Closes #1997

web/components/action-buttons/ActionButton.tsx

@@ -9,7 +9,7 @@ interface Props {
 }
 
 export default function ActionButton({
-  action: { url, title, description, icon, openExternally },
+  action: { url, title, description, icon, color, openExternally },
 }: Props) {
   const [showModal, setShowModal] = useState(false);
 
@@ -23,7 +23,12 @@ export default function ActionButton({
 
   return (
     <>
-      <Button type="primary" className={`${s.button}`} onClick={buttonClicked}>
+      <Button
+        type="primary"
+        className={`${s.button}`}
+        onClick={buttonClicked}
+        style={{ backgroundColor: color }}
+      >
         <img src={icon} className={`${s.icon}`} alt={description} />
         {title}
       </Button>

web/components/ui/Content/Content.tsx

@@ -53,22 +53,10 @@ export default function ContentComponent() {
   const chatUserId = useRecoilValue<string>(chatUserIdAtom);
   const { viewerCount, lastConnectTime, lastDisconnectTime } =
     useRecoilValue<ServerStatus>(serverStatusState);
-  const { extraPageContent, version, name, summary } = clientConfig;
+  const { extraPageContent, version, name, summary, externalActions } = clientConfig;
   const [showNotifyReminder, setShowNotifyReminder] = useState(false);
   const [showNotifyPopup, setShowNotifyPopup] = useState(false);
 
-  // This is example content. It should be removed.
-  const externalActions = [
-    {
-      url: 'https://owncast.online/docs',
-      title: 'Example button',
-      description: 'Example button description',
-      icon: 'https://owncast.online/images/logo.svg',
-      color: '#5232c8',
-      openExternally: false,
-    },
-  ];
-
   const externalActionButtons = externalActions.map(action => (
     <ActionButton key={action.url} action={action} />
   ));