npm package: @licuido-ui/ui_list-card-view
Description: The `ListCardView` component is a React component designed for rendering a list of cards, each containing specific data elements. It is part of a larger UI library and is used to display a collection of cards with a common header. Each card in the list re
Latest version: 3.0.1

# List Card View

The `ListCardView` component is a React component designed for rendering a list of cards, each containing specific data elements. It is part of a larger UI library and is used to display a collection of cards with a common header. Each card in the list represents an item with various details such as an image, user name, status, date, and a customizable button.

### Author

- @author Vigneshwaran <vigneshwaran@crayond.co>

## Link

[Story Book Link listCardView](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_list-card-view
```

## Import component

```jsx
import { ListCardView } from '@licuido-ui/ui_list-card-view';
```

## Usage

```jsx
<ListCardView
      headerText=""
      selectValue=""
      SelectOptions={[]}
      listCardData={[]}
      popoverContentData={popoverContentData}={[]}
      handleChange={(event) => console.log('Select changed:', event)}
      handleMoreClick={() => console.log('More button clicked')}
      handleMoveClick={() => console.log('Move button clicked')}
      handleButtonClick={() => console.log('Card button clicked')}
      handlePopOverClose={() => console.log('Card button clicked')}
      handlePopoverContentClick={() => console.log('Card button clicked')}
      innerCardWidth=''
      addHeaderStyle={}
      selectFontSize=''
      selectBorderRadius=''
      selectBorderSize=''
      selectBorderColor=''
      selectWidth=''
      selectHeight=''
      addImageStyle={}
      addUserNameStyle={}
      addStatusStyle={}
      addDateStyle={}
      innerCardBorder=''
      innerCardBorderColor=''
      showMoveIcon={true}
      showMoreIcon={true}
      showDropdown= {true}
      popOverOpen= {false}
      popOverState= {null}
      popOverId= ''
      popOverAnchorOrigin= {
        vertical: 'bottom',
        horizontal: 'left',
  }
    />
```
## Image

![alt text](./newListCardView.png)

## Props

| Prop                        | Type                                                   | Default Value                                             | Description                                                 |
| --------------------------- | ------------------------------------------------------ | --------------------------------------------------------- | ----------------------------------------------------------- |
| `className`                 | `string`                                               | `''`                                                      | Additional CSS class names for styling the component.       |
| `sx`                        | `SxProps<Theme>`                                       | `{}`                                                      | The style object or function for customizing the component. |
| `headerText`                | `string`                                               | `'Pending Requests'`                                      | Text to be displayed in the header of the component.        |
| `selectValue`               | `string`                                               | `'Pending'`                                               | The current value of the select input.                      |
| `SelectOptions`             | `optionsInterface[]`                                   | `[]`                                                      | Array of options for the select input.                      |
| `listCardData`              | `ListCardInterface[]`                                  | `[]`                                                      | Array of objects containing data for each card.             |
| `popoverContentData`        | `PopOverContent[]`                                     | `['Edit', 'Delete', 'View']`                              | Array of strings representing the content for the popover.  |
| `handleChange`              | `(event: SelectChangeEvent<unknown>) => void`          | `() => null`                                              | Callback function triggered on select input value change.   |
| `handleMoreClick`           | `(event: React.MouseEvent<HTMLButtonElement>) => void` | `() => null`                                              | Callback function triggered on "More" button click.         |
| `handleMoveClick`           | `() => void`                                           | `() => null`                                              | Callback function triggered on "Move" button click.         |
| `handleButtonClick`         | `() => void`                                           | `() => null`                                              | Callback function triggered on card button click.           |
| `handlePopOverClose`        | `() => void`                                           | `() => null`                                              | Callback function triggered on popover close.               |
| `handlePopoverContentClick` | `(content: string) => void`                            | `() => null`                                              | Callback function triggered on popover content click.       |
| `innerCardWidth`            | `string`                                               | `'381px'`                                                 | Width of the inner card.                                    |
| `addHeaderStyle`            | `SxProps<Theme>`                                       | `{ fontSize: '16px', fontWeight: 600, color: '#02111A' }` | Additional styles for the header.                           |
| `selectFontSize`            | `string`                                               | `'12px'`                                                  | Font size for the select input.                             |
| `selectBorderRadius`        | `string`                                               | `'6px'`                                                   | Border radius for the select input.                         |
| `selectBorderSize`          | `string`                                               | `'1.5px solid'`                                           | Border size and style for the select input.                 |
| `selectBorderColor`         | `string`                                               | `'#0C356A'`                                               | Border color for the select input.                          |
| `selectWidth`               | `string`                                               | `'81px'`                                                  | Width of the select input.                                  |
| `selectHeight`              | `string`                                               | `'24px'`                                                  | Height of the select input.                                 |
| `addImageStyle`             | `SxProps<Theme>`                                       | `{ width: '40px', height: '40px' }`                       | Additional styles for the card image.                       |
| `addUserNameStyle`          | `SxProps<Theme>`                                       | `{ fontSize: '14px', fontWeight: 600, color: '#02111A' }` | Additional styles for the user name.                        |
| `addStatusStyle`            | `SxProps<Theme>`                                       | `{ fontSize: '14px', fontWeight: 400, color: '#4E585E' }` | Additional styles for the status.                           |
| `addDateStyle`              | `SxProps<Theme>`                                       | `{ fontSize: '14px', fontWeight: 400, color: '#4E585E' }` | Additional styles for the date.                             |
| `addButtonTextStyle`        | `SxProps<Theme>`                                       | `{ fontSize: '12px', fontWeight: 600, color: '#02111A' }` | Additional styles for the button text.                      |
| `innerCardBorder`           | `string`                                               | `'1px solid'`                                             | Border size and style for the inner card.                   |
| `innerCardBorderColor`      | `string`                                               | `'#D9DBDD'`                                               | Border color for the inner card.                            |
| `showMoveIcon`              | `boolean`                                              | `true`                                                    | Whether to show the "Move" icon.                            |
| `showMoreIcon`              | `boolean`                                              | `true`                                                    | Whether to show the "More" icon.                            |
| `showDropdown`              | `boolean`                                              | `true`                                                    | Whether to show the dropdown.                               |
| `popOverId`                 | `string`                                               | `'simple-popover'`                                        | ID for the popover.                                         |
| `popOverOpen`               | `boolean                                               | undefined`                                                | `false`                                                     | State for the popover open/close. |
| `popOverState`              | `HTMLButtonElement                                     | null`                                                     | `null`                                                      | State for the popover.            |
| `popOverAnchorOrigin`       | `PopOverAnchorOrigin`                                  | `{ vertical: 'bottom', horizontal: 'left' }`              | Anchor origin for the popover.                              |
| `stickyHeader`              | boolean                                                | true                                                      | Whether to make the header position sticky or not.          |