From 0b3a5e63fe65af450b23fbe82e6beef9ca104e29 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Tue, 12 Sep 2023 17:29:57 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9F=20Added=20Card3=20component=20?=
 =?UTF-8?q?=F0=9F=9A=A7=20Implemented=20Card3=20layout=20=F0=9F=8E=A8=20St?=
 =?UTF-8?q?yled=20Card3=20component=20=F0=9F=93=9D=20Updated=20Card3=20doc?=
 =?UTF-8?q?umentation=20=F0=9F=90=9B=20Fixed=20Card3=20bug=20=E2=9C=85=20T?=
 =?UTF-8?q?ested=20Card3=20component=20=F0=9F=94=84=20Refactored=20Card3?=
 =?UTF-8?q?=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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