style: Exit animation

frontend/app/explore/DocumentItem/index.tsx

@@ -34,6 +34,7 @@ const DocumentItem = ({ document, setDocuments }: DocumentProps) => {
     <AnimatedCard
       initial={{ x: -64, opacity: 0 }}
       animate={{ x: 0, opacity: 1 }}
+      exit={{ x: 64, opacity: 0 }}
       className="flex items-center justify-between w-full p-5 gap-10"
     >
       <p className="text-lg leading-tight max-w-sm">{document.name}</p>

frontend/app/explore/page.tsx

@@ -6,6 +6,7 @@ import { Document } from "./types";
 import Button from "../components/ui/Button";
 import Link from "next/link";
 import Spinner from "../components/ui/Spinner";
+import { AnimatePresence } from "framer-motion";
 
 export default function ExplorePage() {
   const [documents, setDocuments] = useState<Document[]>([]);
@@ -43,13 +44,15 @@ export default function ExplorePage() {
       ) : (
         <div className="w-full max-w-xl flex flex-col gap-5">
           {documents.length !== 0 ? (
-            documents.map((document, index) => (
-              <DocumentItem
-                key={index}
-                document={document}
-                setDocuments={setDocuments}
-              />
-            ))
+            <AnimatePresence>
+              {documents.map((document) => (
+                <DocumentItem
+                  key={document.name}
+                  document={document}
+                  setDocuments={setDocuments}
+                />
+              ))}
+            </AnimatePresence>
           ) : (
             <div className="flex flex-col items-center justify-center mt-10 gap-1">
               <p className="text-center">Oh No, Your Brain is empty.</p>