From 95293b1f27f17a0d17b1dd29cdb3f81d4e2b8ae3 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Mon, 11 Sep 2023 17:38:13 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9F=20Added=20a=20new=20React=20compon?=
 =?UTF-8?q?ent=20=F0=9F=9A=97=20Integrated=20CarCard=20component=20?=
 =?UTF-8?q?=E2=9C=88=EF=B8=8F=20Included=20ExperiencesCard=20component=20?=
 =?UTF-8?q?=F0=9F=8F=A1=20Incorporated=20StayCard=20component=20?=
 =?UTF-8?q?=F0=9F=94=A7=20Minor=20code=20refactoring=20=F0=9F=8E=89=20Proj?=
 =?UTF-8?q?ect=20enhancements=20completed!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/AnyReactComponent/AnyReactComponent.tsx b/src/components/AnyReactComponent/AnyReactComponent.tsx
new file mode 100644
index 0000000..f03eb1a
--- /dev/null
+++ b/src/components/AnyReactComponent/AnyReactComponent.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { Transition } from "@headlessui/react";
+import CarCard from "@/components/CarCard";
+import ExperiencesCard from "@/components/ExperiencesCard";
+import StayCard from "@/components/StayCard";
+import { CarDataType, ExperiencesDataType, StayDataType } from "@/data/types";
+import React, { FC, Fragment } from "react";
+import { useState } from "react";
+
+export interface AnyReactComponentProps {
+  className?: string;
+  listing?: StayDataType;
+  experiences?: ExperiencesDataType;
+  car?: CarDataType;
+  isSelected?: boolean;
+  lat: number;
+  lng: number;
+}
+
+const AnyReactComponent: FC<AnyReactComponentProps> = ({
+  className = "",
+  listing,
+  car,
+  experiences,
+  isSelected,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div
+      className={`nc-AnyReactComponent relative  ${className}`}
+      onMouseEnter={() => setIsOpen(true)}
+      onMouseLeave={() => setIsOpen(false)}
+    >
+      <span
+        className={`flex px-2 py-1 rounded-lg bg-white dark:bg-neutral-900 text-sm font-semibold items-center justify-center min-w-max shadow-lg hover:bg-neutral-900 hover:text-white dark:hover:bg-white dark:hover:text-neutral-900 transition-colors ${
+          isSelected
+            ? "bg-neutral-900 text-white dark:bg-white dark:text-neutral-900"
+            : ""
+        }`}
+      >
+        {listing?.price || experiences?.price || car?.price}
+      </span>
+      <Transition
+        show={isOpen}
+        as={Fragment}
+        enter="transition-opacity duration-75"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition-opacity duration-150"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <div className="absolute z-50 bottom-full pb-3 -left-12 w-[260px] aspect-w-1">
+          {listing && (
+            <StayCard size="small" data={listing} className="shadow-2xl" />
+          )}
+          {experiences && (
+            <ExperiencesCard
+              size="small"
+              data={experiences}
+              ratioClass="aspect-w-12 aspect-h-10"
+              className="shadow-2xl bg-white dark:bg-neutral-900 rounded-3xl"
+            />
+          )}
+          {car && <CarCard size="small" data={car} className="shadow-2xl " />}
+        </div>
+      </Transition>
+    </div>
+  );
+};
+
+export default AnyReactComponent;