nt2uicomponentsg

simplecounter

Common header,footer,sidebar package

Install

npm install --save nt2uicomponents

Usage

import React from 'react'
import 'nt2uicomponents/dist/index.css'
import { HeaderComp, SidebarComp, FooterComp } from 'nt2uicomponents'

const App = () => {
  const arr1 = [
    {
      image:
        'https://t4.ftcdn.net/jpg/03/29/60/59/240_F_329605904_DDDVsBOx62iY0IKf9SwcUntRK8brcMyf.jpg',
      name: 'Profile',
      id: 1
    },
    {
      image:
        'https://t4.ftcdn.net/jpg/03/29/60/59/240_F_329605904_DDDVsBOx62iY0IKf9SwcUntRK8brcMyf.jpg',
      name: 'My Account',
      id: 2
    },
    {
      image:
        'https://t4.ftcdn.net/jpg/03/29/60/59/240_F_329605904_DDDVsBOx62iY0IKf9SwcUntRK8brcMyf.jpg',
      name: 'Add another account',
      id: 3
    },
    {
      image:
        'https://as1.ftcdn.net/v2/jpg/03/00/71/16/1000_F_300711632_r2Vh9WjuRdX5CnBFFyq7FUZS1F4EMCk4.jpg',
      name: 'Settings',
      id: 4
    },
    {
      image:
        'https://as2.ftcdn.net/v2/jpg/03/73/49/85/1000_F_373498533_UTbq7bH1inWllxklKFPw5J7ftTDQpOQ9.jpg',
      name: 'Log Out',
      id: 5
    }
  ]

  const arr2 = [
    {
      image: 'https://cdn-icons-png.flaticon.com/128/3489/3489339.png',
      name: 'Ring Buffer',
      id: 1
    },
    {
      image:
        'https://t3.ftcdn.net/jpg/03/00/16/94/240_F_300169453_6xuLDQnnQUHnCJNctiI7Vzx8uJm20xow.jpg',
      name: 'Master Module',
      id: 2
    },
    {
      image: 'https://cdn-icons-png.flaticon.com/128/3489/3489339.png',
      name: 'Test Module 1',
      id: 3
    },
    {
      image:
        'https://t3.ftcdn.net/jpg/03/00/16/94/240_F_300169453_6xuLDQnnQUHnCJNctiI7Vzx8uJm20xow.jpg',
      name: 'Test Module 2',
      id: 4
    },
    {
      image: 'https://cdn-icons-png.flaticon.com/128/3489/3489339.png',
      name: 'Test Module 3',
      id: 5
    }
  ]

  const userDetail = {
    headerImage: 'https://cdn-icons-png.flaticon.com/512/1144/1144760.png'
  }

  const userDetail1 = {
    headerLogo:
      'https://www.prognost.com/wp-content/uploads/2021/06/PROGNOST-logo-250.png',
    url: "https://portal-dev.prognost.info/"
  }

  const handleClick = (row: any) => {
    console.log(row)
    if (row.name === 'Log Out') {
      console.log('logout')
    }
  }

  const hanleSidebarSelect = (row: any) => {
    console.log(row)
  }

  return (
    <div className='flex bg-background-color h-screen overflow-hidden'>
      <SidebarComp
        sidebarMenu={arr2}
        appLogo={userDetail1}
        onMenuClick={hanleSidebarSelect}
      />

      <div className='w-full flex flex-col justify-between'>
        <HeaderComp headerOptions={arr1} userLogo={userDetail} onOptionsClick={handleClick} />
        <FooterComp text='Ⓒ 2022 ABC Terms and conditions*' />
      </div>
    </div>
  )
}

export default App