diff --git a/src/app/(app)/playground/@workspace/components/footer.tsx b/src/app/(app)/playground/@workspace/components/footer.tsx new file mode 100644 index 0000000..79c58fa --- /dev/null +++ b/src/app/(app)/playground/@workspace/components/footer.tsx @@ -0,0 +1,43 @@ +"use client"; + +import { cn } from "@/lib/utils"; +import { useEffect, useState } from "react"; +import { useCodeEditorState } from "@/store/useCodeEditor"; + +interface WorkspaceFooterProps { + className?: string; +} + +export default function WorkspaceFooter({ className, ...props }: WorkspaceFooterProps) { + const { editor } = useCodeEditorState(); + const [position, setPosition] = useState<{ lineNumber: number; column: number } | null>(null); + + useEffect(() => { + if (!editor) return; + + const initialPosition = editor.getPosition(); + if (initialPosition) { + setPosition({ + lineNumber: initialPosition.lineNumber, + column: initialPosition.column, + }); + } + + const dispose = editor.onDidChangeCursorPosition((e) => { + setPosition({ + lineNumber: e.position.lineNumber, + column: e.position.column, + }); + }); + + return () => dispose.dispose(); + }, [editor]); + + return ( + + ); +} diff --git a/src/app/(app)/playground/@workspace/layout.tsx b/src/app/(app)/playground/@workspace/layout.tsx index f49eab6..596f423 100644 --- a/src/app/(app)/playground/@workspace/layout.tsx +++ b/src/app/(app)/playground/@workspace/layout.tsx @@ -1,4 +1,5 @@ import { CodeXmlIcon } from "lucide-react"; +import WorkspaceFooter from "./components/footer"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; @@ -28,6 +29,7 @@ export default function WorkspaceLayout({ children }: WorkspaceLayoutProps) { {children} + ); }