92 lines
2.3 KiB
JavaScript
92 lines
2.3 KiB
JavaScript
import React, { useState } from "react";
|
|
|
|
const ManageProject = () => {
|
|
const [projectData, setProjectData] = useState({
|
|
name: "",
|
|
description: "",
|
|
startDate: "",
|
|
endDate: "",
|
|
});
|
|
const [isProjectCreated, setIsProjectCreated] = useState(false);
|
|
|
|
// Handle input change
|
|
const handleChange = (e) => {
|
|
const { name, value } = e.target;
|
|
setProjectData({ ...projectData, [name]: value });
|
|
};
|
|
|
|
// Handle form submission
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
setIsProjectCreated(true);
|
|
};
|
|
|
|
return (
|
|
<div style={{ padding: "20px" }}>
|
|
{!isProjectCreated ? (
|
|
<form onSubmit={handleSubmit}>
|
|
<h2>Create Project</h2>
|
|
<div>
|
|
<label>Project Name:</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
value={projectData.name}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label>Description:</label>
|
|
<textarea
|
|
name="description"
|
|
value={projectData.description}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label>Start Date:</label>
|
|
<input
|
|
type="date"
|
|
name="startDate"
|
|
value={projectData.startDate}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label>End Date:</label>
|
|
<input
|
|
type="date"
|
|
name="endDate"
|
|
value={projectData.endDate}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<button type="submit">Create Project</button>
|
|
</form>
|
|
) : (
|
|
<div>
|
|
<h2>Project Created Successfully!</h2>
|
|
<p>Project Name: {projectData.name}</p>
|
|
<p>Description: {projectData.description}</p>
|
|
<p>Start Date: {projectData.startDate}</p>
|
|
<p>End Date: {projectData.endDate}</p>
|
|
</div>
|
|
)}
|
|
|
|
{isProjectCreated && (
|
|
<div>
|
|
<h3>Additional Content</h3>
|
|
<p>Now that the project is created, you can access this content.</p>
|
|
{/* Add more content here */}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ManageProject;
|