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;






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