feat: added my meetings page

client/src/app/meetings/MyMeetingsPage.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { useUser } from '@clerk/nextjs'
+import { Call, useStreamVideoClient } from '@stream-io/video-react-sdk'
+import { useEffect, useState } from 'react'
+
+const MyMeetingsPage = () => {
+	const { user } = useUser()
+	const client = useStreamVideoClient()
+	const [call, setCalls] = useState<Call[]>()
+	useEffect(() => {
+		async function loadCalls() {
+			if (!client || !user?.id) {
+				return
+			}
+			const { calls } = await client.queryCalls({
+				sort: [{ field: 'starts_at', direction: -1 }],
+				filter_conditions: {
+					starts_at: { $exists: true },
+					$or: [{ created_by_user_id: user.id }, { members: { $in: [user.id] } }]
+				}
+			})
+			setCalls(calls)
+		}
+		loadCalls()
+	}, [client, user?.id])
+	return (
+		<div className="space-y-3">
+			<h1 className="text-center text-2xl font-bold">My Meetings</h1>
+		</div>
+	)
+}
+
+export default MyMeetingsPage

client/src/app/meetings/page.tsx

@@ -0,0 +1,12 @@
+import { Metadata } from 'next'
+import MyMeetingsPage from './MyMeetingsPage'
+
+export const metadata: Metadata = {
+	title: 'My Meetings'
+}
+
+const page = () => {
+	return <MyMeetingsPage />
+}
+
+export default page

client/src/components/Navbar.tsx

@@ -8,7 +8,7 @@ const Navbar = () => {
 				<Link href="/">New Meeting</Link>
 				<SignedIn>
 					<div className="flex items-center gap-5">
-						<Link href="/new-meeting">Meeting</Link>
+						<Link href="/meetings">Meetings</Link>
 						<UserButton />
 					</div>
 				</SignedIn>