add link to catalog

apps/saladeaula.digital/app/routes.ts

@@ -8,6 +8,7 @@ import {
 export default [
   layout('routes/layout.tsx', [
     index('routes/index.tsx'),
+    route('catalog', 'routes/catalog.tsx'),
     route('certs', 'routes/certs.tsx'),
     route('history', 'routes/history.tsx'),
     route('settings', 'routes/settings/layout.tsx', [

apps/saladeaula.digital/app/routes/catalog.tsx

@@ -0,0 +1,136 @@
+import type { Route } from './+types/catalog'
+
+import { Fragment, Suspense } from 'react'
+import { Await } from 'react-router'
+import { ListFilterIcon, PlusIcon, SearchIcon } from 'lucide-react'
+
+import { cloudflareContext } from '@repo/auth/context'
+import { createSearch } from '@repo/util/meili'
+import { Skeleton } from '@repo/ui/components/skeleton'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput
+} from '@repo/ui/components/ui/input-group'
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle
+} from '@repo/ui/components/ui/item'
+import { Currency } from '@repo/ui/components/currency'
+import { Avatar, AvatarImage } from '@repo/ui/components/ui/avatar'
+
+import { Container } from '@/components/container'
+import placeholder from '@/assets/placeholder.webp'
+import { Button } from '@repo/ui/components/ui/button'
+
+export function meta({}: Route.MetaArgs) {
+  return [{ title: 'Expore nossos cursos' }]
+}
+
+export async function loader({ context, request, params }: Route.LoaderArgs) {
+  const cloudflare = context.get(cloudflareContext)
+  const courses = createSearch({
+    index: 'saladeaula_courses',
+    sort: ['created_at:desc'],
+    filter: 'unlisted NOT EXISTS',
+    hitsPerPage: 100,
+    env: cloudflare.env
+  })
+
+  return {
+    courses
+  }
+}
+
+export default function Component({
+  loaderData: { courses }
+}: Route.ComponentProps) {
+  return (
+    <Container className="space-y-5 max-w-2xl">
+      <Suspense fallback={<Skeleton />}>
+        {/*<Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link to="..">Meus cursos</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Exporar mais cursos</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>*/}
+
+        <div className="space-y-1.5">
+          <h1 className="text-4xl font-semibold tracking-tight sm:text-3xl xl:text-4xl">
+            Expore nossos cursos
+          </h1>
+          <p className="text-muted-foreground text-[1.05rem] text-balance sm:text-base">
+            Conheça todos os cursos que oferecemos, desenvolvidos para
+            fortalecer suas competências profissionais e apoiar seu crescimento
+            contínuo na carreira.
+          </p>
+        </div>
+
+        <InputGroup>
+          <InputGroupInput placeholder="Pesquisar curso" />
+          <InputGroupAddon>
+            <SearchIcon />
+          </InputGroupAddon>
+          <InputGroupAddon align="inline-end">
+            <ListFilterIcon />
+          </InputGroupAddon>
+        </InputGroup>
+
+        <Await resolve={courses}>
+          {({ hits }) => (
+            <>
+              <ItemGroup>
+                {hits
+                  .filter(
+                    ({ metadata__unit_price = 0 }) => metadata__unit_price > 0
+                  )
+                  .map(({ name, metadata__unit_price }, index) => (
+                    <Fragment key={index}>
+                      <Item className="px-0">
+                        <ItemMedia>
+                          <Avatar className="border size-12">
+                            <AvatarImage src={placeholder} alt={name} />
+                          </Avatar>
+                        </ItemMedia>
+                        <ItemContent>
+                          <ItemTitle>{name}</ItemTitle>
+                          <ItemDescription>
+                            <Currency>{metadata__unit_price}</Currency>
+                          </ItemDescription>
+                        </ItemContent>
+                        <ItemActions>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="rounded-full"
+                          >
+                            <PlusIcon />
+                          </Button>
+                        </ItemActions>
+                      </Item>
+
+                      {index !== hits.length - 1 && <ItemSeparator />}
+                    </Fragment>
+                  ))}
+              </ItemGroup>
+            </>
+          )}
+        </Await>
+      </Suspense>
+    </Container>
+  )
+}

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

@@ -149,6 +149,10 @@ export default function Component({
             <List search={search} hits={hits as Enrollment[]} />
           )}
         </Await>
+
+        <div className="border p-12 rounded-lg border-dashed text-center h-102 flex items-center justify-center">
+          exporar mais
+        </div>
       </Suspense>
     </Container>
   )

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

@@ -13,6 +13,7 @@ import { authMiddleware } from '@repo/auth/middleware/auth'
 import { ModeToggle, ThemedImage } from '@repo/ui/components/dark-mode'
 import { NavUser } from '@repo/ui/components/nav-user'
 import { Button } from '@repo/ui/components/ui/button'
+import { HoverBorderGradient } from '@repo/ui/components/ui/hover-border-gradient'
 import {
   NavigationMenu,
   NavigationMenuLink,
@@ -140,6 +141,11 @@ export default function Component({
           </div>
 
           <div className="ml-auto flex gap-2.5 items-center">
+            <NavLink to="/catalog">
+              <HoverBorderGradient className="cursor-pointer text-sm h-9 flex items-center">
+                Explorar mais cursos
+              </HoverBorderGradient>
+            </NavLink>
             <ModeToggle />
             <NavUser user={user} excludeApps={['saladeaula']} />
           </div>