npm package: @sarthakb009/queue
Description: Queue
Author: Sarthak
Latest version: 1.0.5

# Queue

A React component for displaying a queue of tasks or items with status indicators (processing, pending, completed, failed). Perfect for task queues, job lists, or processing status displays. Built with TypeScript and GSAP animations.

## Installation

```bash
npm install @sarthakb009/queue
```

## Peer Dependencies

Make sure you have these installed in your project:

```bash
npm install react react-dom lucide-react gsap @gsap/react
```

Required versions:
- `react` ^18.0.0
- `react-dom` ^18.0.0
- `lucide-react` ^0.294.0
- `gsap` ^3.13.0
- `@gsap/react` ^2.1.2

## Usage

### Basic Example

```tsx
import { Queue } from '@sarthakb009/queue';

function App() {
  const items = [
    {
      id: 1,
      task: 'Process image upload',
      status: 'processing',
      time: '2 mins ago',
    },
    {
      id: 2,
      task: 'Generate report',
      status: 'pending',
      time: '5 mins ago',
    },
    {
      id: 3,
      task: 'Send email notification',
      status: 'completed',
      time: '10 mins ago',
    },
    {
      id: 4,
      task: 'Update database',
      status: 'failed',
      time: '15 mins ago',
    },
  ];

  return (
    <Queue
      items={items}
      title="Task Queue"
    />
  );
}
```

### With Callbacks

```tsx
import { Queue } from '@sarthakb009/queue';

function App() {
  return (
    <Queue
      items={items}
      title="Processing Queue"
      onItemClick={(item) => {
        console.log('Item clicked:', item);
      }}
      onItemMenuClick={(item) => {
        console.log('Menu clicked for:', item);
      }}
    />
  );
}
```

### Different Statuses

```tsx
import { Queue } from '@sarthakb009/queue';

function App() {
  const items = [
    {
      id: 1,
      task: 'Currently processing...',
      status: 'processing', // Shows spinner
      time: 'Just now',
    },
    {
      id: 2,
      task: 'Waiting in queue',
      status: 'pending', // Shows clock icon
      time: '1 min ago',
    },
    {
      id: 3,
      task: 'Successfully completed',
      status: 'completed', // Shows checkmark
      time: '5 mins ago',
    },
    {
      id: 4,
      task: 'Failed to process',
      status: 'failed', // Shows X icon
      time: '10 mins ago',
    },
  ];

  return <Queue items={items} />;
}
```

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `items` | `QueueItem[]` | `undefined` | No | Array of queue items to display |
| `title` | `string` | `undefined` | No | Header title text |
| `onItemClick` | `(item: QueueItem) => void` | `undefined` | No | Callback fired when an item is clicked |
| `onItemMenuClick` | `(item: QueueItem) => void` | `undefined` | No | Callback fired when menu button is clicked |
| `className` | `string` | `undefined` | No | Additional CSS classes for container |

## QueueItem Type

```tsx
interface QueueItem {
  id: number | string;
  task: string;
  status: 'processing' | 'pending' | 'completed' | 'failed';
  time: string;
}
```

## Status Types

- **`processing`**: Shows animated spinner icon (blue)
- **`pending`**: Shows clock icon (gray)
- **`completed`**: Shows checkmark icon (green)
- **`failed`**: Shows X icon (red)

## Features

- ✅ **Status Indicators**: Visual icons for each status type
- ✅ **Item Count**: Shows count of items in header
- ✅ **Hover Interactions**: Menu button appears on hover
- ✅ **Click Handlers**: Support for item and menu clicks
- ✅ **Smooth Animations**: GSAP-powered entrance animations
- ✅ **TypeScript**: Full TypeScript support with exported types
- ✅ **Accessible**: Proper ARIA labels and semantic HTML

## TypeScript

The component is written in TypeScript and exports all types:

```tsx
import { Queue, QueueProps, QueueItem } from '@sarthakb009/queue';

const item: QueueItem = {
  id: 1,
  task: 'Process data',
  status: 'processing',
  time: '2 mins ago',
};

const props: QueueProps = {
  items: [item],
  title: 'Task Queue',
};
```

## License

MIT