first deploy with astro

dashboard_js/app/routes/users/index.jsx

@@ -1,17 +1,74 @@
-import { useSuspenseQuery } from '@tanstack/react-query'
+import { memo } from 'react'
+import { Heading } from '~/components/heading'
+import { CpfCnpj } from '~/components/cpf-cnpj'
+import { Table, Tbody, Td, Th, Thead, Tr } from '~/components/table'
+import { Abbr } from '~/components/abbr'
+import { Datetime } from '~/components/datetime'
+import axios from '~/axios'
 
 export function meta({}) {
   return [{ title: 'Usuários' }]
 }
 
-export default function Component() {
-  const info = useSuspenseQuery({
-    queryKey: ['users'],
-    queryFn: async () => {
-      await new Promise((r) => setTimeout(r, 3000))
-      return { data: 'todos' }
-    },
-  })
-
-  return <>users index</>
+export async function clientLoader() {
+  await new Promise((r) => setTimeout(r, 2000))
+  const index = 'users'
+  const { data } = await axios.get('/search/', { params: { index } })
+  return data
 }
+
+export default function Component({ loaderData: { hits = [] } }) {
+  return (
+    <>
+      <Heading>Usuários</Heading>
+
+      <Table>
+        <Thead>
+          <Tr>
+            <Th>&nbsp;</Th>
+            <Th>Nome</Th>
+            <Th>CPF/CNPJ</Th>
+            <Th>Email</Th>
+            <Th>Último acesso</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {hits.map((props) => (
+            <Row key={props.id} {...props} />
+          ))}
+
+          {hits.length === 0 && (
+            <Tr className="no-hover">
+              <Td colSpan={5}>Nada encontrado</Td>
+            </Tr>
+          )}
+        </Tbody>
+      </Table>
+    </>
+  )
+}
+
+const Row = memo(function Row({
+  id,
+  name,
+  cpf,
+  cnpj,
+  email,
+  lastLogin: last_login,
+}) {
+  return (
+    <Tr className="cursor-pointer" data-hover={!cnpj}>
+      <Td>
+        <Abbr maxLen={6}>{id}</Abbr>
+      </Td>
+      <Td>
+        <Abbr>{name}</Abbr>
+      </Td>
+      <CpfCnpj as={Td}>{cpf ?? cnpj}</CpfCnpj>
+      <Td>
+        <Abbr>{email}</Abbr>
+      </Td>
+      <Datetime as={Td}>{last_login}</Datetime>
+    </Tr>
+  )
+})