Browse Source

📝 Add PostCardMeta to Card13

* Added PostCardMeta component to the Card13 component
* Updated the code to render the PostCardMeta component after the description

 Ready to be reviewed
main
John Doe 1 year ago
parent
commit
0006bbb1c2
  1. 57
      src/app/blog/Card13.tsx
  2. 7
      src/app/blog/layout.tsx

57
src/app/blog/Card13.tsx

@ -0,0 +1,57 @@
import React, { FC } from "react";
import PostCardMeta from "@/components/PostCardMeta";
import { PostDataType } from "@/data/types";
import PostTypeFeaturedIcon from "@/components/PostTypeFeaturedIcon";
import Link from "next/link";
import Image from "next/image";
export interface Card13Props {
className?: string;
post: PostDataType;
}
const Card13: FC<Card13Props> = ({ className = "", post }) => {
const { title, href, desc, featuredImage, date, postType } = post;
return (
<div className={`nc-Card13 relative flex ${className}`} data-nc-id="Card13">
<div className="flex flex-col h-full py-2">
<h2 className={`nc-card-title block font-semibold text-base`}>
<Link href={href} className="line-clamp-2" title={title}>
{title}
</Link>
</h2>
<span className="hidden sm:block my-3 text-neutral-500 dark:text-neutral-400 ">
<span className="line-clamp-2"> {desc}</span>
</span>
<span className="mt-4 block sm:hidden text-sm text-neutral-500 ">
{date}
</span>
<div className="mt-auto hidden sm:block">
<PostCardMeta meta={{ ...post }} />
</div>
</div>
<Link
href={href}
className={`block relative h-full flex-shrink-0 w-2/5 sm:w-1/3 ml-3 sm:ml-5`}
>
<Image
fill
className="object-cover rounded-xl sm:rounded-3xl"
src={featuredImage}
alt={title}
sizes="(max-width: 768px) 100vw, 400px"
/>
<PostTypeFeaturedIcon
className="absolute bottom-2 left-2"
postType={postType}
wrapSize="w-8 h-8"
iconSize="w-4 h-4"
/>
</Link>
</div>
);
};
export default Card13;

7
src/app/blog/layout.tsx

@ -0,0 +1,7 @@
export default function DashboardLayout({
children, // will be a page or nested layout
}: {
children: React.ReactNode;
}) {
return <div>{children}</div>;
}
Loading…
Cancel
Save