From 13b16b8b3a9e363e2fd5cbd86b6ca38f1368a878 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 14 Feb 2023 20:08:16 -0300
Subject: [PATCH] chat opening done

---
 .../src/components/chatComponent/index.tsx    | 108 ++++++++++++------
 1 file changed, 72 insertions(+), 36 deletions(-)

diff --git a/space_flow/src/components/chatComponent/index.tsx b/space_flow/src/components/chatComponent/index.tsx
index 53ee857f7..380ff849c 100644
--- a/space_flow/src/components/chatComponent/index.tsx
+++ b/space_flow/src/components/chatComponent/index.tsx
@@ -1,55 +1,91 @@
+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 (
     <>
-      <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">
-            <div className="flex gap-3 text-xl font-medium items-center">
-              <ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1 text-blue-600" />
-              Chat
+      <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">
+              <div className="flex gap-3 text-xl font-medium items-center">
+                <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>
-            <XMarkIcon className="h-6 w-6 text-gray-600" />
-          </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
-                industry.
+            <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 industry.
+                </div>
+              </div>
+              <div className="w-full text-end">
+                <div className="text-start inline-block bg-blue-600 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-white font-normal rounded-tr-none">
+                  Lorem Ipsum has been the industry's standard dummy text ever
+                  since the 1500s
+                </div>
               </div>
             </div>
-            <div className="w-full text-end">
-              <div className="text-start inline-block bg-blue-600 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-white font-normal rounded-tr-none">
-                Lorem Ipsum has been the industry's standard dummy text ever
-                since the 1500s
-              </div>
-            </div>
-          </div>
-          <div className="w-full bg-white border-t flex items-center justify-between p-3">
-            <div className="relative w-full mt-1 rounded-md shadow-sm">
-              <input
-                type="text"
-                className="form-input block w-full rounded-md border-gray-300 pr-10 sm:text-sm"
-                placeholder="Send a message..."
-              />
-              <div className="absolute inset-y-0 right-0 flex items-center pr-3">
-                <button>
-                <PaperAirplaneIcon
-                  className="h-5 w-5 text-gray-400 hover:text-gray-600"
-                  aria-hidden="true"
+            <div className="w-full bg-white border-t flex items-center justify-between p-3">
+              <div className="relative w-full mt-1 rounded-md shadow-sm">
+                <input
+                  type="text"
+                  className="form-input block w-full rounded-md border-gray-300 pr-10 sm:text-sm"
+                  placeholder="Send a message..."
                 />
-                </button>
-                
+                <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+                  <button>
+                    <PaperAirplaneIcon
+                      className="h-5 w-5 text-gray-400 hover:text-gray-600"
+                      aria-hidden="true"
+                    />
+                  </button>
+                </div>
               </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>
     </>
   );
 }