ProjectCard

A reusable React component for displaying project information in a card layout using Material-UI (MUI).

This component can be used in any React project that uses MUI.

Features

• Displays project title, description, owner, tags, progress, and health.
• Checkbox for selection (useful for bulk actions).
• Buttons for edit, view, delete, and recover actions.
• Color-coded health indicator.
• Fully responsive card layout.

Installation

npm install project-card

### Make sure your project has the following peer dependencies installed:
npm install react @mui/material @mui/icons-material

### Usage
import ProjectCard from 'project-card';

function App() {
  const project = {
    id: 1,
    title: "Project Alpha",
    short_description: "A short description of the project",
    owner: "John Doe",
    tags: ["React", "MUI"],
    progress: 75,
    health: "green",
    status_display: "In Progress",
    deleted: false
  };

  const handleView = (project) => console.log("View", project);
  const handleEdit = (project) => console.log("Edit", project);
  const handleDelete = (id) => console.log("Delete", id);
  const handleRecover = (id) => console.log("Recover", id);
  const handleSelect = (id) => console.log("Select", id);

  return (
    <ProjectCard
      project={project}
      onClick={handleView}
      onEdit={handleEdit}
      onDelete={handleDelete}
      onRecover={handleRecover}
      onSelect={handleSelect}
      selected={false}
    />
  );
}