feat: complete day 20 react task

2025-07-23 23:25:19 +01:00
parent 743187b216
commit b0d86465f2
259 changed files with 42427 additions and 11 deletions
@@ -0,0 +1,118 @@
+
+  import React, { useId, useState } from "react";
+  import { StringCaser } from "Utils/utils";
+  
+  let timeout = null;
+  
+  const MkdDebounceInput = ({
+    type = "text",
+    label,
+    className,
+    placeholder = "Search",
+    options = [],
+    disabled = false,
+    setValue,
+    value,
+    onReady,
+    timer = 1000,
+    showIcon = true,
+  }) => {
+    const inputId = useId();
+    const [inputValue, setInputValue] = useState("");
+  
+    function handleInput(e) {
+      const inputName = e.target.value;
+      setValue(inputName);
+      setInputValue(inputName);
+  
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+  
+      timeout = setTimeout(() => {
+        // Make the API call here using the `name` state variable
+        if (inputName.length) {
+          onReady(inputName);
+        }
+      }, timer); // 500 milliseconds = half a second
+    }
+  
+    return (
+      <>
+        <form>
+          <label
+            className="mb-2 block cursor-pointer text-sm font-bold text-gray-700"
+            htmlFor={inputId}
+          >
+            {StringCaser(label, { casetype: "capitalize", separator: "space" })}
+          </label>
+          {type === "dropdown" || type === "select" ? (
+            <select
+              type={type}
+              id={inputId}
+              disabled={disabled}
+              placeholder={placeholder}
+              onChange={(e) => handleInput(e)}
+              value={value || inputValue}
+              className={`focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none ${className}`}
+            >
+              <option></option>
+              {options.map((option, key) => (
+                <option value={option} key={key + 1}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          ) : (
+            <div className="relative">
+              {showIcon && (
+                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                  <svg
+                    className="h-4 w-4 text-gray-500 dark:text-gray-400"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
+                    />
+                  </svg>
+                </div>
+              )}
+              <input
+                type={type}
+                id={inputId}
+                disabled={disabled}
+                placeholder={placeholder}
+                onChange={(e) => handleInput(e)}
+                value={value || inputValue}
+                className={`block w-full rounded-lg border border-blue-600  bg-white p-4 pl-10 text-sm text-black placeholder-black focus:border-blue-500 focus:ring-blue-500 dark:text-gray-400 dark:placeholder-gray-400 ${className}`}
+              />
+            </div>
+            // <input
+            //   type={type}
+            //   id={inputId}
+            //   disabled={disabled}
+            //   placeholder={placeholder}
+            //   onChange={(e)=> handleInput(e)}
+            //   value={value||inputValue}
+            //   className={`focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none ${className}`}
+            // />
+          )}
+          {/* <p className="text-field-error italic text-red-500">
+            {errors[name]?.message}
+          </p> */}
+        </form>
+      </>
+    );
+  };
+  
+  // <input type="search" id="search" className="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" required />
+  
+  export default MkdDebounceInput;
+  
@@ -0,0 +1,5 @@
+
+                  import { lazy } from 'react'
+                  
+                  export const MkdDebounceInput = lazy(()=> import("./MkdDebounceInput"))
+