NoChannelEmptyState.tsx29 lines · main

1	import { cn } from 'ui'
2
3	import { DocsButton } from '@/components/ui/DocsButton'
4	import { DOCS_URL } from '@/lib/constants'
5
6	const NoChannelEmptyState = () => {
7	return (
8	<div className="border bg-studio border-border rounded-md justify-start items-center flex flex-col w-10/12 relative">
9	<div className="w-full px-5 py-4 items-center gap-4 inline-flex border-b rounded-t-md">
10	<div className="grow flex-col flex gap-y-1">
11	<p className="text-foreground">Join a channel to start listening to messages</p>
12	<p className="text-foreground-lighter text-xs">
13	Channels are the building blocks of realtime where clients can bi-directionally send and
14	receive messages in.
15	</p>
16	</div>
17	</div>
18	<div className={cn('w-full px-5 py-4 items-center gap-4 inline-flex')}>
19	<div className="grow flex-col flex">
20	<p className="text-foreground">Not sure what to do?</p>
21	<p className="text-foreground-lighter text-xs">Browse our documentation</p>
22	</div>
23	<DocsButton href={`${DOCS_URL}/guides/realtime`} />
24	</div>
25	</div>
26	)
27	}
28
29	export default NoChannelEmptyState