74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
interface Room {
|
|
id: string
|
|
name: string
|
|
emoji: string
|
|
deviceCount: number
|
|
}
|
|
|
|
interface RoomTabsProps {
|
|
rooms: Room[]
|
|
active: string
|
|
onChange: (id: string) => void
|
|
}
|
|
|
|
export default function RoomTabs({ rooms, active, onChange }: RoomTabsProps) {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
gap: 10,
|
|
padding: '12px 20px',
|
|
overflowX: 'auto',
|
|
flexShrink: 0,
|
|
WebkitOverflowScrolling: 'touch' as any,
|
|
scrollbarWidth: 'none',
|
|
msOverflowStyle: 'none',
|
|
}}
|
|
>
|
|
{rooms.map(room => {
|
|
const isActive = active === room.id
|
|
return (
|
|
<button
|
|
key={room.id}
|
|
onClick={() => onChange(room.id)}
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
gap: 2,
|
|
padding: '10px 18px',
|
|
borderRadius: 14,
|
|
background: isActive ? 'rgba(0,212,255,0.12)' : 'rgba(255,255,255,0.04)',
|
|
border: isActive ? '1px solid rgba(0,212,255,0.3)' : '1px solid rgba(255,255,255,0.06)',
|
|
minWidth: 90,
|
|
flexShrink: 0,
|
|
touchAction: 'manipulation',
|
|
WebkitTapHighlightColor: 'transparent',
|
|
transition: 'all 0.2s ease',
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
<span style={{ fontSize: 18 }}>{room.emoji}</span>
|
|
<span
|
|
style={{
|
|
fontSize: 14,
|
|
fontWeight: isActive ? 600 : 400,
|
|
color: isActive ? 'var(--accent)' : 'var(--text-primary)',
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
{room.name}
|
|
</span>
|
|
</div>
|
|
<span style={{ fontSize: 11, color: 'var(--text-secondary)' }}>
|
|
{room.deviceCount} {room.deviceCount === 1 ? 'устройство' : room.deviceCount >= 2 && room.deviceCount <= 4 ? 'устройства' : 'устройств'}
|
|
</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|