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

2026-02-24 15:27:10 +00:00
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={{