Skip to content

Commit d73c5bb

Browse files
sparrow-jssparrow-js
committed
custom template
1 parent 5c61822 commit d73c5bb

File tree

6 files changed

+433
-8
lines changed

6 files changed

+433
-8
lines changed

‎components/components/OutputSettingsSection.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,4 +141,54 @@ function OutputSettingsSection({
141141
);
142142
}
143143

144+
// GeneratedCodeConfig {
145+
// HTML_TAILWIND = "html_tailwind",
146+
// REACT_TAILWIND = "react_tailwind",
147+
// REACT_SHADCN_UI = "react_shadcn_ui",
148+
// BOOTSTRAP = "bootstrap",
149+
// // IONIC_TAILWIND = "ionic_tailwind",
150+
// REACT_ANTD = "react_antd",
151+
// VUE_TAILWIND = 'vue_tailwind',
152+
// VUE_ELEMENT = 'vue_element',
153+
// REACT_NATIVE = 'react_native',
154+
// // VUE_ELEMENT_SYSTEM_PROMPT
155+
// }
156+
157+
export const TechnologyStackList = [
158+
{
159+
label: GeneratedCodeConfig.HTML_TAILWIND,
160+
value: 'HTML + tailwind'
161+
},
162+
{
163+
label: GeneratedCodeConfig.REACT_TAILWIND,
164+
value: 'react + tailwind'
165+
},
166+
{
167+
label: GeneratedCodeConfig.REACT_SHADCN_UI,
168+
value: 'react + shadcn/ui'
169+
},
170+
{
171+
label: GeneratedCodeConfig.REACT_ANTD,
172+
value: 'react + antd'
173+
},
174+
{
175+
label: GeneratedCodeConfig.VUE_TAILWIND,
176+
value: 'vue + tailwind'
177+
},
178+
{
179+
label: GeneratedCodeConfig.VUE_ELEMENT,
180+
value: 'vue + element'
181+
},
182+
{
183+
label: GeneratedCodeConfig.REACT_NATIVE,
184+
value: 'react + native'
185+
},
186+
{
187+
label: GeneratedCodeConfig.BOOTSTRAP,
188+
value: 'bootstrap'
189+
}
190+
]
191+
192+
193+
144194
export default OutputSettingsSection;

‎components/components/TemplatePanel.tsx‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
import { Settings } from "../types";
2+
3+
import {
4+
Dialog,
5+
DialogClose,
6+
DialogContent,
7+
DialogFooter,
8+
DialogHeader,
9+
DialogTitle,
10+
DialogTrigger,
11+
} from "./ui/dialog";
12+
import { Label } from "./ui/label";
13+
import { Textarea } from "./ui/textarea";
14+
import { Input } from "./ui/input";
15+
import {useContext, useState} from 'react';
16+
import {promptContext, PromptType} from '../contexts/PromptContext'
17+
import {GeneratedCodeConfig} from '../types'
18+
import { cloneDeep } from "lodash";
19+
import { FaTrashAlt, FaHammer } from "react-icons/fa";
20+
import classNames from "classnames";
21+
import { useEffect } from "react";
22+
import { toast } from "react-hot-toast";
23+
import {
24+
Select,
25+
SelectContent,
26+
SelectGroup,
27+
SelectItem,
28+
SelectLabel,
29+
SelectTrigger,
30+
SelectValue,
31+
} from "./ui/select"
32+
import {TechnologyStackList} from './OutputSettingsSection';
33+
34+
interface Props {
35+
settings: Settings;
36+
setSettings: (newState: Settings) => void;}
37+
38+
function PromptPanel({settings, setSettings}: Props) {
39+
const [selectedId, setSelectedId] = useState<string>('');
40+
const { promptList, addPrompt, getPromptById, removePrompt } = useContext(promptContext);
41+
const initPrompt = {
42+
id: '',
43+
name: '',
44+
des: '',
45+
imgUrl: '',
46+
prompt: '',
47+
type: GeneratedCodeConfig.REACT_ANTD
48+
}
49+
const [prompt, setPrompt] = useState<PromptType>(cloneDeep(initPrompt));
50+
const [showDialog, setShowDialog] = useState<boolean>(false);
51+
52+
async function addPromptHanler() {
53+
// generatedCodeConfig: "react_tailwind"
54+
prompt.type = settings && settings.generatedCodeConfig;
55+
if (!prompt.prompt) {
56+
toast.error('enter prompt')
57+
return;
58+
}
59+
addPrompt(prompt);
60+
setPrompt(cloneDeep(initPrompt));
61+
}
62+
63+
useEffect(() => {
64+
if (selectedId) {
65+
const prompt = getPromptById(selectedId);
66+
setSettings({
67+
...settings,
68+
promptCode: prompt ? prompt.prompt : '',
69+
});
70+
} else {
71+
setSettings({
72+
...settings,
73+
promptCode: '',
74+
});
75+
}
76+
}, [selectedId]);
77+
78+
useEffect(() => {
79+
setSettings({
80+
...settings,
81+
promptCode: '',
82+
});
83+
84+
setSelectedId('');
85+
86+
}, [settings?.generatedCodeConfig]);
87+
88+
const updatePromptHandler = (e: any, id: string) => {
89+
e.stopPropagation();
90+
setShowDialog(true);
91+
const prompt = getPromptById(id);
92+
prompt && setPrompt(prompt);
93+
}
94+
95+
return (
96+
<div className="bg-white shadow-lg rounded-lg p-4 flex flex-col hover:ring ring-black relative border-dashed border-2 border-gray-300">
97+
<div className="rounded-lg flex justify-center items-center w-full h-full">
98+
<Dialog open={showDialog} onOpenChange={setShowDialog}>
99+
<DialogTrigger
100+
className="w-full h-full"
101+
onClick={() => {
102+
setPrompt(cloneDeep(initPrompt));
103+
}}
104+
>
105+
<div>
106+
+ Add own template
107+
</div>
108+
</DialogTrigger>
109+
<DialogContent>
110+
<DialogHeader>
111+
<DialogTitle className="mb-4">template</DialogTitle>
112+
</DialogHeader>
113+
<div className="flex flex-col space-y-4">
114+
<Label htmlFor="">
115+
<div>stack</div>
116+
</Label>
117+
<Select defaultValue={GeneratedCodeConfig.HTML_TAILWIND}>
118+
<SelectTrigger className="w-[180px]">
119+
<SelectValue placeholder="Select a stack" />
120+
</SelectTrigger>
121+
<SelectContent>
122+
<SelectGroup>
123+
<SelectLabel>stack</SelectLabel>
124+
{TechnologyStackList.map((stack) => {
125+
return (
126+
<SelectItem value={stack.label}>{stack.value}</SelectItem>
127+
)
128+
})}
129+
</SelectGroup>
130+
</SelectContent>
131+
</Select>
132+
</div>
133+
<div className="flex flex-col space-y-4">
134+
<Label htmlFor="inputcode">
135+
<div>input code</div>
136+
</Label>
137+
<Textarea
138+
id="inputcode"
139+
placeholder="inputcode"
140+
value={prompt.prompt}
141+
onChange={(e) => {
142+
setPrompt((s) => ({
143+
...s,
144+
prompt: e.target.value,
145+
}));
146+
}}
147+
></Textarea>
148+
</div>
149+
<div className="flex flex-col space-y-4">
150+
<Label htmlFor="name">
151+
<div>name</div>
152+
</Label>
153+
<Input
154+
id="name"
155+
placeholder="name"
156+
value={prompt.name}
157+
onChange={(e) => {
158+
setPrompt((s) => ({
159+
...s,
160+
name: e.target.value,
161+
}));
162+
}}
163+
/>
164+
</div>
165+
<div className="flex flex-col space-y-4">
166+
<Label htmlFor="des">
167+
<div>des</div>
168+
</Label>
169+
<Input
170+
id="des"
171+
placeholder="des"
172+
value={prompt.des}
173+
onChange={(e) => {
174+
setPrompt((s) => ({
175+
...s,
176+
des: e.target.value,
177+
}));
178+
}}
179+
/>
180+
</div>
181+
<div className="flex flex-col space-y-4">
182+
<Label htmlFor="img-url">
183+
<div>image url</div>
184+
</Label>
185+
<Input
186+
id="img-url"
187+
placeholder="img url"
188+
value={prompt.imgUrl}
189+
onChange={(e) => {
190+
setPrompt((s) => ({
191+
...s,
192+
imgUrl: e.target.value,
193+
}));
194+
}}
195+
/>
196+
</div>
197+
<DialogFooter>
198+
<DialogClose onClick={addPromptHanler}>Save</DialogClose>
199+
</DialogFooter>
200+
</DialogContent>
201+
</Dialog>
202+
</div>
203+
</div>
204+
)
205+
}
206+
207+
export default PromptPanel;

‎components/components/ui/select.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const SelectContent = React.forwardRef<
7878
<SelectPrimitive.Content
7979
ref={ref}
8080
className={cn(
81-
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
81+
"relative z-[900] max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
8282
position === "popper" &&
8383
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
8484
className

0 commit comments

Comments
 (0)