init

frontend/src/components/PostList.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Post } from '../api/posts';
+
+interface PostListProps {
+  posts: Post[];
+  onDelete: (id: number) => void;
+}
+
+interface Tag {
+  id: number;
+  name: string;
+  slug: string;
+}
+
+const PostList: React.FC<PostListProps> = ({ posts, onDelete }) => {
+  return (
+    <div className="space-y-4">
+      {posts.map((post) => (
+        <div
+          key={post.id}
+          className="bg-white dark:bg-gray-700 shadow rounded-lg p-6"
+        >
+          <div className="flex justify-between items-start">
+            <div>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                {post.title}
+              </h3>
+              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                By {post.author.username} • {new Date(post.created_at).toLocaleDateString()}
+              </p>
+              <div className="mt-2">
+                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                  post.status === 'published' 
+                    ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100'
+                    : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100'
+                }`}>
+                  {post.status.charAt(0).toUpperCase() + post.status.slice(1)}
+                </span>
+                {post.tags.map((tag) => (
+                  <span key={tag.id} className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100">
+                    {tag.name}
+                  </span>
+                ))}
+              </div>
+            </div>
+            <div className="flex space-x-2">
+              <Link
+                to={`/posts/${post.slug}`}
+                className="text-indigo-600 hover:text-indigo-900 bg-indigo-100 dark:bg-indigo-800 p-2 rounded-md dark:text-indigo-400 dark:hover:text-indigo-300 hover:underline"
+              >
+                View
+              </Link>
+              <Link
+                to={`/posts/${post.slug}/edit`}
+                className="text-blue-600 hover:text-blue-900 bg-blue-100 dark:bg-blue-800 p-2 rounded-md dark:text-blue-400 dark:hover:text-blue-300 hover:underline"
+              >
+                Edit
+              </Link>
+              <button
+                onClick={() => onDelete(post.id)}
+                className="text-red-600 hover:text-red-900 bg-red-100 dark:bg-red-800 p-2 rounded-md dark:text-red-400 dark:hover:text-red-300 hover:underline"
+              >
+                Delete  
+              </button>
+            </div>
+          </div>
+          <p className="mt-2 text-gray-600 dark:text-gray-300 line-clamp-2">
+            {post.content}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PostList;