Create src/components/ProjectCard.tsx

Summary:

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

Issue: Create a ProjectCard React Component

Description

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

Requirements

Create a new file ProjectCard.tsx inside the src/components directory.
Import the necessary dependencies:
- React from 'react'
- Project type from ~/types
Define a Props interface for this component that includes the following properties:
- project: A Project object that represents the project to be displayed in the card.
Create a functional component ProjectCard that accepts the Props interface as its props.
Inside the component, extract the necessary properties from the project prop, such as name, description, and createdAt.
Render a card element using Tailwind CSS classes for styling. The card should have the following structure:
- A container div with appropriate padding, margin, and border styling.
- A heading element (e.g., h3) that displays the project name.
- A paragraph element that displays the project description.
- A footer element that displays the project creation date in a human-readable format (e.g., "Created on January 1, 2022").
Make sure to apply responsive styles using Tailwind CSS utility classes for different screen sizes.
Export the ProjectCard component as the default export.

Example Usage

Here's an example of how the ProjectCard component will be used:

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

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

function Dashboard() {
  return (
    <div>
      {/* Other dashboard components */}
      <ProjectCard project={project} />
    </div>
  );
}

Notes

Do not import any CSS files directly. Use only Tailwind CSS classes for styling.
Do not use custom CSS classes. Stick to the utility classes provided by Tailwind CSS.
When importing files, use ~ for the root directory (src). The tsconfig paths configuration is set as follows: {"~/*": ["./src/*"]}.
Test the component by rendering it on a sample page with a mock Project object to ensure it displays correctly and is responsive on different screen sizes.

Please submit a pull request with your changes once the component is complete. If you have any questions or need clarification, feel free to reach out.

PioneerSquareLabs / otto-playground