...

app/page.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import React, { Suspense, useState } from 'react';
+import { encodePassphrase, generateRoomId, randomString } from '@/lib/client-utils';
+import styles from '../styles/Home.module.css';
+
+function Tabs(props: React.PropsWithChildren<{}>) {
+  return (
+    <div className={styles.tabContainer}>
+      {props.children}
+    </div>
+  );
+}
+
+function DemoMeetingTab(props: { label: string }) {
+  const [e2ee, setE2ee] = useState(false);
+  const [sharedPassphrase, setSharedPassphrase] = useState(randomString(64));
+  const startMeeting = () => {
+    let url = `/rooms/${generateRoomId()}`;
+    if (e2ee) {
+      url += `#${encodePassphrase(sharedPassphrase)}`;
+    }
+    window.location.href = url;
+  };
+  return (
+    <div className={styles.tabContent}>
+      <h1 style={{ textAlign: 'center', marginTop: 0 }}>Hero Meet</h1>
+      <p style={{ margin: 0, textAlign: 'center' }}>
+        Let's get started.
+      </p>
+      <button style={{ marginTop: '1rem' }} className="lk-button" onClick={startMeeting}>
+        Start Meeting
+      </button>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <div style={{ display: 'flex', flexDirection: 'row', gap: '1rem' }}>
+          <input
+            id="use-e2ee"
+            type="checkbox"
+            checked={e2ee}
+            onChange={(ev) => setE2ee(ev.target.checked)}
+          ></input>
+          <label htmlFor="use-e2ee">Enable end-to-end encryption</label>
+        </div>
+        {e2ee && (
+          <div style={{ display: 'flex', flexDirection: 'row', gap: '1rem' }}>
+            <label htmlFor="passphrase">Passphrase</label>
+            <input
+              id="passphrase"
+              type="password"
+              value={sharedPassphrase}
+              onChange={(ev) => setSharedPassphrase(ev.target.value)}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+
+export default function Page() {
+  return (
+    <>
+      <main className={styles.main} data-lk-theme="default">
+        <Suspense fallback="Loading">
+          <Tabs>
+            <DemoMeetingTab label="Demo" />
+          </Tabs>
+        </Suspense>
+      </main>
+    </>
+  );
+}