added music player

pages/index.tsx

@@ -17,6 +17,7 @@ import { SidebarNav } from '@components/Sidebar/SidebarNav'
 import { MapNav } from '@components/MapNav'
 
 import { SnowNav } from '@components/SnowNav'
+import { AudioPlayer } from '@components/AudioPlayer'
 import { IntroModal } from '@components/IntroModal'
 
 import { getMapData } from '@lib/loadMapData'
@@ -220,6 +221,7 @@ const MapSite: NextPage = (mapData: any) => {
         setMarketId={setMarketId}
       />
       <SnowNav></SnowNav>
+      <AudioPlayer></AudioPlayer>
       <MapComponent
         mapData={mapData}
         marketsData={marketsData}

src/components/AudioPlayer/index.tsx

@@ -0,0 +1,56 @@
+import React, { useState, useRef } from 'react'
+import classNames from 'classnames'
+import { Music } from '../Icons'
+
+const src = '/christmas-star-jazzhop-background-music-for-video-12073.mp3'
+
+export const AudioPlayer = () => {
+  const [isPlaying, setIsPlaying] = useState(false)
+  const audioRef = useRef<HTMLAudioElement>(null)
+
+  const togglePlayPause = () => {
+    if (audioRef.current) {
+      if (audioRef.current.paused) {
+        audioRef.current.play()
+        setIsPlaying(true)
+      } else {
+        audioRef.current.pause()
+        setIsPlaying(false)
+      }
+    }
+  }
+
+  const handleSongEnd = () => {
+    setIsPlaying(false)
+    if (audioRef.current) {
+      audioRef.current.currentTime = 0
+    }
+  }
+  const navClasses =
+    'hover:bg-gold hover:text-darkblue h-10 w-10 cursor-pointer list-none text-center grid place-items-center rounded-full'
+
+  return (
+    <nav
+      className={
+        'fixed bottom-0 p-4 ease-in-out duration-300 z-10 right-0 top-12 h-min'
+      }
+    >
+      <audio ref={audioRef} src={src} onEnded={handleSongEnd} />
+
+      <button
+        title="snow on/off"
+        className={classNames(
+          isPlaying ? 'bg-darkblue text-gold' : 'bg-gold text-darkblue ',
+          navClasses
+        )}
+        onClick={togglePlayPause}
+      >
+        <span className="mr-1">
+          <Music />
+        </span>
+      </button>
+    </nav>
+  )
+}
+
+export default AudioPlayer

src/components/Icons/Music.tsx

@@ -0,0 +1,27 @@
+import { FC } from 'react'
+import { IconPropType } from './IconPropType'
+
+export const Music: FC<IconPropType> = ({
+  color1,
+  color2,
+  color3,
+  strokeWidth = 2,
+  size = 24,
+  ...props
+}) => {
+  const col1 = color1
+  const col2 = color3 || color2 || color1
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill={'currentColor'}
+      viewBox="0 0 16 16"
+    >
+      <path d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z" />
+      <path fill-rule="evenodd" d="M14 11V2h1v9h-1zM6 3v10H5V3h1z" />
+      <path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z" />
+    </svg>
+  )
+}

src/components/Icons/index.tsx

@@ -32,3 +32,4 @@ export { Globe } from './Globe'
 export { Calendar } from './Calendar'
 export { Copy } from './Copy'
 export { Search } from './Search'
+export { Music } from './Music'