diff --git a/src/App.tsx b/src/App.tsx
index 598badc..735178e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import styled from 'styled-components'
import { Routes, Route } from 'react-router-dom'
import { BrowserRouter as Router } from 'react-router-dom';
import MainPage from './pages/MainPage'
+import UsersGroupsUsers from './pages/UsersGroupsUsers';
type Props = {}
@@ -15,6 +16,7 @@ export default function App({ }: Props) {
}>
+ }>
diff --git a/src/images/others/arrow-down-full.svg b/src/images/others/arrow-down-full.svg
new file mode 100644
index 0000000..ecc1b83
--- /dev/null
+++ b/src/images/others/arrow-down-full.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/images/others/arrow-down.svg b/src/images/others/arrow-down.svg
new file mode 100644
index 0000000..62cc21b
--- /dev/null
+++ b/src/images/others/arrow-down.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/images/others/edit.svg b/src/images/others/edit.svg
new file mode 100644
index 0000000..f01f7d6
--- /dev/null
+++ b/src/images/others/edit.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/images/others/trash.svg b/src/images/others/trash.svg
new file mode 100644
index 0000000..7cea245
--- /dev/null
+++ b/src/images/others/trash.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/images/others/triangle-down.svg b/src/images/others/triangle-down.svg
new file mode 100644
index 0000000..fe5e95a
--- /dev/null
+++ b/src/images/others/triangle-down.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/pages/UsersGroupsUsers.tsx b/src/pages/UsersGroupsUsers.tsx
new file mode 100644
index 0000000..1a20aab
--- /dev/null
+++ b/src/pages/UsersGroupsUsers.tsx
@@ -0,0 +1,432 @@
+import styled from "styled-components"
+import { lightTheme } from "src/assets/theme"
+import { ChangeEvent, useState } from "react"
+import { ReactComponent as Search } from 'src/images/search/search.svg'
+import { ReactComponent as TriangleDown } from 'src/images/others/triangle-down.svg'
+import { ReactComponent as ArrowDown } from 'src/images/others/arrow-down.svg'
+import { ReactComponent as ArrowDownFull } from 'src/images/others/arrow-down-full.svg'
+import { ReactComponent as Trash } from 'src/images/others/trash.svg'
+import { ReactComponent as Edit } from 'src/images/others/edit.svg'
+import Checkbox from "src/components/UI/checkbox/Checkbox"
+
+const Container = styled.div`
+ display:flex;
+ flex-direction:column;
+ gap:25px;
+`
+const BlockContainer = styled.div`
+ display:flex;
+ flex-direction:column;
+ gap:10px;
+ h1{
+ ${lightTheme.h1}
+ };
+ h2{
+ ${lightTheme.h2}
+ };
+ p{
+ ${lightTheme.p}
+ };
+`
+const Block = styled.div`
+ border-radius:12px;
+ ${lightTheme.dropShadow};
+ padding:20px;
+ display:flex;
+ gap:20px;
+ flex-direction:column;
+`
+const SearchInputContainer = styled.div`
+ display: flex;
+ align-items: center;
+
+ input {
+ width:100%;
+ font-weight: 400;
+ font-size:14px;
+ padding: 0 25px;
+ height: 37px;
+ outline: none;
+ border-radius: 12px;
+ border: 1px solid ${(props) => props.theme.text};
+ opacity: 0.5;
+
+ &:focus {
+ opacity: 1;
+ }
+ }
+
+ .search {
+ margin-left: -40px;
+ }
+`
+const TableTitleBlock = styled.div`
+ display:flex;
+ justify-content:space-between;
+ align-items:center;
+ p{
+ font-size:18px;
+ };
+`
+const RightBlock = styled.div`
+ display:flex;
+ gap:15px;
+`
+const GreenButton = styled.a`
+ padding:10px 15px;
+ background-color:${lightTheme.primary};
+ color:white;
+ border-radius:12px;
+`
+
+const TrashContainer = styled.div`
+ border-radius:12px;
+ background-color:white;
+ ${lightTheme.dropShadow};
+ height:37px;
+ width:37px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`
+const Rows = styled.div`
+`
+
+const RowTitle = styled.div`
+ display:flex;
+ padding: 10px;
+ align-items:center;
+ h2{
+ font-weight:bold;
+ }
+`
+
+const Row = styled.div`
+ border-top:solid #30303080 1px;
+ display:flex;
+ padding: 15px 10px;
+ justify-content:space-between;
+ align-items:center;
+`
+const Side = styled.div`
+ display:flex;
+ gap:20px;
+ align-items:center;
+`
+const BlockFooter = styled.div`
+ display:flex;
+ justify-content:space-between;
+ align-items:center;
+`
+const Paginations = styled.div`
+ display:flex;
+ gap:8px;
+`
+const PaginationBlock = styled.div`
+ border-radius:4px;
+ border:solid ${lightTheme.primary} 1px;
+ color:${lightTheme.primary};
+ background-color:white;
+ height:37px;
+ width:37px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`
+const PageLimit = styled.div`
+ display: flex;
+ align-items: center;
+`
+
+const Table = styled.table`
+ text-align:left;
+ border-collapse:collapse;
+`
+const TableHeader = styled.thead`
+ font-weight:bold;
+`;
+const TableBody = styled.tbody`
+
+`;
+const TableRow = styled.tr`
+ height:67px;
+`
+const TableTitle = styled.th`
+ padding: 15px 10px;
+`
+const TableCell = styled.td`
+ padding: 15px 10px;
+ border-top:solid black 2px;
+`
+
+type Props = {}
+
+export default function UsersGroupsUsers({ }: Props) {
+
+ const [searchQuery, setSearchQuery] = useState('')
+ const [checkboxValue, setCheckboxValue] = useState(false)
+
+
+ return (
+
+
+ Пользователи
+
+
+ ) =>
+ setSearchQuery(e.target.value)
+ }
+ placeholder='Имя пользователя'
+ />
+
+
+
+ Выбрано: 1
+
+ Добавить в группу
+
+
+ ) =>
+ setSearchQuery(e.target.value)
+ }
+ placeholder='Имя пользователя'
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Имя Пользователя
+
+
+
+
+
+ root
+
+
+
+
+
+
+
+
+
+ root
+
+
+
+
+
+
+
+
+
+ root
+
+
+
+
+
+
+
+
+
+
+ 1
+ 2
+ 3
+
+
+ Количество на странице: 5
+
+
+
+ Создать нового пользователя
+
+
+
+
+
+
+
+ Группы
+
+
+ ) =>
+ setSearchQuery(e.target.value)
+ }
+ placeholder='Имя пользователя'
+ />
+
+
+
+ Выбрано: 1
+
+
+
+
+
+
+
+
+
+
+
+
+ Имя Группы
+
+
+
+
+
+ root
+
+
+
+
+
+
+
+
+
+ root
+
+
+
+
+
+
+
+
+
+ root
+
+
+
+
+
+
+
+
+
+
+ 1
+ 2
+ 3
+
+
+ Количество на странице: 5
+
+
+
+ Создать новую группу
+
+
+
+
+
+
+ Сеансы
+
+
+ ) =>
+ setSearchQuery(e.target.value)
+ }
+ placeholder='Имя пользователя'
+ />
+
+
+
+
+
+
+ Id Сеанса
+
+
+ Пользователь
+
+
+ IP Адрес
+
+
+
+ Время входа
+
+
+ Действия
+
+
+
+
+
+
+ mFCQAouL3Y9E
+
+
+ root
+
+
+ 111.111.111.11
+
+
+ 11.04.2024 22:09
+
+
+ Журнал
+
+
+
+
+ mFCQAouL3Y9E
+
+
+ root
+
+
+ 111.111.111.11
+
+
+ 11.04.2024 22:09
+
+
+ Журнал
+
+
+
+
+
+
+
+
+ 1
+ 2
+ 3
+
+
+ Количество на странице: 5
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file