From 0c065af788e0bcce085f9eedec0d0f495c3def37 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Wed, 8 Jan 2025 18:37:34 +0800
Subject: [PATCH] feat(playground): add Result component and message display in
 terminal

---
 src/app/playground/components/terminal.tsx    |  5 +-
 .../layout/terminal/components/message.tsx    | 56 +++++++++++++++++++
 src/app/playground/layout/terminal/result.tsx |  5 ++
 3 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 src/app/playground/layout/terminal/components/message.tsx
 create mode 100644 src/app/playground/layout/terminal/result.tsx

diff --git a/src/app/playground/components/terminal.tsx b/src/app/playground/components/terminal.tsx
index 6c28772..701e00e 100644
--- a/src/app/playground/components/terminal.tsx
+++ b/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">
-            Content for Tab 1
-          </p>
+          <Result />
         </TabsContent>
         <TabsContent value="comment">
           <p className="px-4 py-1.5 text-xs text-muted-foreground">
diff --git a/src/app/playground/layout/terminal/components/message.tsx b/src/app/playground/layout/terminal/components/message.tsx
new file mode 100644
index 0000000..b74103a
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/playground/layout/terminal/result.tsx b/src/app/playground/layout/terminal/result.tsx
new file mode 100644
index 0000000..aad7f0f
--- /dev/null
+++ b/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" />;
+}