feat(playground): implement terminal state management and update Run component for structured message handling

src/app/playground/components/button/run.tsx

@@ -1,20 +1,28 @@
 "use client";
 
 import { Play } from "lucide-react";
+import { runCode } from "@/actions/docker/run";
 import { Button } from "@/components/ui/button";
 import { useEditorStore } from "@/store/useEditorStore";
+import { useTerminalStore } from "@/store/useTerminalStore";
 
 export default function Run() {
   const { language, code } = useEditorStore();
+  const { setType, setMessage } = useTerminalStore();
 
   return (
     <div className="inline-flex -space-x-px rounded-lg shadow-sm shadow-black/5 rtl:space-x-reverse">
       <Button
         className="rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10"
         variant="outline"
-        onClick={() => {
+        onClick={async () => {
-          console.log("Run language:", language);
+          if (language && code) {
-          console.log("Run code:", code);
+            const result = runCode(language, code);
+            setType((await result).type);
+            setMessage((await result).message);
+          } else {
+            console.error("Language or code is null");
+          }
         }}
       >
         <Play

src/app/playground/layout/terminal/result.tsx

@@ -1,5 +1,9 @@
+"use client";
+
 import { Message } from "./components/message";
+import { useTerminalStore } from "@/store/useTerminalStore";
 
 export default function ResultPage() {
-  return <Message type="info" message="This is a message" />;
+  const { type, message } = useTerminalStore();
+  return <>{type && message && <Message type={type} message={message} />}</>;
 }

src/store/useTerminalStore.ts

@@ -0,0 +1,9 @@
+import { create } from "zustand";
+import { TerminalState } from "@/types/terminal";
+
+export const useTerminalStore = create<TerminalState>((set) => ({
+  type: null,
+  message: null,
+  setType: (type) => set({ type }),
+  setMessage: (message) => set({ message }),
+}));

src/types/terminal.ts

@@ -0,0 +1,8 @@
+import { MessageType } from "@/app/playground/layout/terminal/components/message";
+
+export interface TerminalState {
+  type: MessageType | null;
+  message: string | null;
+  setType: (type: MessageType) => void;
+  setMessage: (message: string) => void;
+}