login modal

src/calc/formatNumber.ts

@@ -0,0 +1,19 @@
+const formatNumber = (
+  num: number,
+  separator: string,
+  countToSeparate: number,
+  firstIndexSeparator: number
+) => {
+  const notFormated = [];
+  const text = `${num}`;
+  for (let i = 0; i < text.length; i++) {
+    if (i % countToSeparate === firstIndexSeparator) {
+      notFormated.push(separator);
+    }
+    notFormated.push(text[i]);
+  }
+
+  return notFormated.join("");
+};
+
+export { formatNumber };

src/components/MasterSelector.tsx

@@ -0,0 +1,38 @@
+import { NumericFormat, PatternFormat } from "react-number-format";
+import ChevronDownIcon from "./icons/ChevronDownIcon";
+
+interface IOptions {
+  id: string;
+  value: string;
+  placeholder: string;
+}
+
+interface MasterSelectorProps {
+  title: string;
+  isError?: false;
+  options?: IOptions[];
+}
+
+// const formatPhone =
+
+const MasterSelector = ({ title }: MasterSelectorProps) => {
+  return (
+    <div className="pb-8">
+      <p className="text-[#0D192266] text-caption-m font-semibold pb-2">
+        {title}
+      </p>
+      <div className="bg-white rounded-lg flex px-4 py-[14px] items-center border">
+        <div className="text-m text-[#00BED7] pr-2 border-r flex items-center gap-2">
+          +971 <ChevronDownIcon width="20" height="20" />
+        </div>
+        <PatternFormat
+          format="## #### ###"
+          placeholder="XX XXXX XX XX"
+          className="focus:outline-none pl-4"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MasterSelector;

src/components/MultiRangeSlider.tsx

@@ -1,5 +1,6 @@
 import { useRef, useEffect } from "react";
 import RangeSlider from "react-range-slider-input";
+import { NumericFormat } from "react-number-format";
 import "./multiRangeSlider.css";
 import { IMultirangeSlider } from "../types/multirangeSlider";
 
@@ -20,7 +21,7 @@ const MultiRangeSlider = ({
   };
 
   const handleOnFirstInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = Number(e.target.value);
+    const value = Number(e.target.value.split(",").join(""));
     if (
       value >= multirangeSlider.minValue &&
       value <= multirangeSlider.maxValue
@@ -36,7 +37,7 @@ const MultiRangeSlider = ({
   const handleOnSecondInputChange = (
     e: React.ChangeEvent<HTMLInputElement>
   ) => {
-    const value = Number(e.target.value);
+    const value = Number(e.target.value.split(",").join(""));
     if (
       value >= multirangeSlider.minValue &&
       value <= multirangeSlider.maxValue
@@ -71,22 +72,36 @@ const MultiRangeSlider = ({
     <div className="">
       <div className="flex justify-between p-3 bg-white rounded-2xl relative flex-col">
         <div className="flex justify-between">
-          <input
+          {/* <input
             ref={firstInputRef}
             key={multirangeSlider.startValue}
-            type="number"
+            type="string"
+            onChange={handleOnFirstInputChange}
+            defaultValue={formatNumber(multirangeSlider.startValue, ",", 3, 1)}
+            className="focus:outline-none input_number w-1/2"
+          /> */}
+          <NumericFormat
+            thousandSeparator=","
+            key={multirangeSlider.startValue}
             onChange={handleOnFirstInputChange}
             defaultValue={multirangeSlider.startValue}
             className="focus:outline-none input_number w-1/2"
           />
-          <input
+          <NumericFormat
+            thousandSeparator=","
+            key={multirangeSlider.endValue}
+            onChange={handleOnSecondInputChange}
+            defaultValue={multirangeSlider.endValue}
+            className="focus:outline-none input_number w-1/2 text-right"
+          />
+          {/* <input
             ref={secondInputRef}
             onChange={handleOnSecondInputChange}
             key={multirangeSlider.endValue}
-            type="number"
-            defaultValue={multirangeSlider.endValue}
+            type="string"
+            defaultValue={formatNumber(multirangeSlider.endValue, ",", 3, 1)}
             className="focus:outline-none appearance-none input_number text-right w-1/2"
-          />
+          /> */}
         </div>
         <RangeSlider
           min={multirangeSlider.minValue}

src/components/header/Auth/Auth.tsx

@@ -6,7 +6,7 @@ interface AuthProps {
   isAuth?: boolean;
 }
 
-const Auth = ({ isAuth = true }: AuthProps) => {
+const Auth = ({ isAuth = false }: AuthProps) => {
   const userName = "Full Name";
 
   return (

src/components/header/Auth/AuthDesktop.tsx

@@ -1,4 +1,6 @@
+import useModal from "../../../store/useModal";
 import Button from "../../Button";
+import LoginModal from "../../modals/LoginModal";
 
 interface AuthProps {
   isAuth: boolean;
@@ -6,6 +8,12 @@ interface AuthProps {
 }
 
 const AuthDesktop = ({ isAuth, userName }: AuthProps) => {
+  const { setModal } = useModal();
+
+  const handleOnLoginBtnClick = () => {
+    setModal(<LoginModal />);
+  };
+
   return (
     <div className="flex gap-4 py-2 pr-6 text-black col-span-2 justify-end text-s">
       {isAuth ? (
@@ -22,7 +30,7 @@ const AuthDesktop = ({ isAuth, userName }: AuthProps) => {
           </div>
         </>
       ) : (
-        <Button buttonType="cta" text="Login" />
+        <Button buttonType="cta" text="Login" onClick={handleOnLoginBtnClick} />
       )}
     </div>
   );

src/components/icons/ChevronDownIcon.tsx

@@ -1,13 +1,19 @@
 interface ChevronDownIconProps {
   className?: string;
+  width?: string;
+  height?: string;
 }
 
-const ChevronDownIcon = ({ className }: ChevronDownIconProps) => {
+const ChevronDownIcon = ({
+  className,
+  width = "24",
+  height = "24",
+}: ChevronDownIconProps) => {
   return (
     <svg
       className={`${!className ? "" : className}`}
-      width="24"
-      height="24"
+      width={width}
+      height={height}
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

src/components/modals/LoginModal.tsx

@@ -0,0 +1,39 @@
+import useModal from "../../store/useModal";
+import Button from "../Button";
+import MasterSelector from "../MasterSelector";
+import CrossIcon from "../icons/CrossIcon";
+
+const LoginModal = () => {
+  const { setModal } = useModal();
+  const handleOnCloseClick = () => {
+    setModal(null);
+  };
+
+  return (
+    <div className="absolute z-50 top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-11  items-center">
+      <div className="bg-[#F3F3F2] rounded-lg col-span-3 col-start-5 py-[37px] px-8">
+        <div className="w-full flex justify-between items-center border-b pb-6">
+          <h2 className="text-[#0D1922] text-subheadline-m font-semibold">
+            Login
+          </h2>
+          <button onClick={handleOnCloseClick}>
+            <CrossIcon />
+          </button>
+        </div>
+        <div className="flex flex-col pt-6">
+          <MasterSelector title="Contact number" />
+
+          <Button text="Login" buttonType="cta" className="justify-center" />
+          <div className="font-semibold text-caption-m flex justify-center items-center text-[#0D192266] gap-1 pt-4">
+            Don`t have an account?{" "}
+            <p className="text-[#00BED7] select-none cursor-pointer">
+              Create one
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginModal;

src/components/modals/MasterplanFilters.tsx

@@ -41,7 +41,11 @@ const MasterplanFilters = () => {
     const updatedSliders = sliders.map((slider) => {
       if (sliderId !== slider.id) return slider;
 
-      return { ...slider, startValue: e[0], endValue: e[1] };
+      return {
+        ...slider,
+        startValue: e[0],
+        endValue: e[1],
+      };
     });
 
     setSliders(updatedSliders);