From 20b827c8d515916f62397dc83c588507e10cb2c1 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Tue, 12 Sep 2023 17:29:08 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20Implemented=20Card3Small=20compo?=
 =?UTF-8?q?nent=20=F0=9F=9A=A7=20Added=20Card3Small=20for=20post=20display?=
 =?UTF-8?q?=20=F0=9F=8C=9F=20Styling=20enhancements=20for=20Card3Small=20?=
 =?UTF-8?q?=F0=9F=93=9A=20Updated=20Card3Small=20component=20=F0=9F=94=A5?=
 =?UTF-8?q?=20Optimized=20Card3Small=20rendering=20=F0=9F=8E=A8=20Improved?=
 =?UTF-8?q?=20design=20for=20Card3Small=20=F0=9F=94=84=20Refactored=20Card?=
 =?UTF-8?q?3Small=20component=20=F0=9F=8C=86=20Enhanced=20Card3Small=20ima?=
 =?UTF-8?q?ge=20handling=20=E2=9C=85=20Tested=20Card3Small=20functionality?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/blog/Card3Small.tsx | 50 +++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src/app/blog/Card3Small.tsx

diff --git a/src/app/blog/Card3Small.tsx b/src/app/blog/Card3Small.tsx
new file mode 100644
index 0000000..0df77fa
--- /dev/null
+++ b/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;