Authenticator wrapper component

package.json

@@ -23,10 +23,13 @@
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.16",
     "create-amplify": "file:../../../amplify-backend/packages/create-amplify",
     "eslint": "^8.53.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.3.2",
     "vite": "^5.0.0"
   }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}

src/App.tsx

@@ -4,11 +4,10 @@ import {
   Outlet,
   RouterProvider,
 } from "react-router-dom";
-import SignUp from "./SignUp.tsx";
-import SignIn from "./SignIn.tsx";
 import MagicLinkRedirect from "./MagicLinkRedirect.tsx";
 import AuthenticatedApp from "./AuthenticatedApp.tsx";
-import AuthProvider from "./providers/AuthProvider.tsx";
+import AuthProvider from "./components/AuthProvider.tsx";
+import Authenticator from "./components/Authenticator/Authenticator.tsx";
 
 const router = createBrowserRouter([
   {
@@ -22,11 +21,11 @@ const router = createBrowserRouter([
       },
       {
         path: "sign-up",
-        element: <SignUp />,
+        element: <Authenticator selected="SIGN_UP" />,
       },
       {
         path: "sign-in",
-        element: <SignIn />,
+        element: <Authenticator selected="SIGN_IN" />,
       },
       {
         path: "sign-in-redirect",

src/components/Authenticator/Authenticator.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import SignIn from "./SignIn";
+import SignUp from "./SignUp";
+
+function Authenticator({ selected }: { selected: "SIGN_IN" | "SIGN_UP" }) {
+  return (
+    <>
+      <div className="flex gap-1">
+        <div className={`Tab ${selected === "SIGN_IN" ? "selected" : ""}`}>
+          {selected === "SIGN_IN" ? <strong>Sign In</strong> : "Sign In"}
+        </div>
+        <div className={`Tab ${selected === "SIGN_UP" ? "selected" : ""}`}>
+          {selected === "SIGN_IN" ? <strong>Sign In</strong> : "Sign In"}
+        </div>
+      </div>
+      {selected === "SIGN_IN" && <SignIn />}
+      {selected === "SIGN_UP" && <SignUp />}
+    </>
+  );
+}
+
+export default Authenticator;

src/SignIn.tsx → src/components/Authenticator/SignIn.tsx

@@ -1,7 +1,6 @@
 
 import { signIn } from 'aws-amplify/auth';
 import { useRef, useState } from 'react';
-import './App.css'
 
 function SignIn() {
   const emailFieldRef = useRef<HTMLInputElement>(null);

src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{js,jsx,ts,tsx,html}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+