116 lines
2.9 KiB
TypeScript
116 lines
2.9 KiB
TypeScript
import { Box, Typography, Button } from '@mui/material';
|
||
import { glassBox, GRADIENT } from '../../theme/voiceStyles';
|
||
import type { RoomInfo } from '../../types/rooms';
|
||
|
||
type Props = {
|
||
rooms: RoomInfo[];
|
||
currentRoomId: string | null;
|
||
onJoin: (roomId: string) => void;
|
||
onCreate: () => void;
|
||
onJoinByCode: () => void;
|
||
};
|
||
|
||
export function RoomsPanel({
|
||
rooms,
|
||
currentRoomId,
|
||
onJoin,
|
||
onCreate,
|
||
onJoinByCode,
|
||
}: Props) {
|
||
return (
|
||
<Box
|
||
sx={{
|
||
width: 300,
|
||
p: '1.2vw',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: '1vw',
|
||
borderRadius: '1.5vw',
|
||
...glassBox,
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
fontFamily: 'Benzin-Bold',
|
||
fontSize: '1.4vw',
|
||
backgroundImage: GRADIENT,
|
||
WebkitBackgroundClip: 'text',
|
||
WebkitTextFillColor: 'transparent',
|
||
}}
|
||
>
|
||
Голосовые комнаты
|
||
</Typography>
|
||
|
||
<Box sx={{ flex: 1, overflowY: 'auto', pr: '0.3vw' }}>
|
||
{rooms.map((room) => {
|
||
const active = room.id === currentRoomId;
|
||
|
||
return (
|
||
<Box
|
||
key={room.id}
|
||
onClick={() => onJoin(room.id)}
|
||
sx={{
|
||
p: '0.9vw',
|
||
mb: '0.6vw',
|
||
borderRadius: '1vw',
|
||
cursor: 'pointer',
|
||
transition: 'all 0.18s ease',
|
||
background: active ? GRADIENT : 'rgba(255,255,255,0.04)',
|
||
color: active ? '#fff' : 'rgba(255,255,255,0.9)',
|
||
'&:hover': {
|
||
//transform: 'scale(1.01)',
|
||
background: active ? GRADIENT : 'rgba(255,255,255,0.07)',
|
||
},
|
||
}}
|
||
>
|
||
<Typography sx={{ fontWeight: 800 }}>{room.name}</Typography>
|
||
|
||
{room.users.length > 0 && (
|
||
<Box sx={{ mt: '0.4vw', pl: '0.8vw' }}>
|
||
{room.users.map((u) => (
|
||
<Typography
|
||
key={u}
|
||
sx={{
|
||
fontSize: '0.85vw',
|
||
opacity: 0.8,
|
||
}}
|
||
>
|
||
• {u}
|
||
</Typography>
|
||
))}
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
);
|
||
})}
|
||
</Box>
|
||
|
||
<Button
|
||
onClick={onCreate}
|
||
sx={{
|
||
borderRadius: '999px',
|
||
py: '0.8vw',
|
||
fontFamily: 'Benzin-Bold',
|
||
background: GRADIENT,
|
||
color: '#fff',
|
||
}}
|
||
>
|
||
+ Создать комнату
|
||
</Button>
|
||
|
||
<Button
|
||
onClick={onJoinByCode}
|
||
sx={{
|
||
borderRadius: '999px',
|
||
py: '0.8vw',
|
||
fontFamily: 'Benzin-Bold',
|
||
background: 'rgba(255,255,255,0.08)',
|
||
color: '#fff',
|
||
}}
|
||
>
|
||
Войти по коду
|
||
</Button>
|
||
</Box>
|
||
);
|
||
}
|