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

## Общая структура в 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**: <div class="flex items-center space-x-2">
  <span class="text-sm text-gray-300">Смена:</span>
  <Badge className="bg-green-500 text-white">открыта</Badge>
</div>.

## Элементы
- 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: <div flex space-x-2> shift indicator </div>.

## Vue маппинг
- <template>: <div class="flex items-center space-x-2">
  <span class="text-sm text-gray-300">Смена:</span>
  <Badge :class="['px-2 py-1 rounded text-xs', smena ? 'bg-green-500' : 'bg-red-500']" class="text-white">{{ smena ? 'открыта' : 'закрыта' }}</Badge>
</div>.
- Composables: useShift (smena).