got frontend working with backend project

frontend/islands/PostCard.tsx

@@ -0,0 +1,22 @@
+import { truncateString } from "../lib/truncate.ts";
+
+export const PostCard = function PostCard({ post }: { post: Post }) {
+  return (
+    <div class="p-6 bg-gray-700 rounded-lg shadow-md">
+      <h2 class="text-grey-900 text-lg font-bold mb-2">{post.title}</h2>
+      <p>
+        Written by {post.first_name} {post.last_name} at {post.created_at}
+      </p>
+      <p>{truncateString(post.body, 15)}</p>
+    </div>
+  );
+};
+
+export interface Post {
+  post_id: number;
+  first_name: string;
+  last_name: string;
+  title: string;
+  body: string;
+  created_at: string;
+}

frontend/islands/PostCarousel.tsx

@@ -0,0 +1,21 @@
+import { Post, PostCard } from "./PostCard.tsx";
+
+interface PostOpts {
+  posts: Post[];
+}
+
+export const PostCarousel = function PostCarousel({ posts }: PostOpts) {
+  return (
+    <div class="post-carousel">
+      <div class="h-screen bg-gray-700 flex items-center justify-center">
+        <div class="flex bg-gray-700 space-x-4">
+          {posts.map((post: Post, idx: number) => {
+            if (idx < 3) {
+              return <PostCard post={post} />;
+            }
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};