Initial commit for new panel

src/components/Auth/GoogleSigninButton.tsx

@@ -0,0 +1,10 @@
+import { GoogleIcon } from "@/assets/icons";
+
+export default function GoogleSigninButton({ text }: { text: string }) {
+  return (
+    <button className="flex w-full items-center justify-center gap-3.5 rounded-lg border border-stroke bg-gray-2 p-[15px] font-medium hover:bg-opacity-50 dark:border-dark-3 dark:bg-dark-2 dark:hover:bg-opacity-50">
+      <GoogleIcon />
+      {text} with Google
+    </button>
+  );
+}

src/components/Auth/Signin/index.tsx

@@ -0,0 +1,13 @@
+import Link from "next/link";
+import GoogleSigninButton from "../GoogleSigninButton";
+import SigninWithPassword from "../SigninWithPassword";
+
+export default function Signin() {
+  return (
+    <>
+      <div>
+        <SigninWithPassword />
+      </div>
+    </>
+  );
+}

src/components/Auth/SigninWithPassword.tsx

@@ -0,0 +1,63 @@
+"use client";
+import { PasswordIcon, UserIcon } from "@/assets/icons";
+
+import InputGroup from "../FormElements/InputGroup";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import { ILoginCredentials } from "@/lib/api";
+import { useLoginQuery } from "@/hooks/queries";
+
+export default function SigninWithPassword() {
+  const { handleSubmit, control, reset } = useForm<ILoginCredentials>();
+  const { mutate, isPending } = useLoginQuery();
+  const onSubmit: SubmitHandler<ILoginCredentials> = (data) => {
+    mutate(data);
+    reset();
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        name="username"
+        control={control}
+        render={({ field: username }) => (
+          <InputGroup
+            type="username"
+            handleChange={(value) => username.onChange(value)}
+            label="Username"
+            className="mb-4 [&_input]:py-[15px]"
+            placeholder="Enter your Username"
+            name="username"
+            icon={<UserIcon />}
+          />
+        )}
+      />
+      <Controller
+        name="password"
+        control={control}
+        render={({ field: password }) => (
+          <InputGroup
+            type="password"
+            handleChange={(value) => password.onChange(value)}
+            label="Password"
+            className="mb-5 [&_input]:py-[15px]"
+            placeholder="Enter your password"
+            name="password"
+            icon={<PasswordIcon />}
+          />
+        )}
+      />
+
+      <div className="mb-4.5">
+        <button
+          type="submit"
+          className="flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-primary p-4 font-medium text-white transition hover:bg-opacity-90"
+        >
+          Sign In
+          {/* {loading && (
+            <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-white border-t-transparent dark:border-primary dark:border-t-transparent" />
+          )} */}
+        </button>
+      </div>
+    </form>
+  );
+}