1.5 KiB
1.5 KiB
Документация по переносу кнопки "Пауза" в футере
Общая структура в React
- Расположение: В BottomPanel.tsx, центр группы элементов.
- Тип: PauseButton компонент, button with onClick={togglePause}, title "Пауза/Возобновить".
- Зависимости: Tailwind CSS, lucide-react (Pause/Play icon), usePauseSystem for isPaused.
- JSX: — button class "w-16 h-16 rounded-full bg-red-500 hover:bg-red-600 flex items-center justify-center shadow-lg transition-all" title="Пауза" onClick={handlePauseToggle}.
- Icon: Pause (w-6 h-6, white) or Play if paused.
Элементы
- Icon: Pause or Play (w-6 h-6, white).
- Title: "Пауза" or "Возобновить".
- Dynamic: icon/color based on isPaused from hook.
Стили (Tailwind примеры)
- Button: w-16 h-16 rounded-full bg-red-500 hover:bg-red-600 flex items-center justify-center shadow-lg transition-all.
- Hover: hover:bg-red-600.
- Responsive: w-12 h-12 mobile, min-height 44px touch.
Взаимодействие
- Click: toggle isPaused via usePauseSystem, send 'pause'/'resume' via WebSocket.
- In BottomPanel: in center.
Vue маппинг
- : <button @click="togglePause" class="w-16 h-16 rounded-full bg-red-500 ..." title="Пауза"> .
- Composables: usePauseSystem (isPaused, togglePause).