+ {isLoading ? (
+
+ Loading Users...
+
+ ) : (
+ <>
+ {users ? (
+ <>
+ {users.map((member, index) => {
+ return (
+
+
+
+
+
{
+ e.target.src = unknownAvatar
+ }}
+ />
+
+ {member.name}
+ {getDate(member.created_at)}
+
+
+
+ )
+ })}
+
handlePaginationChange(event)} defaultActivePage={paginationPage} totalPages={totalPaginationPages} />
+ >
+ ) : (
+
+
+
+ There are no Members in this group.
+
+ )}
+
+ >
+ )}
+
+ >
+ )
+}
+
+export default SettingsUsers
diff --git a/src/views/Settings/Users/style.scss b/src/views/Settings/Users/style.scss
new file mode 100644
index 0000000..d5d336b
--- /dev/null
+++ b/src/views/Settings/Users/style.scss
@@ -0,0 +1,37 @@
+.settings_content {
+ .settings_image_upload {
+ border: 1px solid rgba(34, 36, 38, 0.15);
+ border-radius: 10px;
+ width: 100%;
+ height: 70px;
+ padding: 5px;
+ object-fit: contain;
+ cursor: pointer;
+ }
+ .item[role='listitem'] {
+ padding: 10px !important;
+ background: transparent;
+ transition: all 0.15s;
+
+ div.settings_user-avatar {
+ width: 32px;
+ height: 32px;
+ float: left;
+ border-radius: 100px;
+ background: #ebebeb;
+ margin-right: 10px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ border-radius: 100px;
+ object-fit: cover;
+ }
+ }
+
+ &:hover,
+ &:focus {
+ background: #f2f4f5;
+ }
+ }
+}
diff --git a/src/views/Settings/index.jsx b/src/views/Settings/index.jsx
index d33e077..c8a8ebd 100644
--- a/src/views/Settings/index.jsx
+++ b/src/views/Settings/index.jsx
@@ -3,11 +3,12 @@ import React, { useState, useEffect } from 'react'
import { BrowserRouter as Router, Switch, Route, Link, NavLink, useParams } from 'react-router-dom'
import './style.scss'
-import { Monitor, Server, AtSign, BarChart2, Home, Zap } from 'react-feather'
+import { Monitor, Server, AtSign, BarChart2, Home, Users } from 'react-feather'
// Components
import Header from '../../components/Header'
import SettingsHome from './Home'
+import SettingsUsers from './Users'
import SettingsFrontend from './Frontend'
import SettingsServer from './Server'
import SettingsMail from './Mail'
@@ -24,6 +25,9 @@ function Settings() {