chat-03

1"use client";
2 
3import { X } from "lucide-react";
4import { useState } from "react";
5import { Button } from "@/components/ui/button";
6import { Chat } from "@/registry/blocks/chat-03/components/chat";
7 
8export default function Page() {
9	const [open, setOpen] = useState(true);
10 
11	return (
12		<div className="h-screen flex items-center justify-center">
13			<Button size="lg" onClick={() => setOpen(true)}>
14				Open Chat
15			</Button>
16			<div className="fixed bottom-4 right-4 z-50 flex flex-col items-end gap-4">
17				{open && (
18					<div className="w-[400px] h-[600px] bg-background border rounded-lg shadow-lg flex flex-col overflow-hidden">
19						<div className="flex items-center justify-between p-4 border-b">
20							<h4 className="font-semibold">Chat</h4>
21							<Button
22								variant="ghost"
23								size="icon"
24								onClick={() => setOpen(false)}
25							>
26								<span className="sr-only">Close chat</span>
27								<X />
28							</Button>
29						</div>
30						<Chat />
31					</div>
32				)}
33			</div>
34		</div>
35	);
36}