About

The TaskScheduleCard component is a customizable UI component designed to display task details, including status, creation and edit dates, and action buttons.

Tips/Instructions

1. Usage: Import the TaskScheduleCard component and provide a task object as a prop with the required properties: title, status, details, created, edited, onDetailsClick, and onMarkCompleteClick.
2. Customization: You can easily change the task status color by modifying the status property of the task object.
3. Actions: Use the onDetailsClick and onMarkCompleteClick callback functions to handle button clicks.

import React from 'react';
import TaskScheduleCard from './TaskScheduleCard';

const task = {
    title: 'Create Tailwind Components',
    status: {
        label: 'In Progress',
        color: 'blue',
    },
    details: 'Create a dropdown component',
    created: 'Wed, 16 Oct 2022',
    edited: 'Today, 10:45 am',
    onDetailsClick: () => alert('Details Clicked'),
    onMarkCompleteClick: () => alert('Mark Complete Clicked'),
};

function App() {
    return (
        <div className="App">
            <TaskScheduleCard task={task} />
        </div>
    );
}

export default App;

Files Included

• schedule-task-card-v1.jsx