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

npm install @sarthakb009/queue

Peer Dependencies

Make sure you have these installed in your project:

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

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

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

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

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:

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