Create component => src/components/ProjectCard.tsx

[otto-jacob]

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.