feat: added index.tsx files for random controller

src/components/header/index.tsx

@@ -7,6 +7,7 @@ import { GlobalVolumeController } from './global-volume-controller'
 import { title } from './styles'
 import { Pomodoro } from './pomodoro'
 import { ComboList } from './combo-list'
+import { RandomModeButton } from './random-controller'
 
 export const Header: React.FC = () => {
   const theme = useThemeStore(set => set.theme)
@@ -20,6 +21,7 @@ export const Header: React.FC = () => {
         <Pomodoro />
       </div>
       <div className="right-10 flex items-center gap-3">
+        <RandomModeButton />
         <GlobalVolumeController />
         <ThemeMenu />
         <ComboList />

src/components/header/random-controller/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { FiZap, FiZapOff } from 'react-icons/fi'
+
+import { useThemeStore } from '@/stores/theme-store'
+import { controllerButton } from './styles'
+import { useGlobalRandomModeStore } from '@/stores/random-mode-store'
+
+export function RandomModeButton() {
+  const { randomMode, setRandomMode } = useGlobalRandomModeStore()
+  const theme = useThemeStore(set => set.theme)
+
+  return (
+    <button
+      title="Enable/Disable Random Mode"
+      className={controllerButton({ theme })}
+      onClick={() => setRandomMode(!randomMode)}
+      data-umami-event="Enable/Disable Random Mode"
+    >
+      {randomMode ? <FiZapOff size={25} /> : <FiZap size={25} />}
+    </button>
+  )
+}