apps/canvas/front/src/Tootls.tsx

import { Badge } from "./components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
import { Deployment } from "./Deployment";
import { useEnv, useMessages } from "./lib/state";
import { Messages } from "./Messages";

export function Tools() {
	const messages = useMessages();
	const env = useEnv();
	return (
		<Tabs defaultValue="messages" className="w-[400px] px-5 w-full h-full">
			<TabsList>
				<TabsTrigger value="messages" className="space-x-2">
					<div>Messages</div>
					<Badge>{messages.length}</Badge>
				</TabsTrigger>
				<TabsTrigger value="deployment">Deployment</TabsTrigger>
				<TabsTrigger value="deployKeys">Deploy keys</TabsTrigger>
			</TabsList>
			<TabsContent value="messages">
				<Messages />
			</TabsContent>
			<TabsContent value="deployment">
				<Deployment />
			</TabsContent>
			<TabsContent value="deployKeys">{env && <>{env.deployKey}</>}</TabsContent>
		</Tabs>
	);
}