Function Sidebar

packages/ui/src/pages/MessageResultPage.tsx:259–301

()

	const adsEnabled = !tenant;

	const Sidebar = () => (
		<div className="flex w-full shrink-0 flex-col items-center gap-4 text-center md:w-[400px]">
			<div
				className={
					'hidden w-full rounded-md border-2 bg-card drop-shadow-md md:block'
				}
			>
				<div className="flex flex-col items-start gap-4 p-4">
					<div className="flex w-full flex-row items-center justify-between truncate font-bold">
						<Link href={tenant ? '/' : `/c/${server.id}`}>{server.name}</Link>
						<ServerInviteJoinButton
							server={server}
							channel={channel}
							location={'Message Result Page'}
							size="sm"
							variant={'default'}
							className="rounded-3xl text-xs font-semibold"
						/>
					</div>
					<span className="text-left text-sm">{server.description}</span>
					<div className="flex w-full flex-row items-center justify-between">
						<div className="flex flex-col items-start">
							<span className="text-sm font-semibold">
								<FormattedNumber value={server.approximateMemberCount} />
							</span>
							<span className="text-xs">Members</span>
						</div>
						<Link
							href={getDiscordURLForMessage(firstMessage)}
							className="flex-row-reverse gap-1 text-sm font-semibold"
							icon={<ExternalLink size={16} />}
						>
							View on Discord
						</Link>
					</div>
				</div>
			</div>
			<div className="flex w-full flex-col justify-center gap-2 text-center xl:mt-6">
				{adsEnabled && <CarbonAds />}
				{!tenant && <JoinAnswerOverflowCard />}
			</div>
		</div>
	);
	return (
		<MessageResultPageProvider>
			<div className="mx-auto pt-2">