Checklist

The CheckList component displays list items with colored checkmarks (✓) or crosses (X). Each item can have a callback function for interaction.

Preview

Usage

import { CheckList } from 'components/lib';

function MyComponent({ ...props }) {
  return (
    <CheckList items={[
      { name: 'Item 1', checked: true, color: 'green' },
      { name: 'Item 2', checked: false, color: 'red' },
    ]} />
  );
}

Props

Props	Description	Required	Value
className	custom styles	optional	SCSS or Tailwind
items	list items with checked status, callback and color	required	array [{ checked: boolean, callback: function, color: string }]

Example

import { CheckList } from 'components/lib';

function Example({ ...props }) {

  const items = [
    { name: 'Item 1', checked: true, callback: () => alert('Item 1 clicked'), color: 'green' },
    { name: 'Item 2', checked: false, callback: () => alert('Item 2 clicked'), color: 'red' },
    { name: 'Item 3', checked: true, color: 'blue' },
    { name: 'Item 4', checked: false },
  ];

  return (
    <div>
      <CheckList items={ items } />
    </div>
  );
}

Notes

• The CheckList component uses the Icon and cn functions from 'components/lib'.

• The items prop provides an array of objects with checked status, callback function, and color.

• The className prop allows for custom styling to be applied.

• Each item can have an optional callback function that gets called when the item is clicked.