Skip to content

Commit 6659d54

Browse files
cliffhallcliffhall
authored
Merge pull request #265 from morinokami/patch-2
Fix inconsistent gap between TabsList and TabsContent
2 parents 4053aa1 + 0fd2e12 commit 6659d54

File tree

6 files changed

+431
-414
lines changed

6 files changed

+431
-414
lines changed

‎client/src/components/PingTab.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@ import { Button } from "@/components/ui/button";
33

44
const PingTab = ({ onPingClick }: { onPingClick: () => void }) => {
55
return (
6-
<TabsContent value="ping" className="grid grid-cols-2 gap-4">
7-
<div className="col-span-2 flex justify-center items-center">
8-
<Button
9-
onClick={onPingClick}
10-
className="font-bold py-6 px-12 rounded-full"
11-
>
12-
Ping Server
13-
</Button>
6+
<TabsContent value="ping">
7+
<div className="grid grid-cols-2 gap-4">
8+
<div className="col-span-2 flex justify-center items-center">
9+
<Button
10+
onClick={onPingClick}
11+
className="font-bold py-6 px-12 rounded-full"
12+
>
13+
Ping Server
14+
</Button>
15+
</div>
1416
</div>
1517
</TabsContent>
1618
);

‎client/src/components/PromptsTab.tsx

Lines changed: 80 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -84,84 +84,88 @@ const PromptsTab = ({
8484
};
8585

8686
return (
87-
<TabsContent value="prompts" className="grid grid-cols-2 gap-4">
88-
<ListPane
89-
items={prompts}
90-
listItems={listPrompts}
91-
clearItems={clearPrompts}
92-
setSelectedItem={(prompt) => {
93-
setSelectedPrompt(prompt);
94-
setPromptArgs({});
95-
}}
96-
renderItem={(prompt) => (
97-
<>
98-
<span className="flex-1">{prompt.name}</span>
99-
<span className="text-sm text-gray-500">{prompt.description}</span>
100-
</>
101-
)}
102-
title="Prompts"
103-
buttonText={nextCursor ? "List More Prompts" : "List Prompts"}
104-
isButtonDisabled={!nextCursor && prompts.length > 0}
105-
/>
87+
<TabsContent value="prompts">
88+
<div className="grid grid-cols-2 gap-4">
89+
<ListPane
90+
items={prompts}
91+
listItems={listPrompts}
92+
clearItems={clearPrompts}
93+
setSelectedItem={(prompt) => {
94+
setSelectedPrompt(prompt);
95+
setPromptArgs({});
96+
}}
97+
renderItem={(prompt) => (
98+
<>
99+
<span className="flex-1">{prompt.name}</span>
100+
<span className="text-sm text-gray-500">
101+
{prompt.description}
102+
</span>
103+
</>
104+
)}
105+
title="Prompts"
106+
buttonText={nextCursor ? "List More Prompts" : "List Prompts"}
107+
isButtonDisabled={!nextCursor && prompts.length > 0}
108+
/>
106109

107-
<div className="bg-card rounded-lg shadow">
108-
<div className="p-4 border-b border-gray-200">
109-
<h3 className="font-semibold">
110-
{selectedPrompt ? selectedPrompt.name : "Select a prompt"}
111-
</h3>
112-
</div>
113-
<div className="p-4">
114-
{error ? (
115-
<Alert variant="destructive">
116-
<AlertCircle className="h-4 w-4" />
117-
<AlertTitle>Error</AlertTitle>
118-
<AlertDescription>{error}</AlertDescription>
119-
</Alert>
120-
) : selectedPrompt ? (
121-
<div className="space-y-4">
122-
{selectedPrompt.description && (
123-
<p className="text-sm text-gray-600">
124-
{selectedPrompt.description}
125-
</p>
126-
)}
127-
{selectedPrompt.arguments?.map((arg) => (
128-
<div key={arg.name}>
129-
<Label htmlFor={arg.name}>{arg.name}</Label>
130-
<Combobox
131-
id={arg.name}
132-
placeholder={`Enter ${arg.name}`}
133-
value={promptArgs[arg.name] || ""}
134-
onChange={(value) => handleInputChange(arg.name, value)}
135-
onInputChange={(value) =>
136-
handleInputChange(arg.name, value)
137-
}
138-
options={completions[arg.name] || []}
139-
/>
110+
<div className="bg-card rounded-lg shadow">
111+
<div className="p-4 border-b border-gray-200">
112+
<h3 className="font-semibold">
113+
{selectedPrompt ? selectedPrompt.name : "Select a prompt"}
114+
</h3>
115+
</div>
116+
<div className="p-4">
117+
{error ? (
118+
<Alert variant="destructive">
119+
<AlertCircle className="h-4 w-4" />
120+
<AlertTitle>Error</AlertTitle>
121+
<AlertDescription>{error}</AlertDescription>
122+
</Alert>
123+
) : selectedPrompt ? (
124+
<div className="space-y-4">
125+
{selectedPrompt.description && (
126+
<p className="text-sm text-gray-600">
127+
{selectedPrompt.description}
128+
</p>
129+
)}
130+
{selectedPrompt.arguments?.map((arg) => (
131+
<div key={arg.name}>
132+
<Label htmlFor={arg.name}>{arg.name}</Label>
133+
<Combobox
134+
id={arg.name}
135+
placeholder={`Enter ${arg.name}`}
136+
value={promptArgs[arg.name] || ""}
137+
onChange={(value) => handleInputChange(arg.name, value)}
138+
onInputChange={(value) =>
139+
handleInputChange(arg.name, value)
140+
}
141+
options={completions[arg.name] || []}
142+
/>
140143

141-
{arg.description && (
142-
<p className="text-xs text-gray-500 mt-1">
143-
{arg.description}
144-
{arg.required && (
145-
<span className="text-xs mt-1 ml-1">(Required)</span>
146-
)}
147-
</p>
148-
)}
149-
</div>
150-
))}
151-
<Button onClick={handleGetPrompt} className="w-full">
152-
Get Prompt
153-
</Button>
154-
{promptContent && (
155-
<JsonView data={promptContent} withCopyButton={false} />
156-
)}
157-
</div>
158-
) : (
159-
<Alert>
160-
<AlertDescription>
161-
Select a prompt from the list to view and use it
162-
</AlertDescription>
163-
</Alert>
164-
)}
144+
{arg.description && (
145+
<p className="text-xs text-gray-500 mt-1">
146+
{arg.description}
147+
{arg.required && (
148+
<span className="text-xs mt-1 ml-1">(Required)</span>
149+
)}
150+
</p>
151+
)}
152+
</div>
153+
))}
154+
<Button onClick={handleGetPrompt} className="w-full">
155+
Get Prompt
156+
</Button>
157+
{promptContent && (
158+
<JsonView data={promptContent} withCopyButton={false} />
159+
)}
160+
</div>
161+
) : (
162+
<Alert>
163+
<AlertDescription>
164+
Select a prompt from the list to view and use it
165+
</AlertDescription>
166+
</Alert>
167+
)}
168+
</div>
165169
</div>
166170
</div>
167171
</TabsContent>

0 commit comments

Comments
 (0)