44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useParams, useRouter } from "next/navigation";
|
||
|
|
import dynamic from "next/dynamic";
|
||
|
|
import { ArrowLeft } from "lucide-react";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { api } from "@/lib/trpc";
|
||
|
|
|
||
|
|
const WhiteboardCanvas = dynamic(
|
||
|
|
() => import("@/components/whiteboard/canvas").then((m) => m.WhiteboardCanvas),
|
||
|
|
{ ssr: false, loading: () => <div className="flex h-full items-center justify-center text-muted-foreground">Loading whiteboard...</div> },
|
||
|
|
);
|
||
|
|
|
||
|
|
export default function WhiteboardDetailPage() {
|
||
|
|
const params = useParams();
|
||
|
|
const router = useRouter();
|
||
|
|
const workspaceSlug = params.workspaceSlug as string;
|
||
|
|
const whiteboardId = params.whiteboardId as string;
|
||
|
|
|
||
|
|
const { data: wb } = api.objects.getById.useQuery(
|
||
|
|
{ id: whiteboardId },
|
||
|
|
{ enabled: Boolean(whiteboardId) },
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-full flex-col">
|
||
|
|
<div className="flex shrink-0 items-center gap-3 border-b px-4 py-2">
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="h-8 w-8"
|
||
|
|
onClick={() => router.push(`/${workspaceSlug}/whiteboards`)}
|
||
|
|
>
|
||
|
|
<ArrowLeft className="size-4" />
|
||
|
|
</Button>
|
||
|
|
<h1 className="text-sm font-medium">{(wb as { title?: string } | undefined)?.title ?? "Whiteboard"}</h1>
|
||
|
|
</div>
|
||
|
|
<div className="flex-1">
|
||
|
|
<WhiteboardCanvas documentId={whiteboardId} className="h-full" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|