From b283604cac7fcd4ed096b7ec0c6be2b1e0a97b04 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Tue, 12 Sep 2023 17:40:17 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Added=20location=20functionality?=
 =?UTF-8?q?.=20=F0=9F=8C=8D=20Implemented=20location=20services.=20?=
 =?UTF-8?q?=F0=9F=93=8C=20Added=20MapPinIcon=20for=20geolocation.=20?=
 =?UTF-8?q?=F0=9F=8F=A1=20Added=20address=20input=20fields.=20=F0=9F=97=BA?=
 =?UTF-8?q?=EF=B8=8F=20Integrated=20Google=20Maps=20API=20for=20location?=
 =?UTF-8?q?=20display.=20=F0=9F=8C=90=20Updated=20location-related=20compo?=
 =?UTF-8?q?nents.=20=F0=9F=93=9D=20Added=20form=20items=20for=20address=20?=
 =?UTF-8?q?details.=20=F0=9F=8F=99=EF=B8=8F=20Improved=20city=20and=20stat?=
 =?UTF-8?q?e=20inputs.=20=F0=9F=93=AE=20Enhanced=20postal=20code=20input.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[[...stepIndex]]/PageAddListing2.tsx      | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 src/app/add-listing/[[...stepIndex]]/PageAddListing2.tsx

diff --git a/src/app/add-listing/[[...stepIndex]]/PageAddListing2.tsx b/src/app/add-listing/[[...stepIndex]]/PageAddListing2.tsx
new file mode 100644
index 0000000..9f651f7
--- /dev/null
+++ b/src/app/add-listing/[[...stepIndex]]/PageAddListing2.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { MapPinIcon } from "@heroicons/react/24/solid";
+import LocationMarker from "@/components/AnyReactComponent/LocationMarker";
+import Label from "@/components/Label";
+import GoogleMapReact from "google-map-react";
+import React, { FC } from "react";
+import ButtonSecondary from "@/shared/ButtonSecondary";
+import Input from "@/shared/Input";
+import Select from "@/shared/Select";
+import FormItem from "../FormItem";
+
+export interface PageAddListing2Props {}
+
+const PageAddListing2: FC<PageAddListing2Props> = () => {
+  return (
+    <>
+      <h2 className="text-2xl font-semibold">Your place location</h2>
+      <div className="w-14 border-b border-neutral-200 dark:border-neutral-700"></div>
+      {/* FORM */}
+      <div className="space-y-8">
+        <ButtonSecondary>
+          <MapPinIcon className="w-5 h-5 text-neutral-500 dark:text-neutral-400" />
+          <span className="ml-3">Use current location</span>
+        </ButtonSecondary>
+        {/* ITEM */}
+        <FormItem label="Country/Region">
+          <Select>
+            <option value="Viet Nam">Viet Nam</option>
+            <option value="Thailand">Thailand</option>
+            <option value="France">France</option>
+            <option value="Singapore">Singapore</option>
+            <option value="Jappan">Jappan</option>
+            <option value="Korea">Korea</option>
+            <option value="...">...</option>
+          </Select>
+        </FormItem>
+        <FormItem label="Street">
+          <Input placeholder="..." />
+        </FormItem>
+        <FormItem label="Room number (optional)">
+          <Input />
+        </FormItem>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-5">
+          <FormItem label="City">
+            <Input />
+          </FormItem>
+          <FormItem label="State">
+            <Input />
+          </FormItem>
+          <FormItem label="Postal code">
+            <Input />
+          </FormItem>
+        </div>
+        <div>
+          <Label>Detailed address</Label>
+          <span className="block mt-1 text-sm text-neutral-500 dark:text-neutral-400">
+            1110 Pennsylvania Avenue NW, Washington, DC 20230
+          </span>
+          <div className="mt-4">
+            <div className="aspect-w-5 aspect-h-5 sm:aspect-h-3">
+              <div className="rounded-xl overflow-hidden">
+                <GoogleMapReact
+                  bootstrapURLKeys={{
+                    key: "AIzaSyAGVJfZMAKYfZ71nzL_v5i3LjTTWnCYwTY",
+                  }}
+                  yesIWantToUseGoogleMapApiInternals
+                  defaultZoom={15}
+                  defaultCenter={{
+                    lat: 55.9607277,
+                    lng: 36.2172614,
+                  }}
+                >
+                  <LocationMarker lat={55.9607277} lng={36.2172614} />
+                </GoogleMapReact>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PageAddListing2;