dire magnet
code for PostCard.tsx here:
import { Models } from "appwrite";
import { Link } from "react-router-dom";
import { useUserContext } from "@/context/AuthContext";
import { formatDate } from "@/lib/utils";
type PostCardProps = {
post: Models.Document;
};
const PostCard = ({ post }: PostCardProps) => {
const { user } = useUserContext();
if (!post.creator) return;
return (
<div className="post-card">
<div className="flex-between">
<div className="flex items-center gap-3">
<Link to={/profile/${post.creator.$id}}>
<img
src={
post.creator?.imageUrl ||
"/assets/icons/profile-placeholder.svg"
}
alt="creator"
className="w-12 lg:h-12 rounded-full"
/>
</Link>
<div className="flex flex-col">
<p className="base-medium lg:body-bold text-light-1">
{post.creator.name}
</p>
<div className="flex-center gap-2 text-light-3">
<p className="subtle-semibold lg:small-regular ">
{formatDate(post.$createdAt)}
</p>
</div>
</div>
</div>
</div>
<Link to={`/posts/${post.$id}`}>
<div className="small-medium lg:base-medium py-5">
<p>{post.caption}</p>
<ul className="flex gap-1 mt-2">
{post.tags.map((tag: string, index: string) => (
<li key={`${tag}${index}`} className="text-light-3 small-regular">
#{tag}
</li>
))}
</ul>
</div>
<img
src={post.imageUrl || "/assets/icons/profile-placeholder.svg"}
alt="post image"
className="post-card_img"
/>
</Link>
</div>
);
};
export default PostCard;