diff --git a/apps/web/app/admin/TemplateForm.tsx b/apps/web/app/admin/TemplateForm.tsx index dbcf730..b436749 100644 --- a/apps/web/app/admin/TemplateForm.tsx +++ b/apps/web/app/admin/TemplateForm.tsx @@ -8,6 +8,30 @@ interface TemplateFormProps { isEdit?: boolean; } + +const DATABASES = [ + { + name: "PostgreSQL", + logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg" + }, + { + name: "MySQL", + logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg" + }, + { + name: "MongoDB", + logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg" + }, + { + name: "Redis", + logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg" + }, + { + name: "Supabase", + logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/supabase/supabase-original.svg" + } +]; + export default function TemplateForm({ initialData = {}, isEdit = false }: TemplateFormProps) { const router = useRouter(); const [formData, setFormData] = useState({ @@ -20,10 +44,11 @@ export default function TemplateForm({ initialData = {}, isEdit = false }: Templ thumbnailUrl: initialData.thumbnailUrl || '', demoGifUrl: initialData.demoGifUrl || '', cli: initialData.cli || '', - aiPrompt: initialData.aiPrompt || '', + npmPackageUrl: initialData.npmPackageUrl || '', version: initialData.version || '', isPublished: initialData.isPublished || false, + databaseConfigurations: initialData.databaseConfigurations || [], }); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); @@ -36,6 +61,46 @@ export default function TemplateForm({ initialData = {}, isEdit = false }: Templ })); }; + const addDatabase = () => { + setFormData((prev: any) => ({ + ...prev, + databaseConfigurations: [ + ...prev.databaseConfigurations, + { databaseName: '', prompt: '', logo: '' } + ] + })); + }; + + const removeDatabase = (index: number) => { + setFormData((prev: any) => ({ + ...prev, + databaseConfigurations: prev.databaseConfigurations.filter((_: any, i: number) => i !== index) + })); + }; + + const updateDatabaseConfig = (index: number, field: string, value: string) => { + setFormData((prev: any) => { + const newConfigs = [...prev.databaseConfigurations]; + if (field === 'databaseName') { + const db = DATABASES.find(d => d.name === value); + newConfigs[index] = { + ...newConfigs[index], + databaseName: value, + logo: db?.logo || '' + }; + } else { + newConfigs[index] = { + ...newConfigs[index], + [field]: value + }; + } + return { + ...prev, + databaseConfigurations: newConfigs + }; + }); + }; + const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setLoading(true); @@ -212,19 +277,72 @@ export default function TemplateForm({ initialData = {}, isEdit = false }: Templ + +
No database configurations added yet.
+ )}