@tech_with_shiva_769/generic-dashboard/dist/index.esm.js

A reusable role-based dashboard component library for React

import { jsxs, jsx } from 'react/jsx-runtime';
import { Link, Outlet, Navigate, BrowserRouter, Routes, Route } from 'react-router-dom';
import { createContext, useContext, useState } from 'react';

const Header = () => {
    return (jsxs("header", { className: "bg-gray-800 p-4 flex justify-between items-center shadow", children: [jsx("h1", { className: "text-xl font-bold", children: "Generic Dashboard" }), jsx("div", { className: "flex items-center space-x-4", children: jsx("span", { children: "User" }) })] }));
};

const Sidebar = () => {
    return (jsx("aside", { className: "w-64 bg-gray-800 h-full p-4", children: jsxs("nav", { className: "space-y-2", children: [jsx(Link, { to: "/", className: "block hover:bg-gray-700 p-2 rounded", children: "Home" }), jsx(Link, { to: "/users", className: "block hover:bg-gray-700 p-2 rounded", children: "Users" }), jsx(Link, { to: "/settings", className: "block hover:bg-gray-700 p-2 rounded", children: "Settings" })] }) }));
};

const Layout = ({ children }) => {
    return (jsxs("div", { className: "flex h-screen bg-gray-900 text-white", children: [jsx(Sidebar, {}), jsxs("div", { className: "flex flex-col flex-1", children: [jsx(Header, {}), jsx("main", { className: "p-4 flex-1 overflow-y-auto", children: children })] })] }));
};

const AuthContext = createContext(null);
const AuthProvider = ({ children }) => {
    const [user, setUser] = useState(null);
    const login = (role) => setUser({ role });
    const logout = () => setUser(null);
    return jsx(AuthContext.Provider, { value: { user, login, logout }, children: children });
};
const useAuth = () => useContext(AuthContext);

const ProtectedRoute = ({ roles }) => {
    const { user } = useAuth();
    return user && roles.includes(user.role) ? jsx(Outlet, {}) : jsx(Navigate, { to: "/login" });
};

const RoleBasedRouter = ({ roles }) => {
    return (jsx(BrowserRouter, { children: jsxs(Routes, { children: [jsx(Route, { path: "/admin/*", element: jsx(ProtectedRoute, { roles: ['admin'] }) }), jsx(Route, { path: "/user/*", element: jsx(ProtectedRoute, { roles: ['user'] }) })] }) }));
};

export { AuthProvider, Header, Layout, RoleBasedRouter, Sidebar, useAuth };
//# sourceMappingURL=index.esm.js.map