Create src/components/ProjectCard.tsx

[kleneway]

Summary:

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

Issue: Create ProjectCard.tsx React component for displaying project information

Background

We need a new React component called ProjectCard.tsx to display project information in a card format. This component will be used on the main dashboard page to show a list of all the current projects that the user is working on.

Task

Create a new React component called ProjectCard.tsx using TypeScript and ES6 syntax (arrow functions). This component should accept necessary props to display the project information and use Tailwind CSS for styling.

Requirements

1. Create a new file ProjectCard.tsx in the src/components directory.

2. Import the necessary dependencies at the top of the file:

   • Import React and the FC type from 'react'.
   • Import the Project type from the types.ts file. Use the following import statement:

     import { Project } from '~/types';

3. Define the Props interface for this component. It should have a single property project of type Project.

4. Create a functional component ProjectCard with the following structure:

   • Use the FC type from 'react' and the Props interface for typing the component.
   • Destructure the project prop from the props.
   • Render a div with the class bg-white shadow-md rounded-lg p-4 as the main container.
   • Inside the main container, render the following elements:
     • An h2 element with the class text-xl font-semibold mb-2 for the project name. Use the project.name property as the content.
     • A p element with the class text-gray-600 for the project description. Use the project.description property as the content. If the description is not available, display the text "No description provided."

5. Export the ProjectCard component as the default export.

Example usage

The ProjectCard component will be used like this:

import ProjectCard from '~/components/ProjectCard';
import { Project } from '~/types';

const project: Project = {
  // ...project data
};

const App = () => {
  return (
    <div>
      <ProjectCard project={project} />
    </div>
  );
};

export default App;

Notes

• Use only Tailwind CSS classes for styling. Do not import any CSS files directly or use custom CSS classes.
• When importing files, use ~ for the root directory (src). The tsconfig paths configuration is {"~/*": ["./src/*"]}.
• Be sure to test the component with different project data to ensure it renders correctly and handles missing descriptions gracefully.

[kleneway]

Hello human! 👋

This PR was created by Otto to address the issue Create src/components/ProjectCard.tsx

Next Steps

1. Please review the PR carefully. Auto-generated code can and will contain subtle bugs and mistakes.

2. If you identify code that needs to be changed, please reject the PR with a specific reason. Be as detailed as possible in your comments. Otto will take these comments, make changes to the code and push up changes. Please note that this process will take a few minutes.

3. Once the code looks good, approve the PR and merge the code.