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

A reusable role-based dashboard component library for React

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var reactRouterDom = require('react-router-dom');
var react = require('react');

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

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

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

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

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

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

exports.AuthProvider = AuthProvider;
exports.Header = Header;
exports.Layout = Layout;
exports.RoleBasedRouter = RoleBasedRouter;
exports.Sidebar = Sidebar;
exports.useAuth = useAuth;
//# sourceMappingURL=index.cjs.js.map