Create component => src/components/ProjectStatus.tsx

[otto-jacob]

Create a React component for src/components/ProjectStatus.tsx. Here are the instructions:

Issue: Create a ProjectStatus.tsx React component for displaying project status

Background

We need a new React component called ProjectStatus.tsx to display the status of a project. This component will be used in the project page to show the current status of Otto and the progress of the project. The component should be written in TypeScript using ES6 syntax like arrow functions and should utilize Tailwind CSS for styling.

Task

Create a new React component called ProjectStatus.tsx in the src/components directory. This component will receive a project prop of type Project (from the types.ts file) and display the project status information.

Instructions

1. In the src/components directory, create a new file called ProjectStatus.tsx.

2. Import the necessary libraries and types at the top of the file:

   import React from "react";
   import { Project } from "~/types";

3. Define the Props interface for this component:

   interface Props {
     project: Project;
   }

4. Create a functional component called ProjectStatus that takes the Props interface as its argument:

   const ProjectStatus: React.FC<Props> = ({ project }) => {
     // Component logic and rendering here
   };

5. Inside the ProjectStatus component, extract the relevant information from the project prop:

   const { name, description, createdAt, updatedAt } = project;

6. Render the project status information using Tailwind CSS for styling. Display the project name, description, creation date, and last update date in a visually appealing manner. For example:

   return (
     <div className="bg-white shadow-md rounded-lg p-6">
       <h2 className="text-xl font-semibold mb-2">Project Status</h2>
       <div className="space-y-4">
         <div>
           <h3 className="font-medium text-gray-500">Name</h3>
           <p className="text-gray-800">{name}</p>
         </div>
         <div>
           <h3 className="font-medium text-gray-500">Description</h3>
           <p className="text-gray-800">{description}</p>
         </div>
         <div>
           <h3 className="font-medium text-gray-500">Created At</h3>
           <p className="text-gray-800">{createdAt.toLocaleDateString()}</p>
         </div>
         <div>
           <h3 className="font-medium text-gray-500">Last Updated</h3>
           <p className="text-gray-800">{updatedAt.toLocaleDateString()}</p>
         </div>
       </div>
     </div>
   );

7. Export the ProjectStatus component as the default export:

   export default ProjectStatus;

Notes

• Make sure to use only Tailwind CSS classes for styling. Do not import any CSS files directly or use custom CSS classes.
• When importing files, use the ~ alias for the root directory (src). The tsconfig paths configuration is already set up: {"~/*": ["./src/*"]}.
• Test the component by including it in a parent component and passing a project prop of type Project.

Once the ProjectStatus.tsx component is complete, submit a pull request for review.