React / Next UI layout

This package will let use to access to tailwind css UI layout

Prerequisites

This project requires ReactJs (version 18 or later), NodeJs (version 18 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
18.16.1
v8.16.0

Getting Started

These instructions will get you a copy of the package and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installation

To install and set up the library, run:

$ npm install @datumlabsio/react-dashboard-ui-simple

Or if you prefer using Yarn:

$ yarn add @datumlabsio/react-dashboard-ui-simple

Example:

import CustomLayout from '@datumlabsio/react-dashboard-ui-simple'

// Install react-icon package if you want to use these icons
import { BiFolderMinus } from 'react-icons/bi';
import { TbReportAnalytics } from "react-icons/tb";
import { FaQuestionCircle } from 'react-icons/fa';
import { IoMdSettings } from "react-icons/io";

const sidebarData = [
    {
      title: "Dashboard", 
      link: "/",
      icon: <TbReportAnalytics />
    },
    {
      title: "Purchase",
      link: "/purchase-listing",
      icon: <BiFolderMinus />,
    },
    {
      title: "Sales",
      link: "/sales-listing",
      icon: <BiFolderMinus />
    },
    {
      title: "Settings", 
      link: "/settings",
      icon: <IoMdSettings />, 
      gap: true
    },
    {
      title: "Support",
      link: "/support",
      icon: <FaQuestionCircle />
    }
]

const MyComponent = () => {

  return (
    <CustomLayout 
      title="Levis"
      user="Imran"
      sidebarData={sidebarData}
    >
    {children}
    </CustomLayout>
  );
};

The component accepts the following props:

| Name | Type | Default value | Description | | --- | --- | --- | --- | | title | string | '' | Title used as project name | | user | string | '' | Logged In user | | sidebarDate | array | [] | This is an array of objects containing sidebar information. Each object includes the title of the sidebar, the link to navigate to on click, and an icon component. For example, { title: "Dashboard", link: "/", icon: }. |