my-website-v2/frontend/components/PostCarousel.tsx

import { PostCard } from "./PostCard.tsx";
import { Post } from "../types/index.ts";

interface PostOpts {
  posts: Post[];
  colorValue: string;
}

export const PostCarousel = function PostCarousel({
  posts,
  colorValue,
}: PostOpts) {
  return (
    <div className="flex w-full justify-start items-start bg-[#313244] p-8">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-wrap justify-center gap-3">
          {posts.map((post: Post) => (
            <PostCard key={post.post_id} post={post} colorValue={colorValue} />
          ))}
        </div>
      </div>
    </div>
  );
};