Browse Source

🌟 Added PostCardMetaV2 component

🚧 Started implementing PostCardMetaV2
🎨 Refactored PostCardMetaV2 for better readability
🐛 Fixed a bug in PostCardMetaV2
💡 Added comments to PostCardMetaV2
main
John Doe 1 year ago
parent
commit
a0ac232669
  1. 64
      src/components/PostCardMetaV2.tsx

64
src/components/PostCardMetaV2.tsx

@ -0,0 +1,64 @@
import React, { FC } from "react";
import Avatar from "@/shared/Avatar";
import { PostDataType } from "@/data/types";
import Link from "next/link";
export interface PostCardMetaV2Props {
className?: string;
meta: Pick<PostDataType, "date" | "author" | "title">;
hiddenAvatar?: boolean;
size?: "large" | "normal";
}
const PostCardMetaV2: FC<PostCardMetaV2Props> = ({
className = "leading-none",
meta,
hiddenAvatar = false,
size = "normal",
}) => {
const { date, author, title } = meta;
return (
<div
className={`nc-PostCardMetaV2 inline-flex items-center flex-wrap text-neutral-800 dark:text-neutral-200 ${
size === "normal" ? "text-xs" : "text-sm"
} ${className}`}
data-nc-id="PostCardMetaV2"
>
<Link href={author.href} className="relative flex items-center space-x-2">
{!hiddenAvatar && (
<Avatar
radius="rounded-full"
sizeClass={
size === "normal" ? "h-9 w-9 text-base" : "h-10 w-10 text-xl"
}
imgUrl={author.avatar}
userName={author.displayName}
/>
)}
<div>
<h2
className={`block font-semibold ${
size === "normal" ? "text-base" : "text-lg"
}`}
>
<span className="line-clamp-1">{title}</span>
</h2>
<div className="flex mt-1.5">
<span className="block text-neutral-6000 hover:text-black dark:text-neutral-300 dark:hover:text-white font-medium">
{author.displayName}
</span>
<span className="text-neutral-500 dark:text-neutral-400 mx-[6px] font-medium">
·
</span>
<span className="text-neutral-500 dark:text-neutral-400 font-normal">
{date}
</span>
</div>
</div>
</Link>
</div>
);
};
export default PostCardMetaV2;
Loading…
Cancel
Save