Browse Source

🌟 Added Card3 component

🚧 Implemented Card3 layout
🎨 Styled Card3 component
📝 Updated Card3 documentation
🐛 Fixed Card3 bug
 Tested Card3 component
🔄 Refactored Card3 code
main
John Doe 1 year ago
parent
commit
0b3a5e63fe
  1. 70
      src/app/blog/Card3.tsx

70
src/app/blog/Card3.tsx

@ -0,0 +1,70 @@
import React, { FC } from "react";
import PostCardMeta from "@/components/PostCardMeta";
import { PostDataType } from "@/data/types";
import CategoryBadgeList from "@/components/CategoryBadgeList";
import PostTypeFeaturedIcon from "@/components/PostTypeFeaturedIcon";
import Link from "next/link";
import Image from "next/image";
export interface Card3Props {
className?: string;
post: PostDataType;
}
const Card3: FC<Card3Props> = ({ className = "h-full", post }) => {
const { title, href, featuredImage, desc, categories, postType } = post;
return (
<div
className={`nc-Card3 relative flex flex-col-reverse sm:flex-row sm:items-center rounded-[40px] group ${className}`}
>
<div className="flex flex-col flex-grow">
<div className="space-y-5 mb-4">
<CategoryBadgeList categories={categories} />
<div>
<h2
className={`nc-card-title block font-semibold text-neutral-900 dark:text-neutral-100 text-xl`}
>
<Link href={href} className="line-clamp-2" title={title}>
{title}
</Link>
</h2>
<div className="hidden sm:block sm:mt-2">
<span className="text-neutral-500 dark:text-neutral-400 text-base line-clamp-1">
{desc}
</span>
</div>
</div>
<PostCardMeta meta={{ ...post }} />
</div>
</div>
<div
className={`block flex-shrink-0 sm:w-56 sm:ml-6 rounded-3xl overflow-hidden mb-5 sm:mb-0`}
>
<Link
href={href}
className={`block w-full h-0 aspect-h-9 sm:aspect-h-16 aspect-w-16 `}
>
<Image
fill
src={featuredImage}
alt={title}
sizes="(max-width: 768px) 100vw, 400px"
/>
<span>
<PostTypeFeaturedIcon
className="absolute left-2 bottom-2"
postType={postType}
wrapSize="w-8 h-8"
iconSize="w-4 h-4"
/>
</span>
</Link>
</div>
</div>
);
};
export default Card3;
Loading…
Cancel
Save