vue-pult/docs/migration/footer/SHIFT_INDICATOR.md

Документация по переносу индикатора "Смена" в футере

Общая структура в React

• Расположение: В BottomPanel.tsx, левая часть flex, второй индикатор после ESP.
• Тип: Span или div flex items-center, text "Смена:", badge bg-green/red, text status.
• Зависимости: Tailwind CSS, useShift hook for smena status.
• JSX:
  Смена: открыта

.

Элементы

• Label: span "Смена:" (text-sm text-gray-300).
• Badge: Badge component bg-green-500 text-white "открыта" or bg-red-500 "закрыта".
• Dynamic: color/badge based on smena from hook.

Стили (Tailwind примеры)

• Container: flex items-center space-x-2.
• Badge: bg-green-500/red-500 text-white px-2 py-1 rounded text-xs.
• Text: text-sm text-gray-300.
• Responsive: text-xs mobile.

Взаимодействие

• Data: from useShift (smena open/closed), update on change.
• No click, passive indicator.
• In BottomPanel:
  shift indicator
  .

Vue маппинг

• :
  Смена: {{ smena ? 'открыта' : 'закрыта' }}
  . - Composables: useShift (smena).