litchi/judge
1
0
Fork 0
mirror of https://litchi.icu/ngc2207/judge.git synced 2025-05-18 16:37:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(playground): update chat and terminal components for improved tab naming and layout

Browse Source
This commit is contained in:
ngc2207 2025-01-07 23:41:47 +08:00
parent 3ba5171564
commit 0c91222fb1
2 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/playground/components/chat.tsx
View File

@ -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>

28
src/app/playground/components/terminal.tsx
View File

@ -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>