artemiyzverev

Самый простой и часто используемый способ — проверять ширину экрана. Например, если window.innerWidth < 768, считаем, что это «мобильный» режим, а если больше — «десктоп». Либо использовать любые другие «брейкпоинты», которые вам подходят.

// Псевдокод, показывающий идею

const handlePayClick = () => {
  // Проверяем ширину экрана
  if (window.innerWidth < 768) {
    // Открываем выдвижную панель с деталями оплаты
    setIsSecondSheetOpen(true);
  } else {
    // Переходим на другую страницу (Desktop-версия)
    navigate('/payment');
  }
};

Есть еще вариант использовать библиотеку react-responsive и ее хук useMediaQuery:

import { useMediaQuery } from 'react-responsive';

function YourComponent() {
  // Определяем, что это мобильная версия, если ширина экрана меньше 768
  const isMobile = useMediaQuery({ query: '(max-width: 768px)' });

  const handlePayClick = () => {
    if (isMobile) {
      setIsSecondSheetOpen(true);
    } else {
      navigate('/payment');
    }
  };

  return (
    <button onClick={handlePayClick}>
      Оплатить
    </button>
  );
}

По сути, два этих варианта подойдут в контексте текущей задачи, какой использовать - решать уже вам, но я бы предпочел второй через react-responsive