add bmp launcher instructions

src/app/_components/os-download-button.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { DownloadIcon } from 'lucide-react'
+import { useEffect, useState } from 'react'
+
+type OS = 'Windows' | 'Mac' | 'Linux' | 'Unknown'
+
+const DOWNLOAD_LINKS = {
+  Windows:
+    'https://github.com/Balatro-Multiplayer/Balatro-Multiplayer-Launcher/releases/latest/download/balatro-multiplayer-launcher.exe',
+  Mac: 'https://github.com/Balatro-Multiplayer/Balatro-Multiplayer-Launcher/releases/latest/download/balatro-multiplayer-launcher.dmg',
+  Linux:
+    'https://github.com/Balatro-Multiplayer/Balatro-Multiplayer-Launcher/releases/latest/download/balatro-multiplayer-launcher.deb',
+}
+
+export function OSDownloadButton() {
+  const [detectedOS, setDetectedOS] = useState<OS>('Unknown')
+  const [selectedOS, setSelectedOS] = useState<OS>('Unknown')
+  const [showOptions, setShowOptions] = useState(false)
+
+  useEffect(() => {
+    // Detect OS on client side
+    const userAgent = window.navigator.userAgent.toLowerCase()
+
+    if (userAgent.indexOf('win') !== -1) {
+      setDetectedOS('Windows')
+      setSelectedOS('Windows')
+    } else if (userAgent.indexOf('mac') !== -1) {
+      setDetectedOS('Mac')
+      setSelectedOS('Mac')
+    } else if (
+      userAgent.indexOf('linux') !== -1 ||
+      userAgent.indexOf('x11') !== -1
+    ) {
+      setDetectedOS('Linux')
+      setSelectedOS('Linux')
+    }
+  }, [])
+
+  const downloadLink =
+    DOWNLOAD_LINKS[selectedOS as keyof typeof DOWNLOAD_LINKS] || ''
+  const downloadText = `Download for ${selectedOS}`
+
+  return (
+    <div className='flex flex-col items-center gap-2'>
+      {detectedOS !== 'Unknown' && (
+        <>
+          <Button asChild className='no-underline'>
+            <a href={downloadLink} rel='noopener noreferrer'>
+              <DownloadIcon className='mr-2' />
+              {downloadText}
+            </a>
+          </Button>
+
+          <div className='mt-1 text-sm'>
+            <button
+              onClick={() => setShowOptions(!showOptions)}
+              className='text-blue-500 hover:underline'
+            >
+              {showOptions
+                ? 'Hide other options'
+                : 'Not using ' + detectedOS + '?'}
+            </button>
+          </div>
+
+          {showOptions && (
+            <div className='mt-2 flex gap-2'>
+              {Object.keys(DOWNLOAD_LINKS).map(
+                (os) =>
+                  os !== selectedOS && (
+                    <Button
+                      key={os}
+                      variant='outline'
+                      size='sm'
+                      onClick={() => setSelectedOS(os as OS)}
+                      className='no-underline'
+                    >
+                      {os}
+                    </Button>
+                  )
+              )}
+            </div>
+          )}
+        </>
+      )}
+
+      {detectedOS === 'Unknown' && (
+        <div className='flex flex-col gap-2'>
+          <p className='text-center'>Select your operating system:</p>
+          <div className='flex justify-center gap-2'>
+            {Object.keys(DOWNLOAD_LINKS).map((os) => (
+              <Button
+                key={os}
+                variant={selectedOS === os ? 'default' : 'outline'}
+                onClick={() => setSelectedOS(os as OS)}
+                className='no-underline'
+              >
+                {os}
+              </Button>
+            ))}
+          </div>
+
+          {selectedOS !== 'Unknown' && (
+            <Button asChild className='mt-2 no-underline'>
+              <a href={downloadLink} rel='noopener noreferrer'>
+                <DownloadIcon className='mr-2' />
+                {downloadText}
+              </a>
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}