share route itens

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) {