base editor

apps/frontend/src/components/input.tsx

@@ -0,0 +1,31 @@
+type InputType = {
+  label: string;
+  forLabel: string;
+  type: "password" | "email" | "text";
+  dark?: boolean;
+  onChange?: (v: string) => void;
+};
+
+export default function Input({
+  label,
+  forLabel,
+  type,
+  dark = true,
+  onChange,
+}: InputType) {
+  return (
+    <div className="space-y-1">
+      <label htmlFor={forLabel} className="text-sm block">
+        {label}
+      </label>
+      <input
+        id={forLabel}
+        onChange={onChange ? (e) => onChange(e.target.value) : undefined}
+        type={type}
+        required
+        name={forLabel}
+        className={`${dark ? "bg-black text-white" : "bg-white text-black"} rounded-lg border-white block`}
+      />
+    </div>
+  );
+}

apps/frontend/src/components/layout.tsx

@@ -1,11 +1,26 @@
 import type { ReactNode } from "react";
 import Header from "./header";
+import { useAuth } from "../providers/AuthProvider";
+import { useNavigate } from "react-router-dom";
 
-export default function Layout({ children }: { children: ReactNode }) {
-  return (
-    <div className="bg-black text-white min-h-screen w-full max-w-[42rem] 2xl:max-w-[48rem] mx-auto select-none px-5">
-      <Header />
-      <div className="relative">{children}</div>
-    </div>
-  );
+export default function Layout({
+  children,
+  isProtected = false,
+}: {
+  children: ReactNode;
+  isProtected?: boolean;
+}) {
+  const auth = useAuth();
+  const navigate = useNavigate();
+
+  if (isProtected && !auth.user) {
+    navigate("/");
+  } else {
+    return (
+      <div className="bg-black text-white min-h-screen w-full max-w-[42rem] 2xl:max-w-[48rem] mx-auto select-none px-5">
+        <Header />
+        <div className="relative">{children}</div>
+      </div>
+    );
+  }
 }