chat bot notauthenticated section updated

sinanptm · Oct 7, 2024 · b7835ba · b7835ba
1 parent 00d7000
commit b7835ba
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/client/components/page-components/chatbot/ChatBotCardHeader.tsx b/client/components/page-components/chatbot/ChatBotCardHeader.tsx
@@ -3,7 +3,7 @@ import { CardHeader } from "@/components/ui/card"
 import Image from "next/image"
 
 
-const ChatBotCardHeader = ({handleClose}:{handleClose: () => void}) => {
+const ChatBotCardHeader = ({ handleClose }: { handleClose: () => void }) => {
     return (
         <CardHeader className="flex flex-row items-center justify-between space-y-0 py-4 px-6 bg-green-900 text-white">
             <div className="flex items-center space-x-3">

diff --git a/client/components/page-components/chatbot/ChatSection.tsx b/client/components/page-components/chatbot/ChatSection.tsx
@@ -94,7 +94,7 @@ const ChatSection = ({ isVisible, setIsOpen, isAuthenticated }: Props) => {
                             />
                         </Card>
                     ) : (
-                        <NotAuthenticated />
+                        <NotAuthenticated onClose={handleClose} />
                     )}
                 </motion.div>
             )}

diff --git a/client/components/page-components/chatbot/NotAuthenticated.tsx b/client/components/page-components/chatbot/NotAuthenticated.tsx
@@ -1,13 +1,33 @@
 import { ButtonV2 } from "@/components/button/ButtonV2"
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
-import { LogIn } from "lucide-react"
+import { LogIn, X } from "lucide-react"
 import Link from "next/link"
+import Image from "next/image"
 
-const NotAuthenticated = () => {
+interface NotAuthenticatedProps {
+  onClose: () => void;
+}
+
+const NotAuthenticated: React.FC<NotAuthenticatedProps> = ({ onClose }) => {
     return (
-        <Card className="h-full sm:h-[600px] max-h-[800px] justify-center flex flex-col shadow-2xl border-primary/10 bg-dark-200 rounded-2xl overflow-hidden">
+        <Card className="h-full sm:h-[600px] max-h-[800px] justify-center flex flex-col shadow-2xl border-primary/10 bg-dark-200 rounded-2xl overflow-hidden relative">
+            <ButtonV2
+                onClick={onClose}
+                variant="ghost"
+                size="icon"
+                className="absolute top-4 right-4 h-10 w-10 rounded-full hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-green-700 transition-colors"
+                aria-label="Close"
+            >
+                <Image
+                    src='/assets/icons/x.svg'
+                    width={20}
+                    height={20}
+                    alt="Close"
+                    className="h-5 w-5"
+                />
+            </ButtonV2>
             <CardHeader className="text-center">
-                <CardTitle className="text-2xl font-bold">Authentication Required</CardTitle>
+                <CardTitle className="text-2xl font-bold">😑 Authentication Required</CardTitle>
                 <CardDescription>Please log in to access your messages</CardDescription>
             </CardHeader>
             <CardContent className="flex justify-center">
@@ -16,7 +36,7 @@ const NotAuthenticated = () => {
             <CardFooter className="flex justify-center">
                 <ButtonV2 asChild variant="expandIcon" Icon={LogIn} iconPlacement="right">
                     <Link href="/signin">
-                        signin
+                        Sign in
                     </Link>
                 </ButtonV2>
             </CardFooter>
-Original file line number
+Diff line change
@@ Expand Up @@
                                 />
                             </Card>
                         ) : (
-                            <NotAuthenticated />
+                            <NotAuthenticated onClose={handleClose} />
                         )}
                     </motion.div>
                 )}
@@ Expand Down @@