import React, { useRef } from 'react';
import PostItem from './PostItem';
import { selectGeneralIsLoading } from 'store/slices/GeneralSlice';
import { useSelector } from 'react-redux';
import { useAnimation } from 'hooks/useAnimation';

const PostList = ({ posts = [] }) => {
    const isLoading = useSelector(selectGeneralIsLoading);

    const container = useRef();
    useAnimation({
        items: ['.blog-post-item__li'],
        container,
        dependencies: [isLoading],
    })
    return (
        <ul id="blog-posts" ref={container} className="blog-posts">
            {posts?.map(item => (
                <PostItem key={item.id} data={item} />
            ))}
        </ul>
    );
};

export default PostList;

• [F] index.jsx
  Delete
• [F] PostItem.jsx
  Delete