api manager works, persist login works

src/components/ui/Input.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { twMerge } from "tailwind-merge";
+import { IconDefinition } from "@fortawesome/pro-thin-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const kebabCase = (str: string) =>
+  str
+    .replace(/([a-z])([A-Z])/g, "$1-$2")
+    .replace(/[\s_]+/g, "-")
+    .toLowerCase();
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  inputClassName?: string;
+  iconClassName?: string;
+  label?: string;
+  icon?: IconDefinition;
+  isError?: boolean;
+  errorMessage?: string;
+}
+
+export const Input = React.forwardRef(
+  (
+    {
+      label,
+      icon,
+      inputClassName,
+      iconClassName,
+      className,
+      id,
+      isError,
+      onBlur,
+      onFocus,
+      errorMessage,
+      ...rest
+    }: InputProps,
+    ref: React.ForwardedRef<HTMLInputElement>,
+  ) => {
+    return (
+      <div className={twMerge("flex flex-col", className)}>
+        {label && <label htmlFor={id ? id : kebabCase(label)}>{label}</label>}
+
+        <div className="relative w-full">
+          {icon && (
+            <FontAwesomeIcon
+              icon={icon}
+              className={twMerge("text-md absolute pl-3 pt-3", iconClassName)}
+            />
+          )}
+          <input
+            ref={ref}
+            id={id ? id : label ? kebabCase(label) : undefined}
+            className={twMerge(
+              "bg-brand-secondary h-10 w-full rounded-lg px-3 py-2.5 text-white outline-none",
+              "focus:outline-brand-primary outline-offset-0 transition-all duration-150 ease-in-out",
+              icon && "pl-10",
+              isError && "outline-red focus:outline-red",
+              inputClassName,
+            )}
+            onFocus={(e: React.FocusEvent<HTMLInputElement>) => {
+              if (onFocus) {
+                onFocus(e);
+              }
+            }}
+            onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
+              if (onBlur) {
+                onBlur(e);
+              }
+            }}
+            {...rest}
+          />
+          {errorMessage && (
+            <h6 className="text-red absolute z-10">{errorMessage}</h6>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+Input.displayName = "Input";

src/components/ui/Spinne.tsx

@@ -1,5 +1,5 @@
-import { faSpinnerThird } from "@fortawesome/pro-thin-svg-icons";
 import { twMerge } from "tailwind-merge";
+import { faSpinnerThird } from "@fortawesome/pro-thin-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export const Spinner = ({ className }: { className?: string }) => {

src/components/ui/index.ts

@@ -1 +1,2 @@
-export * from "./spinner";
+export * from "./Spinne";
+export * from "./Input";