update

src/pages/explore.jsx

@@ -46,7 +46,7 @@ export default function Explore({onClose}) {
 
     useEffect(()=>{
 
-        if(!lookat) return;
+        // if(!lookat)
         lookatKeyword(lookat);
 
     },[lookat]);
@@ -116,7 +116,13 @@ export default function Explore({onClose}) {
                                     backgroundColor: lookat && lookat.title===keyword.title ? '#939393' : 'transparent',
                                     // color: lookat && lookat.title===keyword.title ? 'black' : 'white',
                                 }}
-                                onClick={()=>setLookat(keyword)}>
+                                onClick={()=>{
+                                    if(lookat && lookat.title===keyword.title){
+                                        setLookat(null);
+                                    }else{
+                                        setLookat(keyword)
+                                    };
+                                }}>
                                 <span className="text-center text-nowrap text-[1rem] py-[1.25rem]">{keyword.title}</span>
                             </div>
                         ))}

src/utils/firebase.js

@@ -1,6 +1,7 @@
 // Import the functions you need from the SDKs you need
 import { initializeApp } from "firebase/app";
-import { getFirestore, collection, doc, writeBatch, setDoc, onSnapshot, getDoc } from "firebase/firestore";
+import { getFirestore, collection, doc, writeBatch, setDoc, onSnapshot, getDoc, deleteDoc } from "firebase/firestore";
+import { exists } from "firebase/firestore/pipelines";
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
 
@@ -65,6 +66,17 @@ export function lookatKeyword(keyword) {
     const db = getFirestore(app);
     const keywordRef = doc(collection(db, "lookat"), 'latest');
 
+    if(!keyword){
+        // delete if exists keywordRef;
+        deleteDoc(keywordRef).then(() => {
+            console.log("Keyword removed successfully!");
+        }).catch((error) => {
+            console.error("Error removing keyword: ", error);
+        });
+        
+        return;
+    }
+
     // Update the keyword document with the focused state
     setDoc(keywordRef, {
         id: keyword.id,