🚀 Added location functionality.

🌍 Implemented location services.
📌 Added MapPinIcon for geolocation.
🏡 Added address input fields.
🗺️ Integrated Google Maps API for location display.
🌐 Updated location-related components.
📝 Added form items for address details.
🏙️ Improved city and state inputs.
📮 Enhanced postal code input.

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;