share route itens

This commit is contained in:
2025-11-24 19:11:20 -03:00
parent 4db2123bc5
commit 21840506b0
31 changed files with 460 additions and 703 deletions

View File

@@ -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>
)
}

View File

@@ -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} />
}
}

View File

@@ -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} />
}
}

View File

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

View File

@@ -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="/">

View File

@@ -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>
)
}

View File

@@ -1,6 +1,6 @@
/* eslint-disable */
// Generated by Wrangler by running `wrangler types` (hash: 46c0a3878ceeb71c97bee6d456de6815)
// Runtime types generated with workerd@1.20251113.0 2025-04-04 nodejs_compat
// Runtime types generated with workerd@1.20251118.0 2025-04-04 nodejs_compat
declare namespace Cloudflare {
interface GlobalProps {
mainModule: typeof import("./workers/app");
@@ -469,7 +469,7 @@ interface StructuredSerializeOptions {
transfer?: any[];
}
declare abstract class Navigator {
sendBeacon(url: string, body?: (ReadableStream | string | (ArrayBuffer | ArrayBufferView) | Blob | FormData | URLSearchParams | URLSearchParams)): boolean;
sendBeacon(url: string, body?: BodyInit): boolean;
readonly userAgent: string;
readonly hardwareConcurrency: number;
}
@@ -6759,20 +6759,8 @@ declare abstract class Ai<AiModelList extends AiModelListType = AiModels> {
} ? ReadableStream : AiModelList[Name]["postProcessedOutputs"]>;
models(params?: AiModelsSearchParams): Promise<AiModelsSearchObject[]>;
toMarkdown(): ToMarkdownService;
toMarkdown(files: {
name: string;
blob: Blob;
}[], options?: {
gateway?: GatewayOptions;
extraHeaders?: object;
}): Promise<ConversionResponse[]>;
toMarkdown(files: {
name: string;
blob: Blob;
}, options?: {
gateway?: GatewayOptions;
extraHeaders?: object;
}): Promise<ConversionResponse>;
toMarkdown(files: MarkdownDocument[], options?: ConversionRequestOptions): Promise<ConversionResponse[]>;
toMarkdown(files: MarkdownDocument, options?: ConversionRequestOptions): Promise<ConversionResponse>;
}
type GatewayRetries = {
maxAttempts?: 1 | 2 | 3 | 4 | 5;
@@ -8424,21 +8412,22 @@ declare namespace CloudflareWorkersModule {
protected ctx: ExecutionContext<Props>;
protected env: Env;
constructor(ctx: ExecutionContext, env: Env);
email?(message: ForwardableEmailMessage): void | Promise<void>;
fetch?(request: Request): Response | Promise<Response>;
queue?(batch: MessageBatch<unknown>): void | Promise<void>;
scheduled?(controller: ScheduledController): void | Promise<void>;
tail?(events: TraceItem[]): void | Promise<void>;
tailStream?(event: TailStream.TailEvent<TailStream.Onset>): TailStream.TailEventHandlerType | Promise<TailStream.TailEventHandlerType>;
trace?(traces: TraceItem[]): void | Promise<void>;
scheduled?(controller: ScheduledController): void | Promise<void>;
queue?(batch: MessageBatch<unknown>): void | Promise<void>;
test?(controller: TestController): void | Promise<void>;
trace?(traces: TraceItem[]): void | Promise<void>;
}
export abstract class DurableObject<Env = Cloudflare.Env, Props = {}> implements Rpc.DurableObjectBranded {
[Rpc.__DURABLE_OBJECT_BRAND]: never;
protected ctx: DurableObjectState<Props>;
protected env: Env;
constructor(ctx: DurableObjectState, env: Env);
fetch?(request: Request): Response | Promise<Response>;
alarm?(alarmInfo?: AlarmInvocationInfo): void | Promise<void>;
fetch?(request: Request): Response | Promise<Response>;
webSocketMessage?(ws: WebSocket, message: string | ArrayBuffer): void | Promise<void>;
webSocketClose?(ws: WebSocket, code: number, reason: string, wasClean: boolean): void | Promise<void>;
webSocketError?(ws: WebSocket, error: unknown): void | Promise<void>;
@@ -8501,36 +8490,56 @@ declare module "cloudflare:sockets" {
function _connect(address: string | SocketAddress, options?: SocketOptions): Socket;
export { _connect as connect };
}
type MarkdownDocument = {
name: string;
blob: Blob;
};
type ConversionResponse = {
name: string;
mimeType: string;
} & ({
format: "markdown";
format: 'markdown';
tokens: number;
data: string;
} | {
format: "error";
name: string;
mimeType: string;
format: 'error';
error: string;
});
};
type ImageConversionOptions = {
descriptionLanguage?: 'en' | 'es' | 'fr' | 'it' | 'pt' | 'de';
};
type EmbeddedImageConversionOptions = ImageConversionOptions & {
convert?: boolean;
maxConvertedImages?: number;
};
type ConversionOptions = {
html?: {
images?: EmbeddedImageConversionOptions & {
convertOGImage?: boolean;
};
};
docx?: {
images?: EmbeddedImageConversionOptions;
};
image?: ImageConversionOptions;
pdf?: {
images?: EmbeddedImageConversionOptions;
metadata?: boolean;
};
};
type ConversionRequestOptions = {
gateway?: GatewayOptions;
extraHeaders?: object;
conversionOptions?: ConversionOptions;
};
type SupportedFileFormat = {
mimeType: string;
extension: string;
};
declare abstract class ToMarkdownService {
transform(files: {
name: string;
blob: Blob;
}[], options?: {
gateway?: GatewayOptions;
extraHeaders?: object;
}): Promise<ConversionResponse[]>;
transform(files: {
name: string;
blob: Blob;
}, options?: {
gateway?: GatewayOptions;
extraHeaders?: object;
}): Promise<ConversionResponse>;
transform(files: MarkdownDocument[], options?: ConversionRequestOptions): Promise<ConversionResponse[]>;
transform(files: MarkdownDocument, options?: ConversionRequestOptions): Promise<ConversionResponse>;
supported(): Promise<SupportedFileFormat[]>;
}
declare namespace TailStream {