feat(playground): add Result component and message display in terminal

src/app/playground/components/terminal.tsx

@@ -1,3 +1,4 @@
+import Result from "../layout/terminal/result";
 import { ClipboardList, MessageSquareCode, TerminalSquare } from "lucide-react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
@@ -48,9 +49,7 @@ export default function Terminal() {
       </TabsList>
       <div className="grow rounded-lg border border-border text-start bg-[#3e4452]">
         <TabsContent value="terminal">
-          <p className="px-4 py-1.5 text-xs text-muted-foreground">
+          <Result />
-            Content for Tab 1
-          </p>
         </TabsContent>
         <TabsContent value="comment">
           <p className="px-4 py-1.5 text-xs text-muted-foreground">

src/app/playground/layout/terminal/components/message.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { CircleCheck, Info, TriangleAlert } from "lucide-react";
+
+type MessageType = "info" | "error" | "warning" | "success";
+
+interface MessageTypeDetails {
+  icon: React.ComponentType<{
+    className: string;
+    size: number;
+    strokeWidth: number;
+    "aria-hidden": boolean;
+  }>;
+  colorClass: string;
+}
+
+const messageTypeIconMap: Record<MessageType, MessageTypeDetails> = {
+  error: {
+    icon: CircleCheck,
+    colorClass: "text-red-500",
+  },
+  warning: {
+    icon: TriangleAlert,
+    colorClass: "text-amber-500",
+  },
+  success: {
+    icon: CircleCheck,
+    colorClass: "text-emerald-500",
+  },
+  info: {
+    icon: Info,
+    colorClass: "text-blue-500",
+  },
+};
+
+interface MessageProps {
+  type: MessageType;
+  message: string;
+}
+
+export function Message({ type, message }: MessageProps) {
+  const { icon: Icon, colorClass } = messageTypeIconMap[type];
+
+  return (
+    <div className="px-4 py-1">
+      <p className="grow text-sm">
+        <Icon
+          className={`-mt-0.5 me-3 inline-flex ${colorClass}`}
+          size={16}
+          strokeWidth={2}
+          aria-hidden={true}
+        />
+        {message}
+      </p>
+    </div>
+  );
+}

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

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