@licuido-ui/ui_list-card-view NPM

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

PlayGround

Try it have a fun codeBox

Installation

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

Import component

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

Usage

<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

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.

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/react

3.0.1

8 months ago