List

List views are a great way to show a list of tasks grouped by status and ranked by priority.

Installation

npx love-ui@latest add list

Usage

import { ListProvider, ListGroup, ListHeader, ListItems, ListItem } from "@/components/list"

<ListProvider>
  {statuses.map((status) => (
    <ListGroup key={status.id} id={status.id}>
      <ListHeader name={status.name} color={status.color} />
      <ListItems>
        {items
          .filter((item) => item.status.id === status.id)
          .map((item) => (
            <ListItem key={item.id} id={item.id} name={item.name} />
          ))}
      </ListItems>
    </ListGroup>
  ))}
</ListProvider>

Features

Drag and drop items between groups
Customize the item contents

Examples

Simple version

Planned

Architect ubiquitous AI

Incubate end-to-end infrastructures

Harness cutting-edge users

Incubate enterprise niches

In Progress

Evolve cross-media architectures

Simplify plug-and-play ROI

Scale magnetic technologies

Strategize cross-platform web services

Facilitate impactful platforms

Deliver innovative ROI

Harness interactive lifetime value

Done

Utilize mission-critical methodologies

Collaborate efficient e-commerce

Monetize dynamic partnerships

Expedite value-added methodologies

Mesh rich platforms

Enable out-of-the-box supply-chains

Target scalable content

Syndicate sustainable infrastructures

Implement holistic smart contracts

"use client";

import { faker } from "@faker-js/faker";
import type { DragEndEvent } from "../../../../../packages/list";
import {
  ListGroup,
  ListHeader,
  ListItem,
  ListItems,
  ListProvider,
} from "../../../../../packages/list";
import { useState } from "react";

// Seed faker to ensure consistent data between server and client
faker.seed(123);

const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);

const statuses = [
  { id: faker.string.uuid(), name: "Planned", color: "#6B7280" },
  { id: faker.string.uuid(), name: "In Progress", color: "#F59E0B" },
  { id: faker.string.uuid(), name: "Done", color: "#10B981" },
];

const users = Array.from({ length: 4 })
  .fill(null)
  .map(() => ({
    id: faker.string.uuid(),
    name: faker.person.fullName(),
    image: faker.image.avatar(),
  }));

const exampleFeatures = Array.from({ length: 20 })
  .fill(null)
  .map(() => ({
    id: faker.string.uuid(),
    name: capitalize(faker.company.buzzPhrase()),
    startAt: faker.date.past({ years: 0.5, refDate: new Date() }),
    endAt: faker.date.future({ years: 0.5, refDate: new Date() }),
    status: faker.helpers.arrayElement(statuses),
    owner: faker.helpers.arrayElement(users),
  }));

const Example = () => {
  const [features, setFeatures] = useState(exampleFeatures);

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;

    if (!over) {
      return;
    }

    const status = statuses.find((status) => status.name === over.id);

    if (!status) {
      return;
    }

    setFeatures(
      features.map((feature) => {
        if (feature.id === active.id) {
          return { ...feature, status };
        }

        return feature;
      })
    );
  };

  return (
    <ListProvider onDragEnd={handleDragEnd}>
      {statuses.map((status) => (
        <ListGroup id={status.name} key={status.name}>
          <ListHeader color={status.color} name={status.name} />
          <ListItems>
            {features
              .filter((feature) => feature.status.name === status.name)
              .map((feature, index) => (
                <ListItem
                  id={feature.id}
                  index={index}
                  key={feature.id}
                  name={feature.name}
                  parent={feature.status.name}
                />
              ))}
          </ListItems>
        </ListGroup>
      ))}
    </ListProvider>
  );
};

export default Example;

Kanban Table