From 78231eecc8486c90245f286ca06344fdd2760d73 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Wed, 13 Sep 2023 19:47:38 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Made=20some=20improveme?=
 =?UTF-8?q?nts=20to=20the=20code=20=F0=9F=90=9B=20Fixed=20a=20minor=20bug?=
 =?UTF-8?q?=20=F0=9F=9A=80=20Added=20new=20features=20=F0=9F=94=A7=20Refac?=
 =?UTF-8?q?tored=20some=20code=20for=20better=20readability=20=F0=9F=8C=9F?=
 =?UTF-8?q?=20Implemented=20a=20cool=20enhancement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(car-search-form)/RentalCarSearchForm.tsx | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/app/(client-components)/(HeroSearchForm)/(car-search-form)/RentalCarSearchForm.tsx

diff --git a/src/app/(client-components)/(HeroSearchForm)/(car-search-form)/RentalCarSearchForm.tsx b/src/app/(client-components)/(HeroSearchForm)/(car-search-form)/RentalCarSearchForm.tsx
new file mode 100644
index 0000000..156a3ed
--- /dev/null
+++ b/src/app/(client-components)/(HeroSearchForm)/(car-search-form)/RentalCarSearchForm.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import React, { FC, useState } from "react";
+import LocationInput from "../LocationInput";
+import RentalCarDatesRangeInput from "./RentalCarDatesRangeInput";
+
+export interface RentalCarSearchFormProps {}
+
+const RentalCarSearchForm: FC<RentalCarSearchFormProps> = ({}) => {
+  const [dropOffLocationType, setDropOffLocationType] = useState<
+    "same" | "different"
+  >("different");
+
+  const renderRadioBtn = () => {
+    return (
+      <div className=" py-5 [ nc-hero-field-padding ] flex items-center flex-wrap flex-row border-b border-neutral-100 dark:border-neutral-700">
+        <div
+          className={`py-1.5 px-4 flex items-center rounded-full font-medium text-xs cursor-pointer mr-2 my-1 sm:mr-3 ${
+            dropOffLocationType === "different"
+              ? "bg-black text-white shadow-black/10 shadow-lg"
+              : "border border-neutral-300 dark:border-neutral-700"
+          }`}
+          onClick={(e) => setDropOffLocationType("different")}
+        >
+          Different drop off
+        </div>
+        <div
+          className={`py-1.5 px-4 flex items-center rounded-full font-medium text-xs cursor-pointer mr-2 my-1 sm:mr-3 ${
+            dropOffLocationType === "same"
+              ? "bg-black text-white shadow-black/10 shadow-lg"
+              : "border border-neutral-300 dark:border-neutral-700"
+          }`}
+          onClick={(e) => setDropOffLocationType("same")}
+        >
+          Same drop off
+        </div>
+      </div>
+    );
+  };
+
+  const isDdropOffdifferent = dropOffLocationType === "different";
+
+  return (
+    <form className="w-full relative mt-8 rounded-[40px] xl:rounded-[49px] rounded-t-2xl xl:rounded-t-3xl shadow-xl dark:shadow-2xl bg-white dark:bg-neutral-800">
+      {renderRadioBtn()}
+      <div className={`relative flex flex-row`}>
+        <LocationInput
+          placeHolder="City or Airport"
+          desc="Pick up location"
+          className="flex-1"
+        />
+        {isDdropOffdifferent && (
+          <>
+            <div className="self-center border-r border-slate-200 dark:border-slate-700 h-8"></div>
+            <LocationInput
+              placeHolder="City or Airport"
+              desc="Drop off location"
+              className="flex-1"
+              divHideVerticalLineClass="-inset-x-0.5"
+            />
+          </>
+        )}
+        <div className="self-center border-r border-slate-200 dark:border-slate-700 h-8"></div>
+        <RentalCarDatesRangeInput className="flex-1" />
+      </div>
+    </form>
+  );
+};
+
+export default RentalCarSearchForm;