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