Browse Source

🎉 Implemented Card3Small component

🚧 Added Card3Small for post display
🌟 Styling enhancements for Card3Small
📚 Updated Card3Small component
🔥 Optimized Card3Small rendering
🎨 Improved design for Card3Small
🔄 Refactored Card3Small component
🌆 Enhanced Card3Small image handling
 Tested Card3Small functionality
main
John Doe 1 year ago
parent
commit
20b827c8d5
  1. 50
      src/app/blog/Card3Small.tsx

50
src/app/blog/Card3Small.tsx

@ -0,0 +1,50 @@
import React, { FC } from "react";
import PostCardMeta from "@/components/PostCardMeta";
import { PostDataType } from "@/data/types";
import Link from "next/link";
import Image from "next/image";
export interface Card3SmallProps {
className?: string;
post: PostDataType;
}
const Card3Small: FC<Card3SmallProps> = ({ className = "h-full", post }) => {
const { title, href, featuredImage } = post;
return (
<div
className={`nc-Card3Small relative flex flex-col-reverse sm:flex-row sm:justify-between sm:items-center ${className}`}
data-nc-id="Card3Small"
>
<Link href={href} className=" absolute inset-0" title={title}></Link>
<div className="relative space-y-2">
<PostCardMeta meta={{ ...post }} />
<h2 className="nc-card-title block text-base font-semibold text-neutral-900 dark:text-neutral-100">
<Link href={href} className=" line-clamp-2" title={title}>
{title}
</Link>
</h2>
</div>
<Link
href={href}
title={title}
className={`block sm:w-20 flex-shrink-0 relative rounded-lg overflow-hidden mb-5 sm:ml-4 sm:mb-0 group`}
>
<div className={`w-full h-0 aspect-w-16 aspect-h-9 sm:aspect-h-16`}>
<Image
fill
className="object-cover group-hover:scale-110 transform transition-transform duration-300"
src={featuredImage}
title={title}
alt=""
sizes="(max-width: 768px) 100vw, 300px"
/>
</div>
</Link>
</div>
);
};
export default Card3Small;
Loading…
Cancel
Save