78 lines
2.1 KiB
TypeScript
78 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: 8,
|
|
padding: '14px 24px',
|
|
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',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
padding: '10px 20px',
|
|
borderRadius: 16,
|
|
background: isActive
|
|
? 'linear-gradient(135deg, rgba(99,102,241,0.18), rgba(139,92,246,0.12))'
|
|
: 'rgba(255,255,255,0.03)',
|
|
border: isActive
|
|
? '1px solid rgba(129,140,248,0.25)'
|
|
: '1px solid rgba(255,255,255,0.05)',
|
|
minWidth: 'fit-content',
|
|
flexShrink: 0,
|
|
transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
boxShadow: isActive ? '0 4px 16px rgba(99,102,241,0.1)' : 'none',
|
|
}}
|
|
>
|
|
<span style={{ fontSize: 18 }}>{room.emoji}</span>
|
|
<span
|
|
style={{
|
|
fontSize: 14,
|
|
fontWeight: isActive ? 600 : 500,
|
|
color: isActive ? '#a5b4fc' : 'var(--text-primary)',
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
{room.name}
|
|
</span>
|
|
<span style={{
|
|
fontSize: 11,
|
|
color: isActive ? 'rgba(165,180,252,0.6)' : 'var(--text-tertiary)',
|
|
fontWeight: 500,
|
|
}}>
|
|
{room.deviceCount}
|
|
</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|