7 Design Tricks to Make Your Website Feel Like a Native Mobile App

import { useState, useRef } from 'react'

export default function PullToRefresh({ onRefresh, children }) {
  const [pulling, setPulling] = useState(false)
  const [pullDistance, setPullDistance] = useState(0)
  const startY = useRef(0)

  const handleTouchStart = (e) => {
    startY.current = e.touches[0].clientY
  }

  const handleTouchMove = (e) => {
    const currentY = e.touches[0].clientY
    const distance = currentY - startY.current
    
    if (distance > 0 && window.scrollY === 0) {
      setPulling(true)
      setPullDistance(Math.min(distance * 0.5, 100))
    }
  }

  const handleTouchEnd = async () => {
    if (pullDistance > 60) {
      await onRefresh()
    }
    setPulling(false)
    setPullDistance(0)
  }

  return (
    <div
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      <div 
        style={{ 
          transform: `translateY(${pullDistance}px)`,
          transition: pulling ? 'none' : 'transform 0.3s'
        }}
      >
        {pullDistance > 0 && (
          <div className="text-center py-4">
            <RefreshIcon 
              className="animate-spin mx-auto" 
              style={{ opacity: pullDistance / 60 }}
            />
          </div>
        )}
        {children}
      </div>
    </div>
  )
}