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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { CopyButton } from '@/components/common/CopyButton'
import { QRCodeButton } from '@/components/common/QRCodeButton'
export interface RoomShareButtonsProps {
/**
* The room join code (e.g., "ABC123")
*/
joinCode: string
/**
* The full shareable URL for the room
*/
shareUrl: string
}
/**
* Reusable component for sharing room join code and link
* Used in both RoomInfo dropdown and AddPlayerButton's Invite tab
*/
export function RoomShareButtons({ joinCode, shareUrl }: RoomShareButtonsProps) {
return (
<div style={{ display: 'flex', gap: '6px', marginBottom: '6px' }}>
{/* Left side: stacked buttons */}
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '6px',
flex: 1,
}}
>
<CopyButton
text={joinCode}
variant="code"
label={
<>
<span>📋</span>
<span>{joinCode}</span>
</>
}
style={{ marginBottom: 0 }}
/>
<CopyButton
text={shareUrl}
variant="link"
label={
<>
<span>🔗</span>
<span>Share Link</span>
</>
}
copiedLabel="Link Copied!"
style={{ marginBottom: 0 }}
/>
</div>
{/* Right side: QR code button */}
<QRCodeButton url={shareUrl} />
</div>
)
}
|