39 lines
796 B
TypeScript
39 lines
796 B
TypeScript
"use client";
|
|
|
|
import { m, useReducedMotion } 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) {
|
|
const shouldReduceMotion = useReducedMotion();
|
|
|
|
return (
|
|
<m.ul
|
|
variants={shouldReduceMotion ? undefined : listVariants}
|
|
initial={shouldReduceMotion ? false : "hidden"}
|
|
animate="visible"
|
|
className="space-y-6"
|
|
>
|
|
{posts.map((post, index) => (
|
|
<li key={post.slug}>
|
|
<PostCard {...post} index={index} />
|
|
</li>
|
|
))}
|
|
</m.ul>
|
|
);
|
|
}
|