OwlCyberSecurity - MANAGER

Edit File: EmiratesSearchContent.tsx

"use client";
import React, { useState, useRef, useEffect } from "react";
import SelectUnitBox from "../components/SelectUnitBox";
import Input from "../components/Input";
import AddToEmirateBasketButton from "../components/AddToEmirateBasketButton";
import { isValidUrl } from "../components/validation/isValidUrl";
import { toast } from "sonner";
import { PersianDigitToEnglish } from "../components/PersianDigitToEnglish";
import { useSearchParams } from "next/navigation";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";

const units = [
  { id: 1, title: "گرم" },
  { id: 2, title: "کیلوگرم" },
  { id: 3, title: "انس" },
  { id: 4, title: "پوند" },
];

function EmiratesSearchContent({ categoryItems }: any) {
  const searchParams = useSearchParams();
  const searchInputRef = useRef<any>();
  const [loadingButton, setLoadingButton] = useState(false);

const [searchInput, setSearchInput] = useState<any>("");
  const [priceInput, setPriceInput] = useState("");
  const [wieghtInput, setWeightInput] = useState<number | any>(100);
  const [amountInput, setAmountInput] = useState("گرم");
  const [QtyInput, setQtyInput] = useState<any>(1);
  const [disableInput, setDisableInput] = useState(false);
  const [calculateInfo, setCalculateInfo] = useState(false);
  // const [timeoutApi, setTimeoutApi] = useState<boolean>(true);

const [descInput, setDescInput] = useState("");

const [checkUrl, setCheckUrl] = useState(false);

const [calculateData, setCalculateData] = useState<any>();

useEffect(() => {
    setSearchInput(
      searchParams.get("url") ? window.location.search.slice(5) : ""
    );
  }, []);

const scrollToTop = () => {
    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
  };

useEffect(() => {
    const test = categoryItems.map((item: any) => {
      return new URL(item.url).hostname.replace("www.", "");
    });

test.filter((item: any) => {
      if (searchInput.indexOf(item) > -1) {
        setCheckUrl(true);
      }
    });
  }, [searchInput, handleSubmit]);

function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();

if (
      !searchInput ||
      !priceInput ||
      !wieghtInput ||
      !amountInput ||
      !QtyInput
    ) {
      toast.error("پر کردن همه فیلد ها اجباری می باشد.");
    } else {
      if (isValidUrl(searchInput)) {
        if (checkUrl) {
          setLoadingButton(true);
          var myHeaders = new Headers();
          myHeaders.append("Accept", "application/json");

var formdata = new FormData();
          formdata.append("price", priceInput);
          formdata.append("weight_unit", amountInput);
          formdata.append("exchange_id", "3");
          formdata.append("region_id", "3");
          formdata.append("weight", wieghtInput);
          formdata.append("count", QtyInput);

var requestOptions = {
            method: "POST",
            headers: myHeaders,
            body: formdata,
          };

fetch(
            `${process.env.NEXT_PUBLIC_API_ADDRESS}calculator-show`,
            requestOptions
          )
            .then((response) => response.json())
            .then((result) => {
              // console.log(result);
              if (result.status === 200) {
                // console.log("success");
                setCalculateData(result.data.priceRial);
                setCalculateInfo(true);
                setDisableInput(true);
              } else {
                toast.error(result.message);
              }
            })
            .catch((error) => console.log("error", error))
            .finally(() => setLoadingButton(false));
        } else {
          toast.error("لینک وارد شده از سایت های زیر نمی باشد.");
        }
      } else {
        toast.error("لینک نامعتبر است.");
      }
    }
  }
  return (
    <div className="mt-5 px-2.5 md:px-5 w-full flex flex-col">
      <form className="flex flex-col w-full" onSubmit={handleSubmit}>
        <div className="w-full flex border rounded-md pr-1 md:pr-2 pl-1 py-3">
          <div className="flex flex-1 w-full items-center gap-1 md:gap-2">
            <label htmlFor="emirates-input-search">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth="1.5"
                stroke="currentColor"
                className="w-5 h-5 md:w-6 md:h-6 text-[var(--light-blue)]"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
                />
              </svg>
            </label>
            <input
              className="border-none w-full outline-none disabled:bg-white disabled:cursor-not-allowed"
              ref={searchInputRef}
              type="text"
              name="emiratesInputSearch"
              id="emirates-input-search"
              placeholder="لینک کالای مورد نظر خود را وارد کنید ..."
              value={searchInput}
              onChange={(e) => setSearchInput(e.target.value)}
              disabled={disableInput}
              autoComplete="off"
            />
          </div>
        </div>
        <div
          // onSubmit={handleSubmit}
          className="flex flex-col sm:flex-row items-end justify-between gap-8 mt-5 w-full"
        >
          <div className="flex flex-col lg:flex-row gap-4 justify-start items-end w-full">
            <div className="basis-1/3 w-full flex flex-col gap-1">
              <label
                className={`text-[14px] ${
                  priceInput
                    ? "text-[var(--base-blue)] font-IRANSansBold"
                    : "text-[var(--text-gray)]"
                } ${+priceInput <= 0 ? "text-[var(--base-red)]" : ""}`}
                htmlFor="price-input"
              >
                قیمت(درهم)
              </label>
              <div className="w-full flex items-center gap-3 border rounded-md px-1 md:px-2">
                <svg
                  width="22"
                  height="22"
                  viewBox="0 0 20 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="w-5 h-5 md:w-6 md:h-6 text-[var(--light-blue)]"
                >
                  <g clipPath="url(#clip0_1364_15747)">
                    <path
                      d="M15.8333 16.6668H4.16667C3.062 16.6655 2.00296 16.2261 1.22185 15.445C0.440735 14.6639 0.00132321 13.6048 0 12.5002L0 7.50016C0.00132321 6.3955 0.440735 5.33646 1.22185 4.55535C2.00296 3.77423 3.062 3.33482 4.16667 3.3335H15.8333C16.938 3.33482 17.997 3.77423 18.7782 4.55535C19.5593 5.33646 19.9987 6.3955 20 7.50016V12.5002C19.9987 13.6048 19.5593 14.6639 18.7782 15.445C17.997 16.2261 16.938 16.6655 15.8333 16.6668ZM4.16667 5.00016C3.50363 5.00016 2.86774 5.26356 2.3989 5.7324C1.93006 6.20124 1.66667 6.83712 1.66667 7.50016V12.5002C1.66667 13.1632 1.93006 13.7991 2.3989 14.2679C2.86774 14.7368 3.50363 15.0002 4.16667 15.0002H15.8333C16.4964 15.0002 17.1323 14.7368 17.6011 14.2679C18.0699 13.7991 18.3333 13.1632 18.3333 12.5002V7.50016C18.3333 6.83712 18.0699 6.20124 17.6011 5.7324C17.1323 5.26356 16.4964 5.00016 15.8333 5.00016H4.16667ZM10 13.3335C9.34073 13.3335 8.69626 13.138 8.1481 12.7717C7.59994 12.4055 7.17269 11.8849 6.9204 11.2758C6.66811 10.6667 6.6021 9.99647 6.73072 9.34986C6.85933 8.70326 7.1768 8.10932 7.64298 7.64314C8.10915 7.17697 8.7031 6.8595 9.3497 6.73088C9.9963 6.60226 10.6665 6.66827 11.2756 6.92056C11.8847 7.17286 12.4053 7.6001 12.7716 8.14826C13.1378 8.69643 13.3333 9.34089 13.3333 10.0002C13.3333 10.8842 12.9821 11.7321 12.357 12.3572C11.7319 12.9823 10.8841 13.3335 10 13.3335ZM10 8.3335C9.67036 8.3335 9.34813 8.43124 9.07405 8.61438C8.79997 8.79752 8.58635 9.05781 8.4602 9.36236C8.33405 9.6669 8.30105 10.002 8.36536 10.3253C8.42967 10.6486 8.5884 10.9456 8.82149 11.1787C9.05458 11.4118 9.35155 11.5705 9.67485 11.6348C9.99815 11.6991 10.3333 11.6661 10.6378 11.54C10.9423 11.4138 11.2026 11.2002 11.3858 10.9261C11.5689 10.652 11.6667 10.3298 11.6667 10.0002C11.6667 9.55814 11.4911 9.13421 11.1785 8.82165C10.8659 8.50909 10.442 8.3335 10 8.3335ZM4.16667 6.66683C4.00185 6.66683 3.84073 6.7157 3.70369 6.80727C3.56665 6.89884 3.45984 7.02899 3.39677 7.18126C3.33369 7.33353 3.31719 7.50109 3.34935 7.66274C3.3815 7.82439 3.46087 7.97287 3.57741 8.08942C3.69395 8.20596 3.84244 8.28533 4.00409 8.31748C4.16574 8.34964 4.3333 8.33314 4.48557 8.27006C4.63784 8.20699 4.76799 8.10018 4.85956 7.96314C4.95113 7.8261 5 7.66498 5 7.50016C5 7.27915 4.9122 7.06719 4.75592 6.91091C4.59964 6.75463 4.38768 6.66683 4.16667 6.66683ZM15 7.50016C15 7.66498 15.0489 7.8261 15.1404 7.96314C15.232 8.10018 15.3622 8.20699 15.5144 8.27006C15.6667 8.33314 15.8343 8.34964 15.9959 8.31748C16.1576 8.28533 16.306 8.20596 16.4226 8.08942C16.5391 7.97287 16.6185 7.82439 16.6507 7.66274C16.6828 7.50109 16.6663 7.33353 16.6032 7.18126C16.5402 7.02899 16.4333 6.89884 16.2963 6.80727C16.1593 6.7157 15.9982 6.66683 15.8333 6.66683C15.6123 6.66683 15.4004 6.75463 15.2441 6.91091C15.0878 7.06719 15 7.27915 15 7.50016ZM4.16667 11.6668C4.00185 11.6668 3.84073 11.7157 3.70369 11.8073C3.56665 11.8988 3.45984 12.029 3.39677 12.1813C3.33369 12.3335 3.31719 12.5011 3.34935 12.6627C3.3815 12.8244 3.46087 12.9729 3.57741 13.0894C3.69395 13.206 3.84244 13.2853 4.00409 13.3175C4.16574 13.3496 4.3333 13.3331 4.48557 13.2701C4.63784 13.207 4.76799 13.1002 4.85956 12.9631C4.95113 12.8261 5 12.665 5 12.5002C5 12.2791 4.9122 12.0672 4.75592 11.9109C4.59964 11.7546 4.38768 11.6668 4.16667 11.6668ZM15 12.5002C15 12.665 15.0489 12.8261 15.1404 12.9631C15.232 13.1002 15.3622 13.207 15.5144 13.2701C15.6667 13.3331 15.8343 13.3496 15.9959 13.3175C16.1576 13.2853 16.306 13.206 16.4226 13.0894C16.5391 12.9729 16.6185 12.8244 16.6507 12.6627C16.6828 12.5011 16.6663 12.3335 16.6032 12.1813C16.5402 12.029 16.4333 11.8988 16.2963 11.8073C16.1593 11.7157 15.9982 11.6668 15.8333 11.6668C15.6123 11.6668 15.4004 11.7546 15.2441 11.9109C15.0878 12.0672 15 12.2791 15 12.5002Z"
                      fill="#2fa9ff"
                    />
                  </g>
                  <defs>
                    <clipPath id="clip0_1364_15747">
                      <rect width="20" height="20" fill="white" />
                    </clipPath>
                  </defs>
                </svg>
                <input
                  className="border-none outline-none py-[10px] bg-transparent rounded-[8px] w-full text-[14px] md:text-[16px]"
                  type="text"
                  name="price-input"
                  id="price-input"
                  placeholder="مبلغ(درهم)"
                  value={priceInput}
                  onChange={(e) => {
                    const regex = /^[0-9\b+۰+۱+۲+۳+۴+۵+۶+۷+۸+۹+.]+$/;
                    if (e.target.value === "" || regex.test(e.target.value)) {
                      setPriceInput(PersianDigitToEnglish(e.target.value));
                    }
                  }}
                  dir={priceInput ? "ltr" : "rtl"}
                  disabled={disableInput}
                />
              </div>
            </div>

<div className="basis-2/3 flex flex-col md:flex-row items-end gap-4 w-full">
              <div className="basis-2/3 w-full flex flex-col gap-1">
                <label
                  htmlFor="weight-input"
                  className={`text-[14px] whitespace-nowrap ${
                    wieghtInput && amountInput
                      ? "text-[var(--base-blue)] font-IRANSansBold"
                      : "text-[var(--text-gray)]"
                  } ${+wieghtInput <= 0 ? "text-[var(--base-red)]" : ""}`}
                >
                  وزن(اگر وزن محصول را نمیدانید 100 گرم وارد کنید.)
                </label>
                <div className="border rounded-[8px] flex items-center">
                  <div className="flex items-center gap-3 px-1 md:px-2 border-l basis-1/2">
                    <svg
                      width="20"
                      height="20"
                      viewBox="0 0 20 20"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      className="w-5 h-5 md:w-6 md:h-6 text-[var(--light-blue)]"
                    >
                      <path
                        d="M15.835 1.67494H13.7201C13.1441 1.01841 12.4038 0.527072 11.5751 0.251419C10.7463 -0.0242334 9.85918 -0.0742605 9.00473 0.106479C7.9641 0.318691 7.02336 0.870362 6.3301 1.67494H4.17358C3.06941 1.67626 2.01085 2.11547 1.23009 2.89624C0.449325 3.677 0.0101117 4.73556 0.00878906 5.83972L0.00878906 15.8352C0.0101117 16.9394 0.449325 17.9979 1.23009 18.7787C2.01085 19.5595 3.06941 19.9987 4.17358 20H15.835C16.9391 19.9987 17.9977 19.5595 18.7785 18.7787C19.5592 17.9979 19.9984 16.9394 19.9998 15.8352V5.83972C19.9984 4.73556 19.5592 3.677 18.7785 2.89624C17.9977 2.11547 16.9391 1.67626 15.835 1.67494ZM10.0043 1.67494C10.8879 1.67494 11.7354 2.02597 12.3602 2.65081C12.9851 3.27565 13.3361 4.12311 13.3361 5.00677C13.3361 5.22768 13.2484 5.43955 13.0921 5.59576C12.9359 5.75197 12.7241 5.83972 12.5032 5.83972H10.7273L11.5303 4.6361C11.6529 4.4523 11.6974 4.22732 11.6542 4.01066C11.6109 3.794 11.4833 3.6034 11.2995 3.48079C11.1157 3.35818 10.8907 3.31361 10.6741 3.35688C10.4574 3.40015 10.2668 3.52772 10.1442 3.71152L8.72569 5.83972H7.50541C7.28449 5.83972 7.07263 5.75197 6.91642 5.59576C6.76021 5.43955 6.67245 5.22768 6.67245 5.00677C6.67245 4.12311 7.02348 3.27565 7.64832 2.65081C8.27316 2.02597 9.12062 1.67494 10.0043 1.67494ZM18.3339 15.8352C18.3339 16.498 18.0706 17.1336 17.6019 17.6022C17.1333 18.0708 16.4977 18.3341 15.835 18.3341H4.17358C3.51083 18.3341 2.87524 18.0708 2.40661 17.6022C1.93798 17.1336 1.6747 16.498 1.6747 15.8352V5.83972C1.6747 5.17698 1.93798 4.54138 2.40661 4.07276C2.87524 3.60413 3.51083 3.34085 4.17358 3.34085H5.33389C5.11807 3.93207 5.00728 4.55647 5.00653 5.18585C5.00719 5.8009 5.25181 6.39056 5.68671 6.82546C6.12161 7.26036 6.71128 7.50498 7.32632 7.50564H12.6822C13.2795 7.51113 13.8554 7.28415 14.2883 6.87269C14.7212 6.46123 14.9772 5.89754 15.002 5.3008C15.0104 4.63647 14.9137 3.97499 14.7155 3.34085H15.835C16.4977 3.34085 17.1333 3.60413 17.6019 4.07276C18.0706 4.54138 18.3339 5.17698 18.3339 5.83972V15.8352Z"
                        fill="#2FA9FF"
                      />
                    </svg>
                    <input
                      className="outline-none py-[10px] bg-transparent w-full text-[14px] md:text-[16px] border-none"
                      type="number"
                      name="weight-input"
                      id="weight-input"
                      placeholder="وزن"
                      value={wieghtInput}
                      onChange={(e) => {
                        const regex = /^[0-9\b+۰+۱+۲+۳+۴+۵+۶+۷+۸+۹+.]+$/;
                        if (
                          e.target.value === "" ||
                          regex.test(e.target.value)
                        ) {
                          setWeightInput(PersianDigitToEnglish(e.target.value));
                        }
                      }}
                      dir={wieghtInput ? "ltr" : "rtl"}
                      disabled={disableInput}
                    />
                  </div>
                  <Select
                    value={amountInput}
                    onValueChange={(value) => setAmountInput(value)}
                    disabled={disableInput}
                    name="amount-input"
                  >
                    <SelectTrigger className="border-none overflow-hidden basis-1/2">
                      <SelectValue placeholder="یک واحد را انتخاب کنید." />
                    </SelectTrigger>
                    <SelectContent className="">
                      {units?.map((item: any, i: number) => (
                        <SelectItem
                          className="border-b last:border-none p-2"
                          value={item.title}
                          key={item.id}
                        >
                          {item.title}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="basis-1/3 w-full flex flex-col gap-1">
                <label
                  className={`text-[14px] ${
                    QtyInput
                      ? "text-[var(--base-blue)] font-IRANSansBold"
                      : "text-[var(--text-gray)]"
                  } ${+QtyInput <= 0 ? "text-[var(--base-red)]" : ""}`}
                  htmlFor="qty-input"
                >
                  تعداد
                </label>
                <div className="w-full flex items-center gap-3 border rounded-md pr-1 md:pr-2">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    strokeWidth="1.5"
                    stroke="currentColor"
                    className="w-5 h-5 md:w-6 md:h-6 text-[var(--light-blue)]"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5"
                    />
                  </svg>
                  <input
                    className="border-none outline-none py-[10px] pl-5 bg-transparent rounded-[8px] w-full text-[14px] md:text-[16px] text-center"
                    type="text"
                    name="qty-input"
                    id="qty-input"
                    placeholder="تعداد"
                    value={QtyInput}
                    onChange={(e) => {
                      const regex = /^[0-9\b+۰+۱+۲+۳+۴+۵+۶+۷+۸+۹]+$/;
                      if (e.target.value === "" || regex.test(e.target.value)) {
                        setQtyInput(PersianDigitToEnglish(e.target.value));
                      }
                    }}
                    dir={QtyInput ? "ltr" : "rtl"}
                    disabled={disableInput}
                  />
                </div>
              </div>
            </div>
          </div>
          {disableInput ? (
            <div
              className="w-full md:w-auto flex items-center justify-center bg-[var(--base-blue)] hover:bg-[#0038a0] hover:text-white text-gray-100 rounded-md !py-2.5 !px-8 md:!px-4 h-auto m-0 cursor-pointer whitespace-nowrap text-center transition-all duration-75"
              onClick={() => {
                setDisableInput(false);
                setCalculateInfo(false);
                scrollToTop();
              }}
            >
              <p>محاسبه مجدد قیمت</p>
            </div>
          ) : (
            <Button
              className="w-full md:w-auto flex !gap-1 bg-[var(--base-blue)] hover:bg-[#0038a0] hover:text-white text-gray-100 rounded-md !py-2.5 !px-8 md:!px-4 h-auto m-0"
              variant="ghost"
              type="submit"
              disabled={disableInput}
            >
              {loadingButton ? (
                <span
                  className={
                    loadingButton
                      ? "button-loader-white active"
                      : "button-loader-white"
                  }
                ></span>
              ) : null}
              <div className="flex items-center gap-1">
                <p className="text-sm md:text-base">محاسبه گر قیمت</p>
                <span className="text-sm">(تقریبی)</span>
              </div>
            </Button>
          )}
        </div>
      </form>

{calculateInfo ? (
        <div className="flex flex-col w-full gap-[15px] mt-[15px]">
          <div className="flex items-center w-full">
            <p
              style={{ minWidth: "100px" }}
              className="text-[var(--text-gray)]"
            >
              نتیجه جستجو
            </p>
            <span className="w-full h-[1px] bg-[var(--very-light-border)]"></span>
          </div>
          <div className="flex flex-col md:items-center md:flex-row gap-[15px]">
            <div className="basis-1/3 flex flex-col gap-[15px] pl-[15px] md:border-l border-[var(--very-light-border)]">
              <div className="flex items-center justify-between gap-3">
                <p className="font-IRANSansBold text-[14px] md:text-[16px] whitespace-nowrap">
                  قیمت کل کالا
                </p>
                <p className="font-IRANSansBold text-[14px] md:text-[16px] whitespace-nowrap">
                  {calculateData.finalRialPrice.toLocaleString()}{" "}
                  <span className="font-light text-[13px]">
                    {process.env.price}
                  </span>{" "}
                </p>
              </div>
              <div className="flex items-center justify-between">
                <p className="text-[var(--text-gray)] text-[14px] md:text-[16px]">
                  قیمت به درهم
                </p>
                <p className="text-[14px] md:text-[16px]">
                  {priceInput}{" "}
                  <span className="font-light text-[13px]">درهم</span>{" "}
                </p>
              </div>
            </div>
            <div className="basis-1/3 flex flex-col gap-[15px] pl-[15px]">
              <div className="flex items-center justify-between">
                <p className="text-[var(--text-gray)] text-[14px] md:text-[16px]">
                  هزینه خرید
                </p>
                <p className="text-[14px] md:text-[16px]">
                  {(
                    calculateData.buyCost + calculateData.buyProfit
                  ).toLocaleString()}{" "}
                  <span className="font-light text-[13px]">
                    {process.env.price}
                  </span>{" "}
                </p>
              </div>
              <div className="flex items-center justify-between gap-3">
                <p className="text-[var(--text-gray)] text-[14px] md:text-[16px] whitespace-nowrap">
                  هزینه حمل و نقل
                </p>
                <p className="text-[14px] md:text-[16px] whitespace-nowrap">
                  {calculateData.shipBroker.toLocaleString()}{" "}
                  <span className="font-light text-[13px]">
                    {process.env.price}
                  </span>{" "}
                </p>
              </div>
            </div>
          </div>
          <div className="flex flex-col lg:flex-row items-center justify-between gap-[20px] w-full">
            <input
              className=" basis-3/4 p-[12px] outline-none rounded-[8px] w-full"
              type="text"
              name="description-input"
              placeholder="توضیحات خود را برای این محصول اضافه کنید (اختیاری)"
              value={descInput}
              onChange={(e) => setDescInput(e.target.value)}
              autoComplete="off"
            />
            <AddToEmirateBasketButton
              link={searchInput}
              weight_unit={amountInput}
              firstweight={wieghtInput}
              exchange_id={3}
              region_id={3}
              image="/assets/images/icons/charsooq-logo.png"
              name={searchInput.slice(0, 40)}
              cost={priceInput}
              buyCost={calculateData.buyCost}
              buyProfit={calculateData.buyProfit}
              shipBroker={calculateData.shipBroker}
              count={QtyInput}
              description={descInput}
              singleitemfullprice={calculateData.finalRialPrice}
            />
          </div>
          {/* <p
            onClick={() => {
              setDisableInput(false);
              setCalculateInfo(false);
              scrollToTop();
            }}
            className="font-IRANSansBold text-[var(--base-blue)] text-[14px] underline cursor-pointer text-end col-end-4"
          >
            محاسبه مجدد قیمت
          </p> */}
        </div>
      ) : null}
    </div>
  );
}

export default EmiratesSearchContent;