share route itens

apps/saladeaula.digital/app/components/container.tsx

@@ -8,7 +8,9 @@ type ContainerProps = {
 export function Container({ children, className }: ContainerProps) {
   return (
     <main className="p-4">
-      <div className={cn('container mx-auto', className)}>{children}</div>
+      <div className={cn('container mx-auto max-w-7xl', className)}>
+        {children}
+      </div>
     </main>
   )
 }

apps/saladeaula.digital/app/components/scorm12-player.tsx

@@ -1,71 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState } from 'react'
-import { Scorm12API } from 'scorm-again/scorm12'
-import { settings, type ScormPlayerProps } from './scorm-player'
-
-// https://scorm.com/scorm-explained/technical-scorm/run-time/run-time-reference/#section-2
-export function Scorm12Player({
-  scormState,
-  scormContentPath,
-  className,
-  onCommit,
-  setValue
-}: ScormPlayerProps) {
-  const [iframeLoaded, setIframeLoaded] = useState(false)
-  const scormApiRef = useRef<Scorm12API | null>(null)
-
-  useEffect(() => {
-    const scormApi = new Scorm12API(settings)
-    scormApi.loadFromFlattenedJSON(scormState)
-
-    scormApi.on('LMSCommit', function () {
-      onCommit?.(scormApi.renderCommitCMI(true))
-    })
-
-    scormApi.on('LMSSetValue.*', function (element: any, value: any) {
-      setValue?.(element, value)
-    })
-
-    scormApiRef.current = scormApi
-    window.API = scormApi
-    setIframeLoaded(true)
-
-    return () => {
-      scormApiRef.current = null
-    }
-  }, [])
-
-  useEffect(() => {
-    if (!scormApiRef.current) {
-      return
-    }
-
-    const scormApi = scormApiRef.current
-    let unloaded = false
-
-    function unload() {
-      if (unloaded || scormApi.isTerminated()) {
-        return false
-      }
-
-      scormApi.LMSSetValue('cmi.core.exit', 'suspend')
-      scormApi.LMSCommit()
-      scormApi.LMSFinish()
-
-      unloaded = true
-    }
-
-    window.addEventListener('beforeunload', unload)
-    window.addEventListener('unload', unload)
-
-    return () => {
-      window.removeEventListener('beforeunload', unload)
-      window.removeEventListener('unload', unload)
-    }
-  }, [])
-
-  if (iframeLoaded) {
-    return <iframe src={`/proxy/${scormContentPath}`} className={className} />
-  }
-}

apps/saladeaula.digital/app/components/scorm2004-player.tsx

@@ -1,70 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState } from 'react'
-import { Scorm2004API } from 'scorm-again/scorm2004'
-import { settings, type ScormPlayerProps } from './scorm-player'
-
-export function Scorm2004Player({
-  scormState,
-  scormContentPath,
-  className,
-  onCommit,
-  setValue
-}: ScormPlayerProps) {
-  const [iframeLoaded, setIframeLoaded] = useState(false)
-  const scormApiRef = useRef<Scorm2004API | null>(null)
-
-  useEffect(() => {
-    const scormApi = new Scorm2004API(settings)
-    scormApi.loadFromFlattenedJSON(scormState)
-
-    scormApi.on('LMSCommit', function () {
-      onCommit?.(scormApi.renderCommitCMI(true))
-    })
-
-    scormApi.on('LMSSetValue.*', function (element: any, value: any) {
-      setValue?.(element, value)
-    })
-
-    scormApiRef.current = scormApi
-    window.API_1484_11 = scormApi
-    setIframeLoaded(true)
-
-    return () => {
-      scormApiRef.current = null
-    }
-  }, [])
-
-  useEffect(() => {
-    if (!scormApiRef.current) {
-      return
-    }
-
-    const scormApi = scormApiRef.current
-    let unloaded = false
-
-    function unload() {
-      if (unloaded || scormApi.isTerminated()) {
-        return false
-      }
-
-      scormApi.SetValue('cmi.exit', 'suspend')
-      scormApi.Commit()
-      scormApi.Terminate()
-
-      unloaded = true
-    }
-
-    window.addEventListener('beforeunload', unload)
-    window.addEventListener('unload', unload)
-
-    return () => {
-      window.removeEventListener('beforeunload', unload)
-      window.removeEventListener('unload', unload)
-    }
-  }, [])
-
-  if (iframeLoaded) {
-    return <iframe src={`/proxy/${scormContentPath}`} className={className} />
-  }
-}

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

@@ -22,12 +22,8 @@ import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
 import { Suspense, useMemo } from 'react'
 import { Await, NavLink, useSearchParams } from 'react-router'
 
-import placeholder from '@/assets/placeholder.webp'
-import { Container } from '@/components/container'
-
 import type { User } from '@repo/auth/auth'
 import { userContext } from '@repo/auth/context'
-
 import { FacetedFilter } from '@repo/ui/components/faceted-filter'
 import { SearchForm } from '@repo/ui/components/search-form'
 import { Skeleton } from '@repo/ui/components/skeleton'
@@ -42,6 +38,9 @@ import { Kbd } from '@repo/ui/components/ui/kbd'
 import { Progress } from '@repo/ui/components/ui/progress'
 import { createSearch } from '@repo/util/meili'
 
+import placeholder from '@/assets/placeholder.webp'
+import { Container } from '@/components/container'
+
 type Course = {
   name: string
   scormset?: string
@@ -58,7 +57,7 @@ export function meta({}: Route.MetaArgs) {
   return [{ title: 'Meus cursos' }]
 }
 
-export const loader = async ({ request, context }: Route.ActionArgs) => {
+export async function loader({ request, context }: Route.ActionArgs) {
   const user = context.get(userContext) as User
   const { searchParams } = new URL(request.url)
   const status = searchParams.getAll('status') || []
@@ -89,18 +88,18 @@ export default function Component({
 
   return (
     <Container className="space-y-4">
-      <div className="space-y-0.5 mb-8">
-        <h1 className="text-2xl font-bold tracking-tight">Meus cursos</h1>
-        <p className="text-muted-foreground">
-          Aqui você encontra todos os cursos em que está matriculado,
-          organizados em um só lugar. Acompanhe seu progresso e continue de onde
-          parou.
-        </p>
-      </div>
-
       <Suspense fallback={<Skeleton />}>
+        <div className="space-y-0.5 mb-8">
+          <h1 className="text-2xl font-bold tracking-tight">Meus cursos</h1>
+          <p className="text-muted-foreground">
+            Aqui você encontra todos os cursos em que está matriculado,
+            organizados em um só lugar. Acompanhe seu progresso e continue de
+            onde parou.
+          </p>
+        </div>
+
         <div className="flex gap-2.5">
-          <div className="w-full xl:w-93">
+          <div className="w-full xl:w-1/3">
             <SearchForm
               defaultValue={term || ''}
               placeholder={
@@ -142,13 +141,9 @@ export default function Component({
           />
         </div>
 
-        <div className="grid lg:grid-cols-4 gap-5">
-          <Await resolve={data}>
-            {({ hits = [] }) => {
-              return <List term={term} hits={hits as Enrollment[]} />
-            }}
-          </Await>
-        </div>
+        <Await resolve={data}>
+          {({ hits = [] }) => <List term={term} hits={hits as Enrollment[]} />}
+        </Await>
       </Suspense>
     </Container>
   )
@@ -173,7 +168,7 @@ function List({ term, hits = [] }: { term: string; hits: Enrollment[] }) {
 
   if (hits_.length === 0) {
     return (
-      <Empty>
+      <Empty className="border border-dashed">
         <EmptyHeader>
           <EmptyMedia variant="icon">
             <BanIcon />
@@ -187,9 +182,13 @@ function List({ term, hits = [] }: { term: string; hits: Enrollment[] }) {
     )
   }
 
-  return hits_.map((props: Enrollment, idx) => {
-    return <Enrollment key={idx} {...props} />
-  })
+  return (
+    <div className="grid lg:grid-cols-4 gap-5">
+      {hits_.map((props: Enrollment, idx) => {
+        return <Enrollment key={idx} {...props} />
+      })}
+    </div>
+  )
 }
 
 function Enrollment({ id, course, progress }: Enrollment) {

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

@@ -55,7 +55,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">
           {/* Desktop Menu */}
           <div className="hidden lg:flex items-center gap-8">
             <Link to="/">

apps/saladeaula.digital/app/routes/orders/route.tsx

@@ -25,7 +25,7 @@ export function meta({}: Route.MetaArgs) {
   return [{ title: 'Histórico de compras' }]
 }
 
-export const loader = async ({ request, context }: Route.ActionArgs) => {
+export async function loader({ request, context }: Route.ActionArgs) {
   const user = context.get(userContext) as User
   const { searchParams } = new URL(request.url)
   const status = searchParams.getAll('status') || []
@@ -55,8 +55,8 @@ export const loader = async ({ request, context }: Route.ActionArgs) => {
 
 export default function Component({ loaderData: { data } }) {
   return (
-    <Suspense fallback={<Skeleton />}>
-      <Container className="space-y-2.5">
+    <Container className="space-y-2.5">
+      <Suspense fallback={<Skeleton />}>
         <Breadcrumb>
           <BreadcrumbList>
             <BreadcrumbItem>
@@ -95,7 +95,7 @@ export default function Component({ loaderData: { data } }) {
             )
           }}
         </Await>
-      </Container>
-    </Suspense>
+      </Suspense>
+    </Container>
   )
 }