feat: add post list with staggered entrance animation
This commit is contained in:
31
components/blog/PostList.tsx
Normal file
31
components/blog/PostList.tsx
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { motion } from "motion/react";
|
||||||
|
import { PostCard } from "./PostCard";
|
||||||
|
import type { PostMeta } from "@/lib/posts";
|
||||||
|
|
||||||
|
const listVariants = {
|
||||||
|
hidden: {},
|
||||||
|
visible: {
|
||||||
|
transition: {
|
||||||
|
staggerChildren: 0.07,
|
||||||
|
delayChildren: 0.15,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
interface PostListProps {
|
||||||
|
posts: PostMeta[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PostList({ posts }: PostListProps) {
|
||||||
|
return (
|
||||||
|
<motion.ul variants={listVariants} initial="hidden" animate="visible" className="space-y-8">
|
||||||
|
{posts.map((post) => (
|
||||||
|
<li key={post.slug}>
|
||||||
|
<PostCard {...post} index={posts.indexOf(post)} />
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</motion.ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user