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}
+
);
}