chat opening done

space_flow/src/components/chatComponent/index.tsx

@@ -1,12 +1,25 @@
+import { Transition } from "@headlessui/react";
 import {
   ChatBubbleBottomCenterTextIcon,
   PaperAirplaneIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
+import { useState } from "react";
 
-export default function Chat({}) {
+export default function Chat() {
+  const [open, setOpen] = useState(true);
   return (
     <>
+      <Transition
+        show={open}
+        appear={true}
+        enter='transition ease-out duration-300'
+        enterFrom='translate-y-96'
+        enterTo='translate-y-0'
+        leave='transition ease-in duration-300'
+        leaveFrom='translate-y-0'
+        leaveTo='translate-y-96'
+      >
         <div className="w-[400px] absolute bottom-0 right-6">
           <div className="border h-full rounded-xl rounded-b-none bg-white shadow">
             <div className="flex justify-between items-center px-5 py-3 border-b">
@@ -14,13 +27,15 @@ export default function Chat({}) {
                 <ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1 text-blue-600" />
                 Chat
               </div>
+              <button onClick={() => {setOpen(false)}}>
                 <XMarkIcon className="h-6 w-6 text-gray-600" />
+              </button>
             </div>
             <div className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto flex-col bg-gray-50 p-3 py-5">
               <div className="w-full text-start">
                 <div className="text-start inline-block bg-gray-200 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tl-none">
-                Lorem Ipsum is simply dummy text of the printing and typesetting
+                  Lorem Ipsum is simply dummy text of the printing and
-                industry.
+                  typesetting industry.
                 </div>
               </div>
               <div className="w-full text-end">
@@ -44,12 +59,33 @@ export default function Chat({}) {
                       aria-hidden="true"
                     />
                   </button>
-                
                 </div>
               </div>
             </div>
           </div>
         </div>
+      </Transition>
+      <Transition
+      show={!open}
+      appear={true}
+      enter='transition ease-out duration-300'
+      enterFrom='translate-y-96'
+      enterTo='translate-y-0'
+      leave='transition ease-in duration-300'
+      leaveFrom='translate-y-0'
+      leaveTo='translate-y-96'
+    >
+      <div className="absolute bottom-0 right-6">
+          <div className="border flex justify-center align-center py-2 px-4 rounded-xl rounded-b-none bg-white shadow">
+              <button onClick={()=>{setOpen(true)}}>
+              <div className="flex gap-3 text-lg font-medium items-center">
+                <ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1 text-blue-600" />
+                Chat
+              </div>
+              </button>
+          </div>
+        </div>
+      </Transition>
     </>
   );
 }