share route itens

apps/studio.saladeaula.digital/app/routes/edit.tsx

@@ -8,8 +8,7 @@ import { Await, useAsyncValue, useFetcher } from 'react-router'
 import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { HttpMethod, request as req } from '@/lib/request'
-
+import { request as req, HttpMethod } from '@repo/util/request'
 import { Skeleton } from '@repo/ui/components/skeleton'
 import {
   Breadcrumb,
@@ -134,27 +133,27 @@ export async function action({ params, request, context }: Route.ActionArgs) {
 
 export default function Component({ loaderData: { data } }) {
   return (
-    <div className="space-y-4">
-      <Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <BreadcrumbLink href="/">Cursos</BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            <BreadcrumbPage>Editar curso</BreadcrumbPage>
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>
+    <Suspense fallback={<Skeleton />}>
+      <div className="space-y-4">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">Cursos</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Editar curso</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
 
-      <Suspense fallback={<Skeleton />}>
         <div className="lg:max-w-2xl mx-auto">
           <Await resolve={data}>
             <Editing />
           </Await>
         </div>
-      </Suspense>
-    </div>
+      </div>
+    </Suspense>
   )
 }
 

apps/studio.saladeaula.digital/app/routes/index.tsx

@@ -5,10 +5,7 @@ import { AwardIcon, BanIcon, FileBadgeIcon, LaptopIcon } from 'lucide-react'
 import { Suspense, useMemo } from 'react'
 import { Await, NavLink, useSearchParams } from 'react-router'
 
-import placeholder from '@/assets/placeholder.webp'
-
-import { createSearch } from '@/lib/meili'
-
+import { createSearch } from '@repo/util/meili'
 import { SearchForm } from '@repo/ui/components/search-form'
 import { Skeleton } from '@repo/ui/components/skeleton'
 import {
@@ -31,19 +28,24 @@ import {
   TooltipContent,
   TooltipTrigger
 } from '@repo/ui/components/ui/tooltip'
+
 import type { Course } from './edit'
+import placeholder from '@/assets/placeholder.webp'
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Gerenciar seus cursos' }]
 }
 
 export const loader = async ({ context }: Route.ActionArgs) => {
+  const courses = createSearch({
+    index: 'saladeaula_courses',
+    sort: ['created_at:desc'],
+    hitsPerPage: 100,
+    env: context.cloudflare.env
+  })
+
   return {
-    data: createSearch({
-      index: 'saladeaula_courses',
-      sort: ['created_at:desc'],
-      env: context.cloudflare.env
-    })
+    data: courses
   }
 }
 
@@ -52,20 +54,20 @@ export default function Component({ loaderData: { data } }) {
   const term = searchParams.get('term') as string
 
   return (
-    <div className="space-y-4">
-      <div className="space-y-0.5 mb-8">
-        <h1 className="text-2xl font-bold tracking-tight">Cursos</h1>
-        <p className="text-muted-foreground">
-          Gerencie seus cursos com facilidade e organize seu conteúdo.
-        </p>
-      </div>
+    <Suspense fallback={<Skeleton />}>
+      <div className="space-y-4">
+        <div className="space-y-0.5 mb-8">
+          <h1 className="text-2xl font-bold tracking-tight">Cursos</h1>
+          <p className="text-muted-foreground">
+            Gerencie seus cursos com facilidade e organize seu conteúdo.
+          </p>
+        </div>
 
-      <Suspense fallback={<Skeleton />}>
-        <div className="w-full xl:w-92">
+        <div className="w-full xl:w-1/3">
           <SearchForm
             placeholder={
               <>
-                Pressione <Kbd>/</Kbd> para filtrar...
+                Digite <Kbd>/</Kbd> para pesquisar
               </>
             }
             defaultValue={term}
@@ -75,15 +77,11 @@ export default function Component({ loaderData: { data } }) {
           />
         </div>
 
-        <div className="grid lg:grid-cols-4 gap-5">
-          <Await resolve={data}>
-            {({ hits = [] }) => {
-              return <List term={term} hits={hits} />
-            }}
-          </Await>
-        </div>
-      </Suspense>
-    </div>
+        <Await resolve={data}>
+          {({ hits = [] }) => <List term={term} hits={hits} />}
+        </Await>
+      </div>
+    </Suspense>
   )
 }
 
@@ -106,7 +104,7 @@ function List({ term, hits = [] }: { term: string; hits: Course[] }) {
 
   if (hits_.length === 0) {
     return (
-      <Empty>
+      <Empty className="border border-dashed">
         <EmptyHeader>
           <EmptyMedia variant="icon">
             <BanIcon />
@@ -120,9 +118,13 @@ function List({ term, hits = [] }: { term: string; hits: Course[] }) {
     )
   }
 
-  return hits_.map((props: Course, idx) => {
-    return <Course key={idx} {...props} />
-  })
+  return (
+    <div className="grid lg:grid-cols-4 gap-5">
+      {hits_.map((props: Course, idx) => {
+        return <Course key={idx} {...props} />
+      })}
+    </div>
+  )
 }
 
 function Course({ id, name, access_period, cert, draft }: Course) {

apps/studio.saladeaula.digital/app/routes/layout.tsx

@@ -23,7 +23,7 @@ export default function Component({ loaderData }: Route.ComponentProps) {
         className="bg-background/15 backdrop-blur-sm
                    px-4 py-2 lg:py-4 sticky top-0 z-5"
       >
-        <div className="container mx-auto flex items-center">
+        <div className="container mx-auto flex items-center max-w-7xl">
           <Link to="/">
             <ThemedImage className="flex gap-1">
               <span className="text-muted-foreground text-xs">Estúdio</span>
@@ -38,7 +38,7 @@ export default function Component({ loaderData }: Route.ComponentProps) {
       </header>
 
       <main className="p-4">
-        <div className="container mx-auto">
+        <div className="container mx-auto max-w-7xl">
           <Outlet />
         </div>
       </main>