`components/BubbeResponsive.tsx`

55 lines
'use client'

import { useState, useEffect } from 'react'
import MobileBubbe from './MobileBubbe'
import DesktopBubbe from './DesktopBubbe'

export default function BubbeResponsive() {
  const [isMobile, setIsMobile] = useState<boolean | null>(null)

  useEffect(() => {
    // Check both user agent and screen size
    const checkMobile = () => {
      const userAgentMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
      const screenMobile = window.innerWidth <= 768
      setIsMobile(userAgentMobile || screenMobile)
    }

    // Initial check
    checkMobile()

    // Add resize listener for responsive behavior
    window.addEventListener('resize', checkMobile)
    
    return () => {
      window.removeEventListener('resize', checkMobile)
    }
  }, [])

  // Show loading state while detecting
  if (isMobile === null) {
    return (
      <div style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'white',
        fontFamily: 'system-ui, -apple-system, sans-serif'
      }}>
        <div style={{ fontSize: '60px', marginBottom: '20px' }}>🥯</div>
        <h1 style={{ fontSize: '28px', marginBottom: '10px' }}>Dear Bubbe</h1>
        <p style={{ fontSize: '16px', opacity: 0.8 }}>Loading...</p>
      </div>
    )
  }

  // Render appropriate version
  return isMobile ? <MobileBubbe /> : <DesktopBubbe />
}