feat: add a github link on main page

apps/rpg-maestro-ui/src/app/clients/clients-ui.tsx

@@ -1,21 +1,25 @@
 import AudioPlayer from 'react-h5-audio-player';
+import H5AudioPlayer from 'react-h5-audio-player';
 import { ToastContainer } from 'react-toastify';
 import { useEffect, useRef, useState } from 'react';
-import H5AudioPlayer from 'react-h5-audio-player';
 import { resyncCurrentTrackIfNeeded } from '../track-sync/track-sync';
 import { displayError } from '../error-utils';
 import { PlayingTrack } from '@rpg-maestro/rpg-maestro-api-contract';
+import GithubSourceCodeLink from '../ui-components/github-source-code-link/github-source-code-link';
 
-export function ClientsUi(){
+export function ClientsUi() {
   const [currentTrack, setCurrentTrack] = useState<PlayingTrack | null>(null);
   const [intervalId, setIntervalId] = useState<NodeJS.Timeout | null>(null);
   const audioPlayer = useRef<H5AudioPlayer>();
 
   useEffect(() => {
     async function resyncCurrentTrackOnUi() {
-      const newerServerTrack = await resyncCurrentTrackIfNeeded(audioPlayer.current?.audio?.current?.currentTime ?? null, currentTrack);
-      if(newerServerTrack){
-        console.log("synchronizing track")
+      const newerServerTrack = await resyncCurrentTrackIfNeeded(
+        audioPlayer.current?.audio?.current?.currentTime ?? null,
+        currentTrack
+      );
+      if (newerServerTrack) {
+        console.log('synchronizing track');
         setCurrentTrack(newerServerTrack);
         if (!newerServerTrack) {
           throw new Error('Current track is not defined');
@@ -31,16 +35,17 @@ export function ClientsUi(){
             audioPlayer.current.audio.current.pause();
           } else {
             // playing
-            try{
+            try {
               await audioPlayer.current.audio.current.play();
-            }catch (error){
-              if (error instanceof DOMException && error.name === "NotAllowedError") {
-                console.error(`Play failed: User interaction with the document is required first. Original error: ${error}`);
+            } catch (error) {
+              if (error instanceof DOMException && error.name === 'NotAllowedError') {
+                console.error(
+                  `Play failed: User interaction with the document is required first. Original error: ${error}`
+                );
                 displayError('This is your first time using the app, please accept autoplay by hitting play :)');
               } else {
-                console.error("An unexpected error occurred:", error);
+                console.error('An unexpected error occurred:', error);
               }
-
             }
           }
         } else {
@@ -57,22 +62,19 @@ export function ClientsUi(){
     return () => clearInterval(id);
   }, [currentTrack]);
 
-  return <>
-    <div>
-      <h1>RPG-Maestro player UI</h1>
-
+  return (
+    <>
       <div>
-        <h3>{currentTrack?.name}</h3>
-      <AudioPlayer
-        src={currentTrack?.url}
-        ref={audioPlayer}
-        loop={true}
-
-      />
+        <div style={{ display: 'flex', flexDirection: 'column', textAlign: 'center', rowGap: '10vh' }}>
+          <h1>RPG-Maestro player UI</h1>
+          <div>
+            <h3>{currentTrack?.name}</h3>
+            <AudioPlayer src={currentTrack?.url} ref={audioPlayer} loop={true} />
+          </div>
+          <GithubSourceCodeLink />
+        </div>
+        <ToastContainer limit={5} />
       </div>
-
-      <ToastContainer limit={5}
-      />
-    </div>
-  </>
-}
+    </>
+  );
+}

apps/rpg-maestro-ui/src/app/ui-components/github-source-code-link/github-source-code-link.css

@@ -0,0 +1,28 @@
+.github-link-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 1rem;
+}
+
+.github-link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: #000;
+    font-weight: 500;
+    transition: color 0.2s ease-in-out;
+}
+
+.github-link:hover {
+    color: #0366d6; /* GitHub blue */
+}
+
+.github-logo {
+    width: 24px;
+    height: 24px;
+}
+
+.github-link-text {
+    margin-left: 8px;
+}

apps/rpg-maestro-ui/src/app/ui-components/github-source-code-link/github-source-code-link.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import "./github-source-code-link.css"; // Import the CSS file
+
+const GitHubLink = () => {
+  return (
+    <div className="github-link-container">
+      <a
+        href="https://github.com/AcevedoR/rpg-maestro"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="github-link"
+      >
+        {/* Inline SVG for GitHub Logo */}
+        <svg
+          className="github-logo"
+          viewBox="0 0 16 16"
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M8 0C3.58 0 0 3.659 0 8.168c0 3.613 2.29 6.675 5.47 7.756.4.074.547-.178.547-.396 0-.196-.007-.717-.01-1.407-2.226.492-2.695-1.088-2.695-1.088-.364-.933-.89-1.181-.89-1.181-.727-.508.056-.497.056-.497.805.057 1.228.841 1.228.841.715 1.252 1.873.89 2.329.68.073-.534.28-.89.508-1.094-1.777-.205-3.644-.918-3.644-4.089 0-.903.317-1.641.84-2.22-.084-.206-.364-1.03.08-2.146 0 0 .67-.218 2.2.84.638-.181 1.322-.272 2.004-.276.682.004 1.366.095 2.005.276 1.53-1.058 2.2-.84 2.2-.84.444 1.116.164 1.94.08 2.146.524.58.84 1.317.84 2.22 0 3.18-1.868 3.882-3.65 4.082.287.252.54.75.54 1.51 0 1.09-.01 1.966-.01 2.234 0 .22.145.476.55.395C13.71 14.84 16 11.78 16 8.168 16 3.659 12.42 0 8 0z"/>
+        </svg>
+        <span className="github-link-text">View source code</span>
+      </a>
+    </div>
+  );
+};
+
+export default GitHubLink;