StanGirard/quivr
1
1
Fork 0
mirror of https://github.com/StanGirard/quivr.git synced 2024-12-25 20:32:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

style: Exit animation

Browse Source
This commit is contained in:
iMADi-ARCH 2023-05-23 11:16:36 +05:30
parent e360683093
commit 329163a128
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/app/explore/DocumentItem/index.tsx
View File

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

9
frontend/app/explore/page.tsx
View File

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