add explore

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/route.tsx

@@ -13,7 +13,7 @@ import {
   CheckIcon,
   BookIcon,
   ArrowDownAZIcon,
-  ArrowDownZAIcon,
+  ArrowUpAZIcon,
   AlertTriangleIcon,
   UserIcon
 } from 'lucide-react'
@@ -95,6 +95,7 @@ export async function loader({ context }: Route.LoaderArgs) {
 
 export async function action({ params, request, context }: Route.ActionArgs) {
   const body = (await request.json()) as object
+
   const r = await req({
     url: `enrollments`,
     headers: new Headers({ 'Content-Type': 'application/json' }),
@@ -508,7 +509,7 @@ function FacetedFilter({
                 className="cursor-pointer text-muted-foreground"
                 onClick={toggle}
               >
-                {sort == 'a-z' ? <ArrowDownAZIcon /> : <ArrowDownZAIcon />}
+                {sort == 'a-z' ? <ArrowDownAZIcon /> : <ArrowUpAZIcon />}
               </Button>
             </div>
           </div>

apps/saladeaula.digital/app/routes.ts

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

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

@@ -1,150 +0,0 @@
-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 />
-
-                            <span
-                              className="
-                                    transition-all
-                                    duration-200
-                                    ease-out
-                                    hidden
-                                    group-hover:block
-                                  "
-                            >
-                              <span className="overflow-hidden whitespace-nowrap">
-                                Matricular-se
-                              </span>
-                            </span>
-                          </Button>
-                        </ItemActions>
-                      </Item>
-
-                      {index !== hits.length - 1 && <ItemSeparator />}
-                    </Fragment>
-                  ))}
-              </ItemGroup>
-            </>
-          )}
-        </Await>
-      </Suspense>
-    </Container>
-  )
-}

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

@@ -0,0 +1,171 @@
+import type { Route } from './+types/explore'
+
+import { useToggle } from 'ahooks'
+import { Fragment, Suspense, useMemo } from 'react'
+import { Await } from 'react-router'
+import { PlusIcon, ArrowDownAZIcon, ArrowUpAZIcon } from 'lucide-react'
+import Fuse from 'fuse.js'
+
+import { cloudflareContext } from '@repo/auth/context'
+import { createSearch } from '@repo/util/meili'
+import { Skeleton } from '@repo/ui/components/skeleton'
+import {
+  InputGroupAddon,
+  InputGroupButton
+} 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 { Button } from '@repo/ui/components/ui/button'
+
+import placeholder from '@/assets/placeholder.webp'
+import { Container } from '@/components/container'
+import { SearchForm } from '@repo/ui/components/search-form'
+import { useSearchParams } from 'react-router'
+
+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) {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [sort, { toggle }] = useToggle('a-z', 'z-a')
+  const search = searchParams.get('s') as string
+
+  return (
+    <Container className="space-y-5 max-w-2xl">
+      <Suspense fallback={<Skeleton />}>
+        <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>
+
+        <SearchForm
+          placeholder="Pesquisar curso"
+          defaultValue={search}
+          onChange={(value) =>
+            setSearchParams((searchParams) => {
+              searchParams.set('s', String(value))
+              return searchParams
+            })
+          }
+        >
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              variant="link"
+              size="icon-sm"
+              tabIndex={-1}
+              className="cursor-pointer text-muted-foreground"
+              onClick={toggle}
+            >
+              {sort == 'a-z' ? <ArrowDownAZIcon /> : <ArrowUpAZIcon />}
+            </InputGroupButton>
+          </InputGroupAddon>
+        </SearchForm>
+
+        <Await resolve={courses}>
+          {({ hits }) => (
+            <List
+              hits={hits.filter(
+                ({ metadata__unit_price = 0 }) => metadata__unit_price > 0
+              )}
+              search={search}
+              sort={sort}
+            />
+          )}
+        </Await>
+      </Suspense>
+    </Container>
+  )
+}
+
+function List({ hits, search, sort }) {
+  const fuse = useMemo(() => {
+    return new Fuse(hits, {
+      keys: ['name'],
+      threshold: 0.3,
+      includeMatches: true
+    })
+  }, [hits])
+
+  const filtered = useMemo(() => {
+    const results = !search ? hits : fuse.search(search).map(({ item }) => item)
+
+    return results.sort((a, b) => {
+      const comparison = a.name.localeCompare(b.name)
+      return sort === 'a-z' ? comparison : -comparison
+    })
+  }, [search, fuse, hits, sort])
+
+  return (
+    <ItemGroup className="relative">
+      {filtered.map(({ name, metadata__unit_price }, index) => (
+        <Fragment key={index}>
+          {index > 0 && <ItemSeparator />}
+
+          <Item
+            className="group px-px relative
+                       hover:px-2.5 hover:scale-105 hover:z-1
+                       hover:bg-gray-50 dark:hover:bg-neutral-900"
+          >
+            <ItemMedia>
+              <Avatar className="border size-16 bg-background">
+                <AvatarImage src={placeholder} alt={name} />
+              </Avatar>
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle className="lg:text-lg">{name}</ItemTitle>
+              <ItemDescription>
+                <Currency>{metadata__unit_price}</Currency>
+              </ItemDescription>
+            </ItemContent>
+            <ItemActions>
+              <Button
+                variant="secondary"
+                size="sm"
+                className="rounded-full cursor-pointer font-normal h-9"
+              >
+                <PlusIcon />
+                <span className="hidden group-hover:block transition">
+                  Matricular
+                </span>
+              </Button>
+            </ItemActions>
+          </Item>
+        </Fragment>
+      ))}
+    </ItemGroup>
+  )
+}

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

@@ -141,8 +141,8 @@ 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">
+            <NavLink to="/explore">
+              <HoverBorderGradient className="cursor-pointer text-sm h-9 flex items-center not-dark:bg-white not-dark:text-black">
                 Explorar mais cursos
               </HoverBorderGradient>
             </NavLink>