UI example app: Pico CSS

apps/react-app-router-fm/app/app-nav.tsx

@@ -1,16 +1,47 @@
-import { NavLink } from "react-router"
+import { NavLink, useNavigate } from "react-router"
 import { authClient } from "./lib/auth-client.js"
 
 export function AppNav() {
+  const navigate = useNavigate()
   return (
-    <nav>
-      <NavLink end to="/">
-        Home
-      </NavLink>
-      <NavLink end to="/about">
-        About
-      </NavLink>
-      <button onClick={() => authClient.signOut()}>Sign Out</button>
+    <nav
+      className="container-fluid"
+      style={{ position: "sticky", top: 0, zIndex: 10, backdropFilter: "saturate(180%) blur(6px)" }}
+    >
+      <ul>
+        <li>
+          <NavLink end to="/" style={{ fontWeight: 600 }}>
+            Effectify
+          </NavLink>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <NavLink end to="/">
+            Home
+          </NavLink>
+        </li>
+        <li>
+          <NavLink end to="/todo-app">
+            Todo App
+          </NavLink>
+        </li>
+        <li>
+          <button
+            type="button"
+            onClick={async () => {
+              try {
+                await authClient.signOut()
+                navigate("/login")
+              } catch {
+                navigate("/login")
+              }
+            }}
+          >
+            Sign Out
+          </button>
+        </li>
+      </ul>
     </nav>
   )
 }

apps/react-app-router-fm/app/lib/better-auth-options.server.ts

@@ -4,8 +4,9 @@
 import { betterAuth } from "better-auth"
 import { openAPI } from "better-auth/plugins"
 import type { BetterAuthOptions } from "better-auth/types"
-// import Database from 'better-sqlite3'
-import { pool } from "./prisma.js"
+import { Pool } from "pg"
+
+const pool = new Pool({ connectionString: `${process.env.DATABASE_URL}` })
 
 // const __filename = fileURLToPath(import.meta.url)
 // const __dirname = dirname(__filename)
@@ -16,7 +17,6 @@ export const authOptions = {
   emailAndPassword: {
     enabled: true,
   },
-  // database: new Database(join(__dirname, '../sqlite.db')),
   database: pool,
 
   advanced: {

apps/react-app-router-fm/app/root.tsx

@@ -15,6 +15,10 @@ export const links: LinksFunction = () => [
     href: "https://fonts.gstatic.com",
     crossOrigin: "anonymous",
   },
+  {
+    rel: "stylesheet",
+    href: "https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css",
+  },
   {
     rel: "stylesheet",
     href:

apps/react-app-router-fm/app/routes.tsx

@@ -4,7 +4,7 @@ export default [
   index("./app.tsx"),
   route("api/*", "./routes/api.ts"),
   route("api/auth/*", "./routes/api.auth.ts"),
-  route("about", "./routes/about.tsx"),
+  route("todo-app", "./routes/todo-app.tsx"),
   route("login", "./routes/login.tsx"),
   route("signup", "./routes/signup.tsx"),
 ] satisfies RouteConfig

apps/react-app-router-fm/app/routes/login.tsx

@@ -30,66 +30,43 @@ export default function Login() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-4">
-      <div className="w-full max-w-md space-y-8 rounded-lg bg-white p-6 shadow-md">
-        <div>
-          <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
-            Sign in to your account
-          </h2>
-        </div>
-        <form className="mt-8 space-y-6" onSubmit={handleLogin}>
-          <div className="-space-y-px rounded-md shadow-sm">
-            <div>
-              <label htmlFor="email-address" className="sr-only">
-                Email address
-              </label>
-              <input
-                id="email-address"
-                name="email"
-                type="email"
-                autoComplete="email"
-                required
-                className="relative block w-full rounded-t-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 px-3"
-                placeholder="Email address"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-              />
-            </div>
-            <div>
-              <label htmlFor="password" className="sr-only">
-                Password
-              </label>
-              <input
-                id="password"
-                name="password"
-                type="password"
-                autoComplete="current-password"
-                required
-                className="relative block w-full rounded-b-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 px-3"
-                placeholder="Password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-            </div>
+    <main className="container">
+      <article>
+        <h2>Sign in to your account</h2>
+        <form onSubmit={handleLogin}>
+          <div>
+            <label htmlFor="email-address">Email address</label>
+            <input
+              id="email-address"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              placeholder="Email address"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
           </div>
-
-          {error && <div className="text-red-500 text-sm text-center">{error}</div>}
-
           <div>
-            <button
-              type="submit"
-              className="group relative flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-            >
-              Sign in
-            </button>
+            <label htmlFor="password">Password</label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              required
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
           </div>
+          {error && <small style={{ color: "var(--pico-color-red-500)" }}>{error}</small>}
+          <button type="submit">Sign in</button>
         </form>
-        <div className="text-center text-sm">
-          <a href="/signup" className="font-medium text-indigo-600 hover:text-indigo-500">
-            Don't have an account? Sign up
-          </a>
-        </div>
-      </div>
-    </div>
+        <p>
+          Don't have an account? <a href="/signup">Sign up</a>
+        </p>
+      </article>
+    </main>
   )
 }