Adds copy button

adityathakurxd · Feb 29, 2024 · 3f7e9a8 · 3f7e9a8
1 parent 9fa04e3
commit 3f7e9a8
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 1 deletion.
diff --git a/app/components/Conference.tsx b/app/components/Conference.tsx
@@ -11,6 +11,7 @@ import { ChevronRightIcon } from '@/node_modules/@100mslive/react-icons/dist/ind
 import { Pagination } from './Pagination'
 import { LiveResults } from './LiveResults'
 import Footer from './Footer'
+import CopyInviteButton from './CopyInviteButton'
 
 const HOST_URL = 'wss://demo-yjs-server-production.up.railway.app'
 
@@ -44,7 +45,15 @@ function Conference() {
 					) : null}
 				</div>
 				<LiveResults />
-				<div>Invite others: make-real-polls.vercel.app/?room={roomCode}</div>
+				<div className="invite-banner">
+					<div className="invite-text">INVITE</div>
+					<div className="invite-link body-regular-text" id="inviteLink">
+						make-real-polls.vercel.app/?room={roomCode}
+					</div>
+					<div className="invite-link body-regular-text">
+						<CopyInviteButton />
+					</div>
+				</div>
 				<Footer />
 			</div>
 			<div className="editor">

diff --git a/app/components/CopyInviteButton.tsx b/app/components/CopyInviteButton.tsx
@@ -0,0 +1,15 @@
+import { CopyIcon } from '@100mslive/react-icons'
+
+const CopyInviteButton = () => {
+	const copyText = () => {
+		const textToCopy = document.getElementById('inviteLink').innerText
+		navigator.clipboard.writeText(textToCopy)
+	}
+
+	return (
+		<button onClick={copyText}>
+			<CopyIcon />
+		</button>
+	)
+}
+export default CopyInviteButton
diff --git a/app/globals.css b/app/globals.css
@@ -509,6 +509,33 @@ button:disabled {
 	border: 1px solid black;
 }
 
+.invite-banner {
+	display: flex;
+	padding: 8px;
+	align-items: center;
+	gap: 8px;
+	border-radius: var(--Radius-1, 8px);
+	border: 1px solid var(--Border-Light, #b8c4d5);
+	border: 1px solid var(--Border-Light, color(display-p3 0.7373 0.7686 0.8235));
+}
+
+.invite-text {
+	font-size: 10px;
+	font-weight: 800;
+	display: flex;
+	padding: 4px 8px;
+	align-items: center;
+	gap: 4px;
+	border-radius: 4px;
+	background: var(--Primary-Dark, #00366e);
+	background: var(--Primary-Dark, color(display-p3 0.08 0.2031 0.4));
+	color: rgba(255, 255, 255, 0.98);
+}
+
+.invite-link {
+	color: rgba(0, 0, 0, 0.8);
+}
+
 @media screen and (max-width: 1024px) {
 	.App {
 		height: 100%;