add user

apps/admin.saladeaula.digital/app/routes/_.$orgid.users.$id.emails/route.tsx

@@ -1,10 +1,27 @@
 import type { Route } from './+types'
 
 import { Suspense } from 'react'
-import { Await } from 'react-router'
+import { Await, useOutletContext } from 'react-router'
 
 import { request as req } from '@/lib/request'
+
 import { Skeleton } from '@repo/ui/components/skeleton'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@repo/ui/components/ui/card'
+import { Item, ItemContent, ItemGroup } from '@repo/ui/components/ui/item'
+import { Kbd } from '@repo/ui/components/ui/kbd'
+import {
+  NativeSelect,
+  NativeSelectOption
+} from '@repo/ui/components/ui/native-select'
+
+import { Button } from '@repo/ui/components/ui/button'
+import type { User } from '../_.$orgid.users.$id/route'
 
 export async function loader({ params, request, context }: Route.LoaderArgs) {
   const { id } = params
@@ -18,16 +35,58 @@ export async function loader({ params, request, context }: Route.LoaderArgs) {
 }
 
 export default function Route({ loaderData: { data } }) {
+  const { user } = useOutletContext() as { user: User }
+
   return (
     <Suspense fallback={<Skeleton />}>
       <Await resolve={data}>
         {({ items = [] }) => (
-          <ul>
-            {items.map(({ sk }: { sk: string }, idx: number) => {
-              const [, email] = sk.split('#')
-              return <li key={idx}>{email}</li>
-            })}
-          </ul>
+          <div className="space-y-4">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg">Emails</CardTitle>
+                <CardDescription>
+                  Podem ser associados vários emails a uma conta. É possível
+                  usar qualquer email para recuperar a senha, mas apenas o email
+                  principal receberá as mensagens.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <ul>
+                  {items.map(({ sk }: { sk: string }, idx: number) => {
+                    const [, email] = sk.split('#')
+                    return <li key={idx}>{email}</li>
+                  })}
+                </ul>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg">Email principal</CardTitle>
+                <CardDescription>
+                  <Kbd className="font-mono border">{user.email}</Kbd> será
+                  usado para mensagens e pode ser usado para redefinições de
+                  senha.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <form className="flex gap-1.5">
+                  <NativeSelect value={user.email}>
+                    {items.map(({ sk }: { sk: string }, idx: number) => {
+                      const [, email] = sk.split('#')
+                      return (
+                        <NativeSelectOption key={idx} value={email}>
+                          {email}
+                        </NativeSelectOption>
+                      )
+                    })}
+                  </NativeSelect>
+                  <Button>Mudar</Button>
+                </form>
+              </CardContent>
+            </Card>
+          </div>
         )}
       </Await>
     </Suspense>