From 8f6490a03dc12be77aee5f6b6338a96ad7f6c7e6 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Mon, 24 Feb 2025 13:24:19 +0800
Subject: [PATCH] feat(workspace): add WorkspaceFooter component for playground

---
 .../@workspace/components/footer.tsx          | 43 +++++++++++++++++++
 .../(app)/playground/@workspace/layout.tsx    |  2 +
 2 files changed, 45 insertions(+)
 create mode 100644 src/app/(app)/playground/@workspace/components/footer.tsx

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 (
+    <footer {...props} className={cn("h-9 flex-none bg-muted px-3 py-2", className)}>
+      <div className="flex justify-end">
+        {position ? `Row ${position.lineNumber}, Column ${position.column}` : "Row -, Column -"}
+      </div>
+    </footer>
+  );
+}
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) {
       <TabsContent value="code" className="grow mt-0">
         {children}
       </TabsContent>
+      <WorkspaceFooter />
     </Tabs>
   );
 }