e.stopPropagation()}>
+
Share Session
+
+ {/* Tab switcher */}
+
+ {["create", "join"].map((t) => (
+
+ ))}
+
+
+ {/* Display name */}
+
+
+ setDisplayName(e.target.value)}
+ placeholder="Your name"
+ autoFocus
+ style={styles.input}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ if (tab === "create") handleCreate();
+ else handleJoin();
+ }
+ }}
+ />
+
+
+ {/* Color picker */}
+
+
+
+ {COLORS.cursorPalette.map((c) => (
+
+
+
+ {tab === "create" && !createdCode && (
+
+ )}
+
+ {tab === "create" && createdCode && (
+
+
+ Room Code
+
+
copyCode(createdCode)}
+ style={{
+ fontSize: 32,
+ fontWeight: 700,
+ fontFamily: FONTS.mono,
+ color: COLORS.accent,
+ letterSpacing: "0.2em",
+ cursor: "pointer",
+ padding: "12px 0",
+ background: COLORS.accent008,
+ borderRadius: 12,
+ border: `1px solid ${COLORS.accent025}`,
+ marginBottom: 12,
+ userSelect: "all",
+ }}
+ title="Click to copy"
+ >
+ {createdCode}
+
+
+ {copied ? "Copied!" : "Click code to copy"}
+
+
+
+
+
+ )}
+
+ {tab === "join" && (
+ <>
+
+
+ setJoinCode(e.target.value.toUpperCase().slice(0, 6))}
+ placeholder="XXXXXX"
+ maxLength={6}
+ style={{ ...styles.input, fontSize: 18, fontWeight: 700, letterSpacing: "0.15em", textAlign: "center" }}
+ onKeyDown={(e) => { if (e.key === "Enter") handleJoin(); }}
+ />
+
+
+
+ )}
+
+
+