Fix : Trying to deploy to vercel instead

.github/workflows/deployAction.yml

@@ -0,0 +1,25 @@
+name: Deployement to Vercel
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+
+jobs:
+    Deploy-Production:
+          runs-on: ubuntu-latest
+          steps:
+            - uses: actions/checkout@v2
+            - name: Install Vercel CLI
+              run: npm install --global vercel@latest
+            - name: Pull Vercel Environment Information
+              run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+            - name: Build Project Artifacts
+              run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+            - name: Deploy Project Artifacts to Vercel
+              run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
+

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vercel

src/components/Elements/PopUp/PopUp.tsx

@@ -1,104 +1,135 @@
-import { Fragment,  useState } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
-import { ExclamationTriangleIcon, InformationCircleIcon, CheckCircleIcon } from '@heroicons/react/24/outline'
+import { Fragment, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import {
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+  CheckCircleIcon,
+} from "@heroicons/react/24/outline";
 import Button from "../Button";
 
-interface Props{
-    textAlert?: string;
-    buttonCancelText: string;
-    buttonProceedText?: string;
-    type: "warning" | "success" | "info" |"danger";
-    title: string;
-    onClickProceed?:any;
+interface Props {
+  textAlert?: string;
+  buttonCancelText: string;
+  buttonProceedText?: string;
+  type: "warning" | "success" | "info" | "danger";
+  title: string;
+  onClickProceed?: () => void;
 }
-const PopUp = ({textAlert, type, title, onClickProceed, buttonCancelText, buttonProceedText}: Props) => {
-    const [open, setOpen] = useState(true)
+const PopUp = ({
+  textAlert,
+  type,
+  title,
+  onClickProceed,
+  buttonCancelText,
+  buttonProceedText,
+}: Props) => {
+  const [open, setOpen] = useState(true);
 
-    let iconComponent;
-    let iconColor;
-    switch (type) {
-        case "warning":
-            iconComponent = <ExclamationTriangleIcon className="h-6 w-6" aria-hidden="true" />;
-            iconColor = "text-warning";
-            break;
-        case "danger":
-            iconComponent = <ExclamationTriangleIcon className="h-6 w-6" aria-hidden="true" />;
-            iconColor = "text-danger";
-            break;
-        case "success":
-            iconComponent = <CheckCircleIcon className="h-6 w-6" aria-hidden="true" />;
-            iconColor = "text-green";
-            break;
-        case "info":
-            iconComponent = <InformationCircleIcon className="h-6 w-6" aria-hidden="true" />;
-            iconColor = "text-primaryColor";
-            break;
-        default:
-            iconComponent = null;
-            iconColor = "text-primaryColor";
-    }
+  let iconComponent;
+  let iconColor;
+  switch (type) {
+    case "warning":
+      iconComponent = (
+        <ExclamationTriangleIcon className="h-6 w-6" aria-hidden="true" />
+      );
+      iconColor = "text-warning";
+      break;
+    case "danger":
+      iconComponent = (
+        <ExclamationTriangleIcon className="h-6 w-6" aria-hidden="true" />
+      );
+      iconColor = "text-danger";
+      break;
+    case "success":
+      iconComponent = (
+        <CheckCircleIcon className="h-6 w-6" aria-hidden="true" />
+      );
+      iconColor = "text-green";
+      break;
+    case "info":
+      iconComponent = (
+        <InformationCircleIcon className="h-6 w-6" aria-hidden="true" />
+      );
+      iconColor = "text-primaryColor";
+      break;
+    default:
+      iconComponent = null;
+      iconColor = "text-primaryColor";
+  }
 
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog as="div" className="relative z-10" onClose={setOpen}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-stroke bg-opacity-50 transition-opacity" />
+        </Transition.Child>
 
-    return (
-        <Transition.Root show={open} as={Fragment}>
-            <Dialog as="div" className="relative z-10"  onClose={setOpen}>
-                <Transition.Child
-                    as={Fragment}
-                    enter="ease-out duration-300"
-                    enterFrom="opacity-0"
-                    enterTo="opacity-100"
-                    leave="ease-in duration-200"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                >
-                    <div className="fixed inset-0 bg-stroke bg-opacity-50 transition-opacity" />
-                </Transition.Child>
-
-                <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
-                    <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-                        <Transition.Child
-                            as={Fragment}
-                            enter="ease-out duration-300"
-                            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                            enterTo="opacity-100 translate-y-0 sm:scale-100"
-                            leave="ease-in duration-200"
-                            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                        >
-                            <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
-                                <div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-                                    <div className="sm:flex sm:items-start">
-                                            <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                                                {/* Render the icon with its color based on type */}
-                                                {iconComponent &&  <div className={iconColor}>{iconComponent}</div>}
-                                            </div>
-
-                                        <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                                            <Dialog.Title as="h3" className="text-base font-semibold leading-6 text-gray-900">
-                                                {title}
-                                            </Dialog.Title>
-                                            <div className="mt-2">
-                                                <p className="text-sm text-gray-500">
-                                                    {textAlert}
-                                                </p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
-                                    { (buttonProceedText) && onClickProceed &&
-                                    <Button text={buttonProceedText} styleType={type}  onClick={() => onClickProceed}/>}
+        <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                      {/* Render the icon with its color based on type */}
+                      {iconComponent && (
+                        <div className={iconColor}>{iconComponent}</div>
+                      )}
+                    </div>
 
-                                    <Button text={buttonCancelText} styleType={"neutral"} className={"mr-3"} onClick={() => setOpen(false)}/>
-                                </div>
-                            </Dialog.Panel>
-                        </Transition.Child>
+                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-base font-semibold leading-6 text-gray-900"
+                      >
+                        {title}
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-gray-500">{textAlert}</p>
+                      </div>
                     </div>
+                  </div>
                 </div>
-            </Dialog>
-        </Transition.Root>
-    )
-}
+                <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+                  {buttonProceedText && onClickProceed && (
+                    <Button
+                      text={buttonProceedText}
+                      styleType={type}
+                      onClick={() => onClickProceed()} // Corrected onClick event
+                    />
+                  )}
+
+                  <Button
+                    text={buttonCancelText}
+                    styleType={"neutral"}
+                    className={"mr-3"}
+                    onClick={() => setOpen(false)}
+                  />
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
 /*
 usage of popup:
 

src/features/clockSettings/data/timezones.ts

@@ -0,0 +1,110 @@
+export const utcTimezones = [
+    {
+      id: 12,
+      name: "(UTC-12) International Date Line West",
+    },
+    {
+      id: 11,
+      name: "(UTC-11) Coordinated Universal Time-11",
+    },
+    {
+      id: 10,
+      name: "(UTC-10) Hawaii",
+    },
+    {
+      id: 9,
+      name: "(UTC-9) Alaska",
+    },
+    {
+      id: 8,
+      name: "(UTC-8) Pacific Time (US & Canada)",
+    },
+    {
+      id: 7,
+      name: "(UTC-7) Mountain Time (US & Canada)",
+    },
+    {
+      id: 6,
+      name: "(UTC-6) Central Time (US & Canada)",
+    },
+    {
+      id: 5,
+      name: "(UTC-5) Eastern Time (US & Canada)",
+    },
+    {
+      id: 4,
+      name: "(UTC-4) Atlantic Time (Canada)",
+    },
+    {
+      id: 3,
+      name: "(UTC-3) Buenos Aires",
+    },
+    {
+      id: 2,
+      name: "(UTC-2) Coordinated Universal Time-02",
+    },
+    {
+      id: 1,
+      name: "(UTC-1) Azores",
+    },
+    {
+      id: 0,
+      name: "(UTC) Coordinated Universal Time",
+    },
+    {
+      id: -1,
+      name: "(UTC+1) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna",
+    },
+    {
+      id: -2,
+      name: "(UTC+2) Athens, Bucharest, Istanbul",
+    },
+    {
+      id: -3,
+      name: "(UTC+3) Moscow, St. Petersburg, Volgograd",
+    },
+    {
+      id: -4,
+      name: "(UTC+4) Abu Dhabi, Muscat",
+    },
+    {
+      id: -5,
+      name: "(UTC+5) Islamabad, Karachi",
+    },
+    {
+      id: -6,
+      name: "(UTC+6) Dhaka",
+    },
+    {
+      id: -7,
+      name: "(UTC+7) Bangkok, Hanoi, Jakarta",
+    },
+    {
+      id: -8,
+      name: "(UTC+8) Beijing, Chongqing, Hong Kong, Urumqi",
+    },
+    {
+      id: -9,
+      name: "(UTC+9) Osaka, Sapporo, Tokyo",
+    },
+    {
+      id: -10,
+      name: "(UTC+10) Brisbane",
+    },
+    {
+      id: -11,
+      name: "(UTC+11) Solomon Is., New Caledonia",
+    },
+    {
+      id: -12,
+      name: "(UTC+12) Fiji",
+    },
+    {
+      id: -13,
+      name: "(UTC+13) Nuku'alofa",
+    },
+    {
+      id: -14,
+      name: "(UTC+14) Kiritimati Island",
+    },
+  ];