initial commit, login page

src/components/AuthRedirect.tsx

@@ -0,0 +1,29 @@
+import type { FC, ReactNode } from "react";
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { useMeQuery } from "../services/hooks";
+import { Loader } from "./loader";
+
+export const AuthRedirect: FC<{ children: ReactNode }> = ({ children }) => {
+  const router = useRouter();
+  const { data: user, isLoading, isError } = useMeQuery();
+  console.log(user);
+  const isAuthPage = router.pathname === "/login";
+
+  useEffect(() => {
+    console.log("here");
+    if (!isLoading && !user && !isAuthPage) {
+      console.log("here");
+      router.push("/login");
+    }
+  }, [user, isError, isLoading, isAuthPage, router]);
+
+  if (isLoading || (!user && !isAuthPage)) {
+    return (
+      <div className={"h-screen"}>
+        <Loader />
+      </div>
+    );
+  }
+  return <>{children}</>;
+};

src/components/Button.tsx

@@ -0,0 +1,17 @@
+import type { ButtonHTMLAttributes, DetailedHTMLProps, FC } from "react";
+
+type Props = DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
+
+export const Button: FC<Props> = ({ className, ...rest }) => {
+  return (
+    <div>
+      <button
+        className={`rounded-md border border-gray-300 bg-sky-700 px-4 py-2 text-white focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-600 ${className}`}
+        {...rest}
+      />
+    </div>
+  );
+};

src/components/Input.tsx

@@ -0,0 +1,17 @@
+import type { DetailedHTMLProps, FC, InputHTMLAttributes } from "react";
+
+type Props = DetailedHTMLProps<
+  InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+>;
+
+export const Input: FC<Props> = ({ className, ...rest }) => {
+  return (
+    <div>
+      <input
+        className={` w-full rounded-md border border-gray-300 px-4 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-600 ${className}`}
+        {...rest}
+      />
+    </div>
+  );
+};

src/components/loader.tsx

@@ -0,0 +1,7 @@
+export const Loader = () => {
+  return (
+    <div className={"flex h-full w-full items-center justify-center"}>
+      <span className="loader"></span>
+    </div>
+  );
+};