Browse Source
🌟 Added Card3 component
🌟 Added Card3 component
🚧 Implemented Card3 layout 🎨 Styled Card3 component 📝 Updated Card3 documentation 🐛 Fixed Card3 bug ✅ Tested Card3 component 🔄 Refactored Card3 codemain
John Doe
1 year ago
1 changed files with 70 additions and 0 deletions
@ -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; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue