Bob AI: Add a lofi music player component to the layout that plays b

2026-02-24 15:27:10 +00:00
parent 94634a0425
commit 7dc207ddc4
1 changed files with 44 additions and 0 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -19,11 +19,29 @@ export const metadata: Metadata = {
  keywords: ["media buying", "advertising strategy", "digital marketing", "brand growth", "ROI optimization"]
 };

+'use client';
+
+import { useState } from 'react';
+
 export default function RootLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const toggleMusic = () => {
+    const audio = document.getElementById('lofi-music') as HTMLAudioElement;
+    if (audio) {
+      if (isPlaying) {
+        audio.pause();
+      } else {
+        audio.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
@@ -32,6 +50,32 @@ export default function RootLayout({
        >
          <Tag />
          {children}
+          
+          {/* Lofi Music Player */}
+          <audio
+            id="lofi-music"
+            src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
+            loop
+            preload="metadata"
+          />
+          
+          {/* Floating Music Toggle Button */}
+          <button
+            onClick={toggleMusic}
+            className="fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center hover:scale-110 active:scale-95"
+            aria-label="Toggle lofi music"
+            title={isPlaying ? "Pause music" : "Play lofi music"}
+          >
+            {isPlaying ? (
+              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
+              </svg>
+            ) : (
+              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M8 5v14l11-7z" />
+              </svg>
+            )}
+          </button>
        
        <script
          dangerouslySetInnerHTML={{