Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React from 'react'
import { JoinRoomInput } from './JoinRoomInput'
import { RecentRoomsList } from './RecentRoomsList'
interface PlayOnlineTabProps {
onCreateRoom: () => void
onJoinRoom: (code: string) => void
}
export function PlayOnlineTab({ onCreateRoom, onJoinRoom }: PlayOnlineTabProps) {
const [isCreating, setIsCreating] = React.useState(false)
const handleCreateRoom = async () => {
setIsCreating(true)
try {
await onCreateRoom()
} finally {
setIsCreating(false)
}
}
return (
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '16px',
}}
>
{/* Quick Create Section */}
<div>
<div
style={{
fontSize: '11px',
fontWeight: 600,
color: '#6b7280',
textTransform: 'uppercase',
letterSpacing: '0.5px',
marginBottom: '8px',
}}
>
🆕 Start Playing
</div>
<button
type="button"
onClick={handleCreateRoom}
disabled={isCreating}
style={{
width: '100%',
padding: '12px 16px',
background: isCreating ? '#d1d5db' : 'linear-gradient(135deg, #10b981, #059669)',
border: 'none',
borderRadius: '8px',
color: 'white',
fontSize: '14px',
fontWeight: 600,
cursor: isCreating ? 'not-allowed' : 'pointer',
transition: 'all 0.2s ease',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
}}
onMouseEnter={(e) => {
if (!isCreating) {
e.currentTarget.style.transform = 'translateY(-1px)'
e.currentTarget.style.boxShadow = '0 4px 8px rgba(16, 185, 129, 0.3)'
}
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform = 'translateY(0)'
e.currentTarget.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)'
}}
>
{isCreating ? '⏳ Creating...' : '🚀 Create New Room'}
</button>
</div>
{/* Divider */}
<div
style={{
height: '1px',
background: 'linear-gradient(90deg, transparent, #e5e7eb, transparent)',
}}
/>
{/* Join Room Section */}
<div>
<div
style={{
fontSize: '11px',
fontWeight: 600,
color: '#6b7280',
textTransform: 'uppercase',
letterSpacing: '0.5px',
marginBottom: '8px',
}}
>
🚪 Join Room
</div>
<JoinRoomInput onJoin={onJoinRoom} />
</div>
{/* Recent Rooms Section */}
<RecentRoomsList onSelectRoom={onJoinRoom} />
</div>
)
}
|