33 lines
1.6 KiB
Markdown
33 lines
1.6 KiB
Markdown
# Документация по переносу индикатора "Смена" в футере
|
||
|
||
## Общая структура в 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). |