Create src/components/ProjectCard.tsx

[otto-jacob]

Summary:

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

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

Description

We need to create a new React component called ProjectCard.tsx that will be responsible for displaying project information in a card format. This component will be used in the main dashboard page to show a list of all the current projects that the user is working on. The component should be written in TypeScript using ES6 syntax, such as arrow functions, and styled using Tailwind CSS.

Requirements

1. Create a new file called ProjectCard.tsx in the src/components directory.
2. Import the necessary dependencies at the top of the file:
   • import React from 'react';
   • import { Project } from '~/types';
3. Define a Props interface for this component. It should have a single property called project of type Project (imported from types.ts).
4. Create a functional component named ProjectCard that accepts the Props interface as its props.
5. Inside the component, destructure the project prop to extract the necessary properties: name, description, and createdAt.
6. Use Tailwind CSS to style the component. The card should have a border, some padding, and a shadow. The project name should be displayed as a heading (e.g., using text-xl font-bold), the description should be displayed as a paragraph (e.g., using text-base), and the creation date should be displayed as a smaller text (e.g., using text-sm text-gray-500).
7. Render the following structure inside the component:
   • A div element with appropriate Tailwind CSS classes for the card container.
     • Inside the container div, render an h2 element with the project name.
     • Below the h2 element, render a p element with the project description.
     • Below the p element, render a span element with the formatted creation date (e.g., "Created on MM/DD/YYYY").
8. Export the ProjectCard component as the default export.

Example usage

The ProjectCard component should be used like this:

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

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

function ProjectList() {
  return (
    <div>
      {/* ... */}
      <ProjectCard project={project} />
      {/* ... */}
    </div>
  );
}

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 ~ for the root directory (src). The tsconfig paths configuration is {"~/*": ["./src/*"]}.
• Test the component by rendering it with mock data and ensure it displays the project information correctly.

Please let me know if you have any questions or need further clarification.

[otto-jacob]

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.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
otto-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 6, 2023 11:22pm