From 0c91222fb184f8ec44cb32de2e5d4bc564ed7f16 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Tue, 7 Jan 2025 23:41:47 +0800
Subject: [PATCH] refactor(playground): update chat and terminal components for
 improved tab naming and layout

---
 src/app/playground/components/chat.tsx     |  2 +-
 src/app/playground/components/terminal.tsx | 28 +++++++++++-----------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/playground/components/chat.tsx b/src/app/playground/components/chat.tsx
index d8d7830..2381efb 100644
--- a/src/app/playground/components/chat.tsx
+++ b/src/app/playground/components/chat.tsx
@@ -20,7 +20,7 @@ export default function Chat() {
   const { messages, input, handleInputChange, handleSubmit } = useChat();
   return (
     <div className="h-full w-full flex flex-col border sm:rounded-lg shadow-md overflow-hidden transition-all duration-200 ease-out">
-      <ExpandableChatHeader className="flex-col text-center justify-center border-[#3e4452]">
+      <ExpandableChatHeader className="flex-col text-center justify-center border-[#3e4452] py-3">
         <h1 className="text-xl font-semibold">Chat with AI Assistant ✨</h1>
       </ExpandableChatHeader>
       <ExpandableChatBody>
diff --git a/src/app/playground/components/terminal.tsx b/src/app/playground/components/terminal.tsx
index 4a247f2..6c28772 100644
--- a/src/app/playground/components/terminal.tsx
+++ b/src/app/playground/components/terminal.tsx
@@ -1,63 +1,63 @@
-import { Box, House, PanelsTopLeft } from "lucide-react";
+import { ClipboardList, MessageSquareCode, TerminalSquare } from "lucide-react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 export default function Terminal() {
   return (
     <Tabs
-      defaultValue="tab-1"
+      defaultValue="terminal"
       orientation="vertical"
       className="flex h-full w-full gap-2 py-3 pr-3"
     >
       <TabsList className="justify-start flex-col gap-1 rounded-none bg-transparent px-1 py-0 text-foreground">
         <TabsTrigger
-          value="tab-1"
+          value="terminal"
           className="relative w-full justify-start after:absolute after:inset-y-0 after:start-0 after:-ms-1 after:w-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary data-[state=active]:hover:bg-accent"
         >
-          <House
+          <TerminalSquare
             className="-ms-0.5 me-1.5 opacity-60"
             size={16}
             strokeWidth={2}
             aria-hidden="true"
           />
-          Overview
+          Terminal
         </TabsTrigger>
         <TabsTrigger
-          value="tab-2"
+          value="comment"
           className="relative w-full justify-start after:absolute after:inset-y-0 after:start-0 after:-ms-1 after:w-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary data-[state=active]:hover:bg-accent"
         >
-          <PanelsTopLeft
+          <MessageSquareCode
             className="-ms-0.5 me-1.5 opacity-60"
             size={16}
             strokeWidth={2}
             aria-hidden="true"
           />
-          Projects
+          Comment
         </TabsTrigger>
         <TabsTrigger
-          value="tab-3"
+          value="case"
           className="relative w-full justify-start after:absolute after:inset-y-0 after:start-0 after:-ms-1 after:w-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary data-[state=active]:hover:bg-accent"
         >
-          <Box
+          <ClipboardList
             className="-ms-0.5 me-1.5 opacity-60"
             size={16}
             strokeWidth={2}
             aria-hidden="true"
           />
-          Packages
+          Testcase
         </TabsTrigger>
       </TabsList>
       <div className="grow rounded-lg border border-border text-start bg-[#3e4452]">
-        <TabsContent value="tab-1">
+        <TabsContent value="terminal">
           <p className="px-4 py-1.5 text-xs text-muted-foreground">
             Content for Tab 1
           </p>
         </TabsContent>
-        <TabsContent value="tab-2">
+        <TabsContent value="comment">
           <p className="px-4 py-1.5 text-xs text-muted-foreground">
             Content for Tab 2
           </p>
         </TabsContent>
-        <TabsContent value="tab-3">
+        <TabsContent value="case">
           <p className="px-4 py-1.5 text-xs text-muted-foreground">
             Content for Tab 3
           </p>