28 lines
1.5 KiB
Markdown
28 lines
1.5 KiB
Markdown
# Документация по переносу кнопки "Пауза" в футере
|
||
|
||
## Общая структура в React
|
||
- **Расположение**: В BottomPanel.tsx, центр группы элементов.
|
||
- **Тип**: PauseButton компонент, button with onClick={togglePause}, title "Пауза/Возобновить".
|
||
- **Зависимости**: Tailwind CSS, lucide-react (Pause/Play icon), usePauseSystem for isPaused.
|
||
- **JSX**: <PauseButton /> — 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: <PauseButton /> in center.
|
||
|
||
## Vue маппинг
|
||
- <template>: <button @click="togglePause" class="w-16 h-16 rounded-full bg-red-500 ..." title="Пауза">
|
||
<component :is="isPaused ? Play : Pause" class="w-6 h-6" />
|
||
</button>.
|
||
- Composables: usePauseSystem (isPaused, togglePause). |