add auth

dashboard_js/app/layouts/app.tsx

@@ -1,20 +1,47 @@
-import { useNavigation } from 'react-router'
+import { useNavigation, redirect, useNavigate } from 'react-router'
+import { fetchAuthSession } from 'aws-amplify/auth'
 import { Link } from 'react-router'
 import { Outlet } from 'react-router'
+import { useAuth } from '~/hooks/use-auth'
+
+export async function clientLoader() {
+  const session = await fetchAuthSession()
+
+  if (!session?.tokens?.idToken) {
+    throw redirect('/auth')
+  }
+}
 
 export default function Layout() {
   const navigation = useNavigation()
+  const navigate = useNavigate()
+  const { signOut } = useAuth()
   const isNavigating = Boolean(navigation.location)
 
   return (
     <>
-      <ul>
-        <li>
-          <Link to="/orders">Pagamentos</Link>
-          <Link to="/users">Usuários</Link>
-          <Link to="/enrollments">Matrículas</Link>
-        </li>
-      </ul>
+      <nav>
+        <ul className="flex gap-1">
+          <li>
+            <Link to="/orders">Pagamentos</Link>
+          </li>
+          <li>
+            <Link to="/users">Usuários</Link>
+          </li>
+          <li>
+            <Link to="/enrollments">Matrículas</Link>
+          </li>
+        </ul>
+
+        <button
+          onClick={() => {
+            signOut()
+            navigate('/auth')
+          }}
+        >
+          Sair
+        </button>
+      </nav>
 
       {isNavigating ? <>Loading...</> : <Outlet />}
     </>

dashboard_js/app/layouts/auth.tsx

@@ -49,3 +49,17 @@ export default function Auth() {
     </>
   )
 }
+
+export function Card({ children }: { children: React.ReactNode }) {
+  return (
+    <Container>
+      <div className="space-y-2.5 xl:space-y-5  rounded-xl bg-yellow-50 dark:bg-gray-700/60 p-4 lg:p-8 drop-shadow-sm shadow-sm">
+        {children}
+      </div>
+    </Container>
+  )
+}
+
+export function Container({ children }: { children: React.ReactNode }) {
+  return <div className="w-full 2xl:w-[26rem]">{children}</div>
+}