Add GA

Author: danohart

compontents/Layout.js

@@ -1,4 +1,5 @@
 import { Container, Row, Col } from "react-bootstrap";
+import { GoogleAnalytics } from "@next/third-parties/google";
 
 export default function Layout({ children }) {
   return (
@@ -10,6 +11,7 @@ export default function Layout({ children }) {
           </Col>
         </Row>
       </Container>
+      <GoogleAnalytics gaId='G-5TS75L7L97' />
     </>
   );
 }

package-lock.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@next/font": "13.1.6",
+    "@next/third-parties": "^15.1.3",
     "bootstrap": "^5.2.3",
     "eslint": "8.33.0",
     "eslint-config-next": "13.1.6",

package.json

@@ -255,7 +255,7 @@ export default function Select({
 
           <div className='mt-3'>
             <div className='d-flex flex-wrap gap-2 justify-content-center'>
-              {onlineUsers.map((user) => (
+              {onlineUsers.map((user, index) => (
                 <Badge key={user.username} className='user-badge'>
                   <span className='emoji-icon'>{user.icon}</span>
                   {user.username}
@@ -275,7 +275,7 @@ export default function Select({
           <Tab eventKey='playlist' title='Playlist'>
             {playlistId && (
               <>
-                <PlaylistInfo playlistId={playlistId} />{" "}
+                <PlaylistInfo playlistId={playlistId} />
                 <PlaylistReveal
                   playlistId={playlistId}
                   username={user}

pages/select.js

@@ -242,9 +242,13 @@ h1 {
     border: 1px solid $primary;
     font-size: 36px;
 
-    @include mobile {
+    @include tablet {
         font-size: 24px;
     }
+
+    @include mobile {
+        font-size: 16px;
+    }
 }
 
 .content-tabs {