()
14 |
15 | React.useEffect(() => {
16 | const singleUserApiUrl = `https://jsonplaceholder.typicode.com/users/${params.userId}`
17 | //fetch users from json placeholder
18 | fetch(singleUserApiUrl)
19 | .then((response) =>
20 | response.json(),
21 | )
22 | .then((json) => setUser(json))
23 | }, [params])
24 |
25 | return (
26 | <>
27 | Go back
28 | {user && (
29 |
32 |
33 | Name:
34 |
35 | {user.name}
36 |
37 |
38 |
39 |
40 | Email:
41 |
42 | {user.email}
43 |
44 |
45 |
46 | Phone:
47 |
48 | {user.phone}
49 |
50 |
51 |
52 | Website:
53 |
54 | {user.website}
55 |
56 |
57 |
7 |
Welcome to Tab1 page
8 |
9 | Add a new user
10 |
11 |
12 | )
13 | }
14 |
15 | export default Tab1
16 |
--------------------------------------------------------------------------------
/src/components/Tab2.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Tab2=() =>{
4 | return
5 |
Welcome to Tab2 page
6 | ;
7 | }
8 |
9 | export default Tab2;
10 |
--------------------------------------------------------------------------------
/src/components/Tab3.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import WithPermission from "./WithPermission"
3 |
4 | const Tab3 = () => {
5 | return (
6 |
7 |
Welcome to Tab3 page
8 |
9 | Welcome Admin!
10 |
11 |
12 |
13 | )
14 | }
15 |
16 | export default Tab3
17 |
--------------------------------------------------------------------------------
/src/components/TabInner.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const TabInner=() =>{
4 | return
5 |
Welcome to TabInner page
6 | ;
7 | }
8 |
9 | export default TabInner;
10 |
--------------------------------------------------------------------------------
/src/components/TabNav.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Link, useLocation} from 'react-router-dom'
3 |
4 | const TabNav=() =>{
5 |
6 | const location = useLocation()
7 |
8 | return
9 | Tab 1
10 | Tab 2
11 | Tab 3
12 |
;
13 | }
14 |
15 | export default TabNav;
16 |
--------------------------------------------------------------------------------
/src/components/Tabs.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import {Outlet} from "react-router-dom"
3 |
4 | import TavNav from "./TabNav"
5 |
6 | const Tabs = (props: any) => {
7 | const {userName} = props.props
8 | return (
9 |
10 |
Tabs demo page {userName}
11 |
12 | {/** Tab navigation */}
13 |
14 | {/** Tab inner content */}
15 |
16 |
17 | )
18 | }
19 |
20 | export default Tabs
21 |
--------------------------------------------------------------------------------
/src/components/Users.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import {Link} from "react-router-dom"
3 |
4 | export type UserType = {
5 | id: number
6 | name: string
7 | email: string
8 | phone: string
9 | website: string
10 | }
11 | type UsersType = Array
12 |
13 | const Users = (props: any) => {
14 | const [users, setUsers] = React.useState([])
15 |
16 | React.useEffect(() => {
17 | //fetch users from json placeholder
18 | fetch("https://jsonplaceholder.typicode.com/users")
19 | .then((response) => response.json())
20 | .then((json) => setUsers(json))
21 | }, [])
22 |
23 | return (
24 |
25 |
All users
26 |
27 | Add a new user
28 |
29 |
30 | {users &&
31 | users.map((user) => (
32 | //single user card
33 |
34 |
35 |
36 | Name:
37 | {user.name}
38 |
39 |
40 |
41 | ))}
42 |
43 |
{message ? message : ""}
}
29 | )
30 | }
31 |
32 | export default WithPermission
33 |
--------------------------------------------------------------------------------
/src/config/index.ts:
--------------------------------------------------------------------------------
1 | export * from './navigation'
--------------------------------------------------------------------------------
/src/config/navigation.ts:
--------------------------------------------------------------------------------
1 | export const navigationItems = {
2 | sidebar: [
3 | {
4 | name: 'Dashboard ',
5 | to: '/dashboard',
6 | text: 'dashboard',
7 |
8 | },
9 | {
10 | name: 'Tabs Demo ',
11 | to: '/tabs',
12 | text:'tabsdemo'
13 | },
14 | {
15 | name: 'Dynamic Form ',
16 | to: '/dynamic-form',
17 | text:'dynamicform'
18 | },
19 | {
20 | name: 'Settings ',
21 | to: '/settings',
22 | text:'settings'
23 | },
24 | {
25 | name: 'Users ',
26 | to: '/users',
27 | text:'users'
28 | },
29 | {
30 | name: 'Example ',
31 | to: '/example',
32 | text:'example'
33 | },
34 | ],
35 | footer: [],
36 |
37 |
38 |
39 | }
40 | export default navigationItems
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import {BrowserRouter} from 'react-router-dom'
4 |
5 | import App from './App';
6 |
7 | ReactDOM.render(
8 |
9 |
10 |
11 |
12 | ,
13 | document.getElementById('root')
14 | );
15 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');
2 |
3 | html, body, div, span, applet, object, iframe,
4 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
5 | a, abbr, acronym, address, big, cite, code,
6 | del, dfn, em, img, ins, kbd, q, s, samp,
7 | small, strike, strong, sub, sup, tt, var,
8 | b, u, i, center,
9 | dl, dt, dd, ol, ul, li,
10 | fieldset, form, label, legend,
11 | table, caption, tbody, tfoot, thead, tr, th, td,
12 | article, aside, canvas, details, embed,
13 | figure, figcaption, footer, header, hgroup,
14 | menu, nav, output, ruby, section, summary,
15 | time, mark, audio, video {
16 | margin: 0;
17 | padding: 0;
18 | border: 0;
19 | font-size: 100%;
20 | font: inherit;
21 | vertical-align: baseline;
22 | }
23 | /* HTML5 display-role reset for older browsers */
24 | article, aside, details, figcaption, figure,
25 | footer, header, hgroup, menu, nav, section {
26 | display: block;
27 | }
28 | body {
29 | line-height: 1;
30 | }
31 | ol, ul {
32 | list-style: none;
33 | }
34 | blockquote, q {
35 | quotes: none;
36 | }
37 | blockquote:before, blockquote:after,
38 | q:before, q:after {
39 | content: '';
40 | content: none;
41 | }
42 | table {
43 | border-collapse: collapse;
44 | border-spacing: 0;
45 | }
46 |
47 |
48 | body{
49 | font-family: 'Rubik', sans-serif;
50 | }
51 |
52 |
53 | .app{
54 | display: flex;
55 | }
56 | .sidebar{
57 | width:200px;
58 | background-color: #365262;
59 | color: #EBF8FE;
60 | padding-top:200px;
61 | padding-left:20px;
62 | height:100vh;
63 |
64 | }
65 | .sidebar__items{
66 | display: flex;
67 | flex-direction: column;
68 |
69 | }
70 | .sidebar__items a{
71 | color: #EBF8FE;
72 | font-size:20px;
73 | margin-bottom:40px;
74 | text-decoration: none;
75 | }
76 | .sidebar_active{
77 | text-decoration: underline!important;
78 | }
79 | .tab-nav{
80 | margin-top:70px;
81 | margin-bottom:60px;
82 | }
83 | .tab-nav a{
84 | color:#A2A2A2;
85 | font-size:20px;
86 | font-weight: 500;
87 | padding:20px;
88 | text-decoration: none;
89 | }
90 |
91 | .inner-content{
92 | padding-top:70px;
93 | padding-left:40px;
94 | }
95 |
96 | h1{
97 | color:#365262;
98 | font-size:30px;
99 | font-weight: 500;
100 | }
101 | h2{
102 | color:#365262;
103 | font-size:20px;
104 | font-weight: 500;
105 | }
106 | .login{
107 | padding-top:70px;
108 | padding-left:40px;
109 | }
110 | .login button{
111 | margin-top:40px;
112 | }
113 | .login p{
114 | margin-top:30px;
115 | }
116 | .tab_active{
117 | color:#365262!important;
118 | text-decoration: underline!important;
119 | }
120 | .users h1{
121 | margin-bottom:20px;
122 | }
123 | .users__card{
124 | margin-top:40px;
125 | border:1px solid #365262;
126 | padding:20px;
127 | }
128 | .users__card p{
129 | margin-bottom: 10px;
130 | }
131 | .new-user__form{
132 | margin-top:40px;
133 |
134 | }
135 | .new-user__form-group{
136 | margin-top:10px;
137 | padding:10px;
138 | }
139 | .new-user__form-group input{
140 | margin-left:20px;
141 | padding:10px 10px;
142 | }
143 | .new-user__form-group button{
144 | padding:10px;
145 | }
146 |
147 | .form-row{
148 | display: flex;
149 | margin-top:40px;
150 | align-items: flex-end;
151 | margin-bottom:40px;
152 | }
153 | .dynamic-form button {
154 | padding:10px 10px;
155 | max-height: 40px;
156 | }
157 | .input-group{
158 | display: flex;
159 | flex-direction: column;
160 | align-items: flex-start;
161 | margin-right:10px;
162 |
163 | }
164 |
165 | .input-group input{
166 | padding:10px 10px;
167 | margin-top:10px;
168 |
169 | }
170 | .form-row button {
171 | padding:10px 10px;
172 | max-height: 40px;
173 | }
174 |
175 | .row-section{
176 | margin-top:40px;
177 | }
178 | .row-section h3{
179 | color:#365262;
180 | margin-top:30px;
181 | }
182 | .row-section__inner{
183 | border:1px solid grey;
184 | padding:20px;
185 | margin-bottom:20px;
186 | }
187 | .row-section .form-row{
188 | margin-top:25px;
189 | }
190 | .row-section .btn-primary{
191 | margin-top:20px;
192 | }
193 | .btn-primary{
194 | background-color:#365262;
195 | color:white;
196 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------