ntheader v1.0.1

simplecounter

simple counter package for test

Install

npm install --save simplejencounter

Usage

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

const App = () => {

  let arr1 = [
    {
      image: "https://t4.ftcdn.net/jpg/03/29/60/59/240_F_329605904_DDDVsBOx62iY0IKf9SwcUntRK8brcMyf.jpg",
      name: "Profile"
    },
    {
      image: "https://t4.ftcdn.net/jpg/03/29/60/59/240_F_329605904_DDDVsBOx62iY0IKf9SwcUntRK8brcMyf.jpg",
      name: "My Account"
    },
    {
      image: "https://t4.ftcdn.net/jpg/03/29/60/59/240_F_329605904_DDDVsBOx62iY0IKf9SwcUntRK8brcMyf.jpg",
      name: "Add another account"
    },
    {
      image: "https://as1.ftcdn.net/v2/jpg/03/00/71/16/1000_F_300711632_r2Vh9WjuRdX5CnBFFyq7FUZS1F4EMCk4.jpg",
      name: "Settings"
    },
    {
      image: "https://as2.ftcdn.net/v2/jpg/03/73/49/85/1000_F_373498533_UTbq7bH1inWllxklKFPw5J7ftTDQpOQ9.jpg",
      name: "Log Out"
    }
  ]

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

  let obj = {
    headerLogo: "https://cdn-icons-png.flaticon.com/512/1144/1144760.png",
    userMail: "demo_test@gmail.com",
    userFunction: "Speciality",
    headerImage: "https://cdn-icons-png.flaticon.com/512/1144/1144760.png"
  }

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

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

  return (
    <div>
      <HeaderComp arr={arr1} user={obj} onMenuClick={handleClick}/>
      <SidebarComp menu={arr2} onMenuClick={hanleSidebarSelect}/>
      <FooterComp text="Ⓒ 2022 ABC Terms and conditions*" />
    </div>
  )
}

export default App

License

©