From c2dfc7fe115e5f4d5a1d6c4fe7c123750407d5f5 Mon Sep 17 00:00:00 2001 From: ermek Date: Thu, 18 Apr 2024 16:25:54 +0500 Subject: [PATCH] On branch ermek Changes to be committed: modified: package-lock.json modified: package.json modified: src/App.tsx modified: src/assets/theme.ts new file: src/images/others/settings-middle.svg new file: src/images/others/users.svg new file: src/pages/MainPage.tsx --- package-lock.json | 39 ++++++++++++++++ package.json | 1 + src/App.tsx | 64 +++++-------------------- src/assets/theme.ts | 3 ++ src/images/others/settings-middle.svg | 4 ++ src/images/others/users.svg | 3 ++ src/pages/MainPage.tsx | 67 +++++++++++++++++++++++++++ 7 files changed, 129 insertions(+), 52 deletions(-) create mode 100644 src/images/others/settings-middle.svg create mode 100644 src/images/others/users.svg create mode 100644 src/pages/MainPage.tsx diff --git a/package-lock.json b/package-lock.json index b573dcf..bf784a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@fontsource/inter": "^5.0.17", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.3", "styled-components": "^6.1.8", "vite-plugin-svgr": "^4.2.0" }, @@ -976,6 +977,14 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", + "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/pluginutils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", @@ -3200,6 +3209,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", + "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "dependencies": { + "@remix-run/router": "1.15.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", + "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "dependencies": { + "@remix-run/router": "1.15.3", + "react-router": "6.22.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", diff --git a/package.json b/package.json index 94f13e2..f1ef77f 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@fontsource/inter": "^5.0.17", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.3", "styled-components": "^6.1.8", "vite-plugin-svgr": "^4.2.0" }, diff --git a/src/App.tsx b/src/App.tsx index 737b3aa..598badc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,62 +1,22 @@ import styled from 'styled-components' -import Checkbox from './components/UI/checkbox/Checkbox' -import { ChangeEvent, useState } from 'react' -import RadioButton from './components/UI/radio-button/RadioButton' -import MainInput from './components/UI/input/main-input/MainInput' +import { Routes, Route } from 'react-router-dom' +import { BrowserRouter as Router } from 'react-router-dom'; +import MainPage from './pages/MainPage' type Props = {} const Container = styled.div` - padding: 25px; + padding: 35px 25px 0 ; ` -export default function App({}: Props) { - const [checkboxValue, setCheckboxValue] = useState(false) - - const [selectedOption, setSelectedOption] = useState('option1') - - const handleOptionChange = (option: string) => { - setSelectedOption(option) - } - - const [inputValue, setInputValue] = useState('') - +export default function App({ }: Props) { return ( - - -
- - handleOptionChange(isChecked ? 'option1' : '') - } - name='options' - /> - Option 1 - - handleOptionChange(isChecked ? 'option2' : '') - } - name='options' - /> - Option 2 - - handleOptionChange(isChecked ? 'option3' : '') - } - name='options' - /> - Option 3 -
- ) => - setInputValue(e.target.value) - } - placeholder='placeholder' - /> - + + + + }> + + + ) } diff --git a/src/assets/theme.ts b/src/assets/theme.ts index 5c15d55..ae1b762 100644 --- a/src/assets/theme.ts +++ b/src/assets/theme.ts @@ -12,6 +12,9 @@ const theme = { p: ` font-weight: 500; font-size: 14px; + `, + dropShadow:` + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); ` } diff --git a/src/images/others/settings-middle.svg b/src/images/others/settings-middle.svg new file mode 100644 index 0000000..e257e41 --- /dev/null +++ b/src/images/others/settings-middle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/others/users.svg b/src/images/others/users.svg new file mode 100644 index 0000000..fa8dffe --- /dev/null +++ b/src/images/others/users.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx new file mode 100644 index 0000000..39b04af --- /dev/null +++ b/src/pages/MainPage.tsx @@ -0,0 +1,67 @@ +import styled from "styled-components" +import { lightTheme } from "src/assets/theme" +import { ReactComponent as Users } from 'src/images/others/users.svg' +import { ReactComponent as Settings } from 'src/images/others/settings-middle.svg' + +type Props = {} + +const Container = styled.div` + display:flex; + flex-direction:column; + gap:10px; + h1{ + ${lightTheme.h1} + }; + p{ + ${lightTheme.p} + }; + +` +const MainGroups = styled.div` + padding:25px; + width:100%; + background-color:white; + border-radius:12px; + display:flex; + flex-wrap:wrap; + gap:20px; + ${lightTheme.dropShadow}; +` +const LinkGroup = styled.div` + padding:20px; + display:flex; + flex-direction:column; + gap:20px; + justify-content:center; + align-items:center; + width:160px; + height:170px; + text-align:center; + border-radius:12px; + &:hover { + ${lightTheme.dropShadow}; + } +` + + +export default function MainPage({}: Props) { + return ( + +

Пользователи помогатора

+ + + +

Пользователи и группы

+ + + + Пользователи Unix + + + + Настройки + + + + ) +} \ No newline at end of file