77 lines
2.9 KiB
TypeScript
77 lines
2.9 KiB
TypeScript
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;
|