114 lines
4.0 KiB
Cheetah
114 lines
4.0 KiB
Cheetah
import React from 'react';
|
|
{{if .Component.Entity}}import { {{.Component.Entity}} } from '../types/{{.Component.Entity}}';
|
|
{{end}}
|
|
|
|
interface {{.Component.Type | title}}ComponentProps {
|
|
className?: string;
|
|
{{if .Component.Entity}}data?: {{.Component.Entity}}[];
|
|
{{end}}
|
|
}
|
|
|
|
export default function {{.Component.Type | title}}Component({
|
|
className = '',
|
|
{{if .Component.Entity}}data{{end}}
|
|
}: {{.Component.Type | title}}ComponentProps) {
|
|
{{if eq .Component.Type "form"}}
|
|
const [formData, setFormData] = React.useState({});
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
console.log('Form submitted:', formData);
|
|
// TODO: Implement form submission
|
|
};
|
|
|
|
return (
|
|
<div className={`bg-white p-6 rounded-lg shadow ${className}`}>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
{{range .Component.Elements}}{{if .Field}}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{{.Field.Name | title}}
|
|
</label>
|
|
<input
|
|
type="{{if eq .Field.Type "text"}}text{{else if eq .Field.Type "email"}}email{{else}}text{{end}}"
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
onChange={(e) => setFormData({...formData, {{.Field.Name}}: e.target.value})}
|
|
/>
|
|
</div>
|
|
{{end}}{{end}}
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
Submit
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
{{else if eq .Component.Type "table"}}
|
|
return (
|
|
<div className={`bg-white rounded-lg shadow overflow-hidden ${className}`}>
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
{{range .Component.Elements}}{{if .Field}}
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
{{.Field.Name | title}}
|
|
</th>
|
|
{{end}}{{end}}
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{data?.map((item, index) => (
|
|
<tr key={index}>
|
|
{{range .Component.Elements}}{{if .Field}}
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{item.{{.Field.Name}}}
|
|
</td>
|
|
{{end}}{{end}}
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
|
<button className="text-blue-600 hover:text-blue-900 mr-2">
|
|
Edit
|
|
</button>
|
|
<button className="text-red-600 hover:text-red-900">
|
|
Delete
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
{{else if eq .Component.Type "list"}}
|
|
return (
|
|
<div className={`space-y-4 ${className}`}>
|
|
{data?.map((item, index) => (
|
|
<div key={index} className="bg-white p-6 rounded-lg shadow">
|
|
{{range .Component.Elements}}{{if .Field}}
|
|
<div className="mb-2">
|
|
<span className="font-semibold text-gray-700">{{.Field.Name | title}}:</span>
|
|
<span className="ml-2 text-gray-900">{item.{{.Field.Name}}}</span>
|
|
</div>
|
|
{{end}}{{end}}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
{{else}}
|
|
return (
|
|
<div className={`bg-white p-6 rounded-lg shadow ${className}`}>
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
|
{{.Component.Type | title}} Component
|
|
</h3>
|
|
<p className="text-gray-600">
|
|
This is a {{.Component.Type}} component. Add your custom implementation here.
|
|
</p>
|
|
</div>
|
|
);
|
|
{{end}}
|
|
}
|