From c315c74ae1bcd47a73279a89f3bf42d0d73256d5 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Mon, 11 Sep 2023 17:13:41 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Added=20a=20new=20feature=20to?=
 =?UTF-8?q?=20Collection=20component=20=F0=9F=8E=A8=20Improved=20code=20st?=
 =?UTF-8?q?ructure=20and=20formatting=20=F0=9F=92=A1=20Enhanced=20performa?=
 =?UTF-8?q?nce=20in=20Collection=20component=20=F0=9F=90=9B=20Fixed=20a=20?=
 =?UTF-8?q?bug=20in=20the=20Collection=20component=20=E2=9C=85=20Added=20u?=
 =?UTF-8?q?nit=20tests=20for=20Collection=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Collection.tsx | 65 +++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 src/components/Collection.tsx

diff --git a/src/components/Collection.tsx b/src/components/Collection.tsx
new file mode 100644
index 0000000..ddf3c9a
--- /dev/null
+++ b/src/components/Collection.tsx
@@ -0,0 +1,65 @@
+import React, { FC } from "react";
+import ButtonSecondary from "@/shared/ButtonSecondary";
+import Link from "next/link";
+import Image from "next/image";
+
+export interface CollectionProps {
+  className?: string;
+  featuredImage?: string;
+  name?: string;
+  desc?: string;
+  color?: string;
+}
+
+const Collection: FC<CollectionProps> = ({
+  className = "",
+  featuredImage = "https://images.pexels.com/photos/5059013/pexels-photo-5059013.jpeg?auto=compress&cs=tinysrgb&w=1600",
+  name = "Collection",
+  desc = "The most popular <br /> in the world",
+  color,
+}) => {
+  return (
+    <Link href={"/listing-stay"} className={`nc-Collection block ${className}`}>
+      <div
+        className={`relative w-full aspect-w-16 aspect-h-11 sm:aspect-h-10 h-0 rounded-2xl overflow-hidden group ${color}`}
+      >
+        <div>
+          <Image
+            src={featuredImage}
+            fill
+            alt=""
+            className="object-cover "
+            sizes="300px"
+          />
+        </div>
+        <span className="opacity-0 group-hover:opacity-40 absolute inset-0 bg-black/10 transition-opacity"></span>
+
+        <div>
+          <div className="absolute inset-5 flex flex-col">
+            <div className="max-w-xs">
+              <span className={`block mb-2 text-sm text-slate-700`}>
+                {name}
+              </span>
+              {desc && (
+                <h2
+                  className={`text-xl md:text-2xl text-slate-900 font-semibold`}
+                  dangerouslySetInnerHTML={{ __html: desc }}
+                ></h2>
+              )}
+            </div>
+            <div className="mt-auto">
+              <ButtonSecondary
+                sizeClass="py-3 px-4 sm:py-3.5 sm:px-6"
+                fontSize="text-sm font-medium"
+              >
+                Show more
+              </ButtonSecondary>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default Collection;