/
index.tsx
69 lines (58 loc) · 2.29 KB
/
index.tsx
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
import React, { useMemo } from "react";
import { Avatar } from "../components/Avatar";
import { RoomProvider, useOthers, useSelf } from "../liveblocks.config";
import { useRouter } from "next/router";
import styles from "./index.module.css";
function Example() {
const users = useOthers();
const currentUser = useSelf();
const hasMoreUsers = users.length > 3;
return (
<main className="flex h-screen w-full select-none place-content-center place-items-center">
<div className="flex pl-3">
{users.slice(0, 3).map(({ connectionId, info }) => {
return (
<Avatar key={connectionId} src={info.avatar} name={info.name} />
);
})}
{hasMoreUsers && <div className={styles.more}>+{users.length - 3}</div>}
{currentUser && (
<div className="relative ml-8 first:ml-0">
<Avatar src={currentUser.info.avatar} name="You" />
</div>
)}
</div>
</main>
);
}
export default function Page() {
const roomId = useExampleRoomId("liveblocks:examples:nextjs-live-avatars");
return (
<RoomProvider id={roomId} initialPresence={{}}>
<Example />
</RoomProvider>
);
}
export async function getStaticProps() {
const API_KEY = process.env.LIVEBLOCKS_SECRET_KEY;
const API_KEY_WARNING = process.env.CODESANDBOX_SSE
? `Add your secret key from https://liveblocks.io/dashboard/apikeys as the \`LIVEBLOCKS_SECRET_KEY\` secret in CodeSandbox.\n` +
`Learn more: https://github.com/liveblocks/liveblocks/tree/main/examples/nextjs-live-avatars#codesandbox.`
: `Create an \`.env.local\` file and add your secret key from https://liveblocks.io/dashboard/apikeys as the \`LIVEBLOCKS_SECRET_KEY\` environment variable.\n` +
`Learn more: https://github.com/liveblocks/liveblocks/tree/main/examples/nextjs-live-avatars#getting-started.`;
if (!API_KEY) {
console.warn(API_KEY_WARNING);
}
return { props: {} };
}
/**
* This function is used when deploying an example on liveblocks.io.
* You can ignore it completely if you run the example locally.
*/
function useExampleRoomId(roomId: string) {
const { query } = useRouter();
const exampleRoomId = useMemo(() => {
return query?.exampleId ? `${roomId}-${query.exampleId}` : roomId;
}, [query, roomId]);
return exampleRoomId;
}