Viewer

The Viewer component is a versatile and customizable UI element designed to showcase user profiles, information, or forms with a modern and consistent look. It's built using the Material-UI library and offers flexible configuration options to suit a variety of use cases.

npm i  @licuido-ui/ui_viewer

Author

• @author Akila K [email protected]

Link

Story Book Link EmptyPage

PlayGround

Try it have a fun codeBox

Import component

import { Viewer } from '@licuido-ui/ui_viewer';

Usage

<Viewer   rootStyle= { backgroundColor: '' }
    headerOptions= {
      title: 'My Profile',
      fontSize: '20px',
      fontWeight: 'bold',
      color: '#111111',
      titleBoxStyle: { backgroundColor: '' },
    }
    viewBody= {
      viewBodyStyle: {},
      gridStyle: { justifyContent: 'center' },
      profileimage: {
        breakpoints: { xs: 12, sm: 3.5, md: 3, lg: 2 },
        profileImgStyle: {},
        imgSrc: '',
        variant: 'rounded',
        profileimgContainer: {},
        avatarconStyle: {},
        profileImgEditStyle: {},
        profileImgEditIcon: <EditIcon color='#fff' />,
        onClick: () => {
          console.log('Profile Edit');
        },
      },
      form: {
        breakpoints: { xs: 12, sm: 6, md: 6, lg: 4.5, xl: 4.5 },
        title: 'Michael Bloomberg',
        subTitle: 'Male',
        description: 'Senior Graphic Designer',
        titleStyle: {},
        descriptionStyle: {},
        subTitleStyle: {},
        formContainer: {},
        formList: [
          {
            icon: <DocsIcon color='#665CD7' />,
            label: 'Email',
            value: '[email protected]',
            breakPoint: {
              xs: 12,
              sm: 12,
              md: 12,
              lg: 12,
              lx: 12,
            },
            iconStyle: { backgroundColor: '#FAFAFA' },
            labelStyle: {},
            valueStyle: {},
            listWraper: { py: 1 },
          },
          {
            icon: <DocsIcon />,
            label: 'Date Of Birth',
            value: '01/06/1990',
            breakPoint: {
              xs: 12,
              sm: 12,
              md: 12,
              lg: 12,
              lx: 12,
            },
            iconStyle: { backgroundColor: '#FAFAFA' },
            labelStyle: {},
            valueStyle: {},
            listWraper: { py: 1 },
          },
          {
            icon: <DocsIcon />,
            label: 'Mobile Number',
            value: '+1 9999999999',
            breakPoint: {
              xs: 12,
              sm: 12,
              md: 12,
              lg: 12,
              lx: 12,
            },
            iconStyle: { backgroundColor: '#FAFAFA' },
            labelStyle: {},
            valueStyle: {},
            listWraper: { py: 1 },
          },
          {
            icon: <DocsIcon />,
            label: 'Desgination',
            value: 'Developer',
            breakPoint: {
              xs: 12,
              sm: 12,
              md: 12,
              lg: 12,
              lx: 12,
            },
            iconStyle: { backgroundColor: '#FAFAFA' },
            labelStyle: {},
            valueStyle: {},
            listWraper: { py: 1 },
          },
        ],
      },
      btnList: [
        {
          buttonText: 'Edit',
          onClick: () => {
            console.log('Edit');
          },
          breakPoint: {
            xs: 12,
            sm: 12,
            md: 12,
            lg: 12,
            lx: 12,
          },
          btnStyle: { backgroundColor: '#665CD7' },
          btnListConStyle: { mt: 3, display: 'flex', justifyContent: 'center' },
        },
      ],
    } />

Image

Variant1

Variant2

Props

| Prop Name | Type | Description | Default Value | | --------------- | -------------- | --------------------------------------------------------- | ------------- | | id | string | A unique identifier for the component. | 'viewer' | | className | string | Overrides or extends the applied styles. | '' | | sx | SxProps | System overrides and additional CSS styles. | {} | | rootStyle | object | Wrapping style for the viewer. | {} | | viewBody | object | Configuration for the content displayed below the header. | {} | | headerOptions | object | Header properties for the profile viewer. | {} |

viewBody Configuration:

| Prop Name | Type | Description | Default Value | | --------------- | ------ | ---------------------------------------------------------------- | ------------- | | viewBodyStyle | object | Style for the content area. | {} | | gridStyle | object | Style for the grid splitting the profile image and content area. | {} | | profileimage | object | Configuration for the profile image section. | {} | | form | object | Configuration for the profile detail area. | {} | | btnList | array | List of buttons to be displayed. | [] |

profileimage Configuration:

| Prop Name | Type | Description | Default Value | | --------------------- | ----------------------------------- | ------------------------------------------------- | --------------- | | breakpoints | object | Breakpoints for different screen sizes. | {} | | profileImgStyle | object | Styles for the profile image. | {} | | imgSrc | string or any | Path or source of the profile image. | '' | | variant | 'circular' | 'rounded' | 'square' | Profile image variant. | 'rounded' | | profileimgContainer | object | Container styles for the profile image. | {} | | profileImgEditIcon | React.ReactNode or any | Icon for editing or removing the profile image. | <></> | | customComp | React.ReactNode or any | Custom component to be displayed. | <></> | | avatarconStyle | object | Styles for the avatar container. | {} | | profileImgEditStyle | object | Styles for the background of the edit icon. | {} | | onClick | () => void | Callback fired when the profile image is clicked. | () => undefined |

form Configuration:

| Prop Name | Type | Description | Default Value | | ------------------- | ------ | ---------------------------------------------- | ------------- | | breakpoints | object | Breakpoints for different screen sizes. | {} | | title | string | Profile title. | '' | | subTitle | string | Profile subtitle. | '' | | description | string | Description of the profile. | '' | | titleStyle | object | Styles for the title. | {} | | descriptionStyle | object | Styles for the description. | {} | | subTitleStyle | object | Styles for the subtitle. | {} | | formContainer | object | Overall container styles for the form content. | {} | | formListContainer | object | Container styles for the list of profile data. | {} | | formList | array | List of profile data like name, email, etc. | [] |

formList Configuration:

| Prop Name | Type | Description | Default Value | | ------------ | ---------------------- | --------------------------------------- | ------------- | | breakPoint | object | Breakpoints for different screen sizes. | {} | | icon | React.ReactNode or any | Icon for the profile data. | <></> | | iconStyle | object | Styles for the icon. | {} | | label | string | Label for the profile data. | '' | | labelStyle | object | Styles for the label. | {} | | value | string | Value for the profile data. | '' | | valueStyle | object | Styles for the value. | {} | | customComp | React.ReactNode or any | Custom component to be displayed. | <></> |

btnList Configuration:

| Prop Name | Type | Description | Default Value | | ------------ | ------------ | -------------------------------------------------------- | ----------------- | | breakPoint | object | Breakpoints for different screen sizes. | {} | | buttonText | string | Text to display on the button. | '' | | btnStyle | object | Styles for the button. | {} | | onClick | () => void | Callback function to execute when the button is clicked. | () => undefined |

headerOptions Configuration:

| Prop Name | Type | Description | Default Value | | --------------- | ------ | ---------------------------------- | ------------- | | title | string | Main title for the profile viewer. | '' | | fontSize | string | Font size for the header. | '' | | fontWeight | string | Font weight for the header. | '' | | color | string | Color of the header. | '' | | titleBoxStyle | object | Header container style. | {} |