RealtimeLayout.tsx47 lines · main

1	import { useRouter } from 'next/router'
2	import type { PropsWithChildren } from 'react'
3
4	import { ProjectLayout } from '../ProjectLayout'
5	import { generateRealtimeMenu } from './RealtimeMenu.utils'
6	import { ProductMenu } from '@/components/ui/ProductMenu'
7	import { ProductMenuShortcuts } from '@/components/ui/ProductMenu/ProductMenuShortcuts'
8	import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
9	import { withAuth } from '@/hooks/misc/withAuth'
10
11	/**
12	* Menu-only component for the Realtime section. Used by the desktop sidebar and by the
13	* mobile sheet submenu. Must not wrap ProjectLayout so that opening the realtime submenu
14	* in the mobile sheet does not overwrite registerOpenMenu and break the menu button.
15	*/
16	export const RealtimeProductMenu = () => {
17	const router = useRouter()
18	const { data: project } = useSelectedProjectQuery()
19	const page = router.pathname.split('/')[4]
20
21	return <ProductMenu page={page} menu={generateRealtimeMenu(project ?? undefined)} />
22	}
23
24	export interface RealtimeLayoutProps {
25	title: string
26	}
27
28	export const RealtimeLayout = ({ title, children }: PropsWithChildren<RealtimeLayoutProps>) => {
29	const { data: project } = useSelectedProjectQuery()
30	const router = useRouter()
31	const page = router.pathname.split('/')[4]
32	const menu = generateRealtimeMenu(project)
33
34	return (
35	<ProjectLayout
36	product="Realtime"
37	browserTitle={{ section: title }}
38	productMenu={<ProductMenu page={page} menu={menu} />}
39	isBlocking={false}
40	>
41	<ProductMenuShortcuts menu={menu} />
42	{children}
43	</ProjectLayout>
44	)
45	}
46
47	export default withAuth(RealtimeLayout)