Move socialIconsList to its own component

webroot/js/app.js

@@ -3,7 +3,7 @@ import htm from 'https://unpkg.com/htm?module';
 const html = htm.bind(h);
 
 import { OwncastPlayer } from './components/player.js';
-import SocialIcon from './components/social.js';
+import SocialIconsList from './components/socialIconsList.js';
 import UsernameForm from './components/chat/username.js';
 import Chat from './components/chat/chat.js';
 import Websocket from './utils/websocket.js';
@@ -400,31 +400,6 @@ export default class App extends Component {
         )
       : null;
 
-    const socialIconsList = (function () {
-      if (socialHandles === null || socialHandles.length === 0) {
-        return null;
-      }
-
-	     const list = socialHandles.map(
-        (item, index) => html`
-          <li key="social${index}">
-            <${SocialIcon} platform=${item.platform} url=${item.url} />
-          </li>
-        `
-      );
-	
-	    return html`<ul
-          id="social-list"
-          class="social-list flex flex-row items-center justify-start flex-wrap"
-        >
-          <span class="follow-label text-xs	font-bold mr-2 uppercase"
-            >Follow me:
-          </span>
-          ${list}
-        </ul>
-	    `;
-    })();
-
     const mainClass = playerActive ? 'online' : '';
     const streamInfoClass = streamOnline ? 'online' : ''; // need?
 
@@ -532,7 +507,7 @@ export default class App extends Component {
                   >${streamerName}</span
                 >
               </h2>
-              ${socialIconsList}
+              <${SocialIconsList} handles=${socialHandles} />
               <div
                 id="stream-summary"
                 class="stream-summary my-4"