55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import React, { createContext, useCallback, useContext, useState } from "react";
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
SheetDescription,
|
|
} from "@/components/ui/sheet";
|
|
|
|
import WhiteboardCanvas from "@/app/components/whiteboard/WhiteboardCanvas";
|
|
|
|
type WhiteboardContextType = {
|
|
open: () => void;
|
|
close: () => void;
|
|
isOpen: boolean;
|
|
};
|
|
|
|
const WhiteboardContext = createContext<WhiteboardContextType | null>(null);
|
|
|
|
export const useWhiteboard = (): WhiteboardContextType => {
|
|
const ctx = useContext(WhiteboardContext);
|
|
if (!ctx) {
|
|
throw new Error("useWhiteboard must be used within WhiteboardProvider");
|
|
}
|
|
return ctx;
|
|
};
|
|
|
|
export function WhiteboardProvider({ children }: { children: React.ReactNode }) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const open = useCallback(() => setIsOpen(true), []);
|
|
const close = useCallback(() => setIsOpen(false), []);
|
|
|
|
return (
|
|
<WhiteboardContext.Provider value={{ open, close, isOpen }}>
|
|
{children}
|
|
<Sheet open={isOpen} onOpenChange={setIsOpen}>
|
|
<SheetContent side="right" className="w-full sm:max-w-[560px] p-0">
|
|
<SheetHeader className="p-4 border-b">
|
|
<SheetTitle>Whiteboard</SheetTitle>
|
|
<SheetDescription>
|
|
Sketch ideas. Use mouse or touch to draw.
|
|
</SheetDescription>
|
|
</SheetHeader>
|
|
<div className="p-4">
|
|
<WhiteboardCanvas />
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</WhiteboardContext.Provider>
|
|
);
|
|
}
|