import { useState } from "react";
import axios from "axios";

function ProjectSearch() {
const [projectId, setProjectId] = useState("");
const [project, setProject] = useState(null);
const [error, setError] = useState("");

const fetchProject = async () => {
try {
setError("");
const res = await axios.get(`http://localhost:8000/projects/${projectId}`);
setProject(res.data);
} catch (err) {
setProject(null);
setError("Project not found");
}
};

return (
<div style={{ padding: 20 }}>
<h2>Search Project</h2>

<input
type="text"
placeholder="Enter Project ID"
value={projectId}
onChange={(e) => setProjectId(e.target.value)}
/>

<button onClick={fetchProject} style={{ marginLeft: 10 }}>
Submit
</button>

{error && <p style={{ color: "red" }}>{error}</p>}

{project && (
<div style={{ marginTop: 20 }}>
<h3>Project Information</h3>
<p><strong>ID:</strong> {project.id}</p>
<p><strong>Name:</strong> {project.name}</p>
<p><strong>Description:</strong> {project.description}</p>
</div>
)}
</div>
);
}

export default ProjectSearch;




###################################################



import ProjectSearch from "./ProjectSearch";

function App() {
return (
<div>
<ProjectSearch />
</div>
);
}

export default App;






#####################################################