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
This commit is contained in:
parent
9b8032a4df
commit
c2dfc7fe11
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
60
src/App.tsx
60
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<string>('option1')
|
||||
|
||||
const handleOptionChange = (option: string) => {
|
||||
setSelectedOption(option)
|
||||
}
|
||||
|
||||
const [inputValue, setInputValue] = useState('')
|
||||
|
||||
export default function App({ }: Props) {
|
||||
return (
|
||||
<Router>
|
||||
<Container>
|
||||
<Checkbox value={checkboxValue} onChange={setCheckboxValue} />
|
||||
<div>
|
||||
<RadioButton
|
||||
value={selectedOption === 'option1'}
|
||||
onChange={(isChecked) =>
|
||||
handleOptionChange(isChecked ? 'option1' : '')
|
||||
}
|
||||
name='options'
|
||||
/>
|
||||
Option 1
|
||||
<RadioButton
|
||||
value={selectedOption === 'option2'}
|
||||
onChange={(isChecked) =>
|
||||
handleOptionChange(isChecked ? 'option2' : '')
|
||||
}
|
||||
name='options'
|
||||
/>
|
||||
Option 2
|
||||
<RadioButton
|
||||
value={selectedOption === 'option3'}
|
||||
onChange={(isChecked) =>
|
||||
handleOptionChange(isChecked ? 'option3' : '')
|
||||
}
|
||||
name='options'
|
||||
/>
|
||||
Option 3
|
||||
</div>
|
||||
<MainInput
|
||||
value={inputValue}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setInputValue(e.target.value)
|
||||
}
|
||||
placeholder='placeholder'
|
||||
/>
|
||||
<Routes>
|
||||
<Route path={'/'} element={<MainPage />}></Route>
|
||||
</Routes>
|
||||
</Container>
|
||||
</Router>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
`
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="60" height="61" viewBox="0 0 60 61" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30 38C34.1421 38 37.5 34.6421 37.5 30.5C37.5 26.3579 34.1421 23 30 23C25.8579 23 22.5 26.3579 22.5 30.5C22.5 34.6421 25.8579 38 30 38Z" stroke="#303030" stroke-width="4"/>
|
||||
<path d="M34.4137 5.8806C33.4947 5.5 32.33 5.5 30.0002 5.5C27.6705 5.5 26.5057 5.5 25.5867 5.8806C24.3617 6.38807 23.3883 7.36145 22.8808 8.58657C22.6492 9.14585 22.5585 9.79625 22.523 10.745C22.4709 12.1392 21.7559 13.4297 20.5476 14.1273C19.3393 14.8249 17.8642 14.7988 16.6307 14.1469C15.7914 13.7032 15.1828 13.4565 14.5826 13.3775C13.2678 13.2044 11.9382 13.5607 10.8861 14.368C10.0971 14.9734 9.51466 15.9822 8.34981 17.9998C7.18496 20.0174 6.60254 21.0262 6.47271 22.0123C6.29964 23.327 6.65591 24.6566 7.46319 25.7087C7.83164 26.189 8.34949 26.5925 9.15321 27.0975C10.3347 27.84 11.095 29.1047 11.0949 30.5C11.0948 31.8952 10.3346 33.1597 9.15319 33.902C8.34936 34.4072 7.83144 34.811 7.46294 35.2912C6.65566 36.3432 6.29939 37.6727 6.47249 38.9875C6.60229 39.9735 7.18471 40.9825 8.34956 43C9.51444 45.0175 10.0969 46.0265 10.8859 46.6317C11.9379 47.439 13.2676 47.7952 14.5823 47.6222C15.1825 47.5432 15.791 47.2965 16.6303 46.853C17.8639 46.201 19.3391 46.175 20.5475 46.8725C21.7558 47.5702 22.4709 48.8607 22.523 50.2552C22.5585 51.2037 22.6492 51.8542 22.8808 52.4135C23.3883 53.6385 24.3617 54.612 25.5867 55.1195C26.5057 55.5 27.6705 55.5 30.0002 55.5C32.33 55.5 33.4947 55.5 34.4137 55.1195C35.6387 54.612 36.6122 53.6385 37.1195 52.4135C37.3512 51.8542 37.442 51.2037 37.4775 50.255C37.5295 48.8607 38.2445 47.5702 39.4527 46.8725C40.661 46.1747 42.1362 46.201 43.37 46.853C44.2092 47.2965 44.8177 47.543 45.4177 47.622C46.7325 47.7952 48.0622 47.439 49.1142 46.6317C49.9032 46.0262 50.4857 45.0175 51.6505 42.9997C52.8155 40.9822 53.398 39.9735 53.5277 38.9875C53.7007 37.6727 53.3445 36.343 52.5372 35.291C52.1687 34.8107 51.6507 34.407 50.847 33.902C49.6657 33.1597 48.9055 31.895 48.9055 30.4997C48.9055 29.1045 49.6657 27.8402 50.847 27.098C51.651 26.5927 52.169 26.1892 52.5375 25.7087C53.3447 24.6568 53.701 23.3272 53.528 22.0124C53.3982 21.0264 52.8157 20.0176 51.6507 18C50.486 15.9824 49.9035 14.9736 49.1145 14.3682C48.0625 13.5609 46.7327 13.2046 45.418 13.3777C44.818 13.4567 44.2095 13.7034 43.37 14.147C42.1365 14.799 40.6612 14.825 39.453 14.1274C38.2445 13.4298 37.5295 12.1391 37.4775 10.7448C37.442 9.7962 37.3512 9.14582 37.1195 8.58657C36.6122 7.36145 35.6387 6.38807 34.4137 5.8806Z" stroke="#303030" stroke-width="4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M47.5 35C53.0228 35 57.5 40 57.5 43.75C57.5 45.821 55.821 47.5 53.75 47.5H52.5M42.5 27.5C46.6423 27.5 50 24.1421 50 20C50 15.8579 46.6423 12.5 42.5 12.5M12.5 35C6.97715 35 2.5 40 2.5 43.75C2.5 45.821 4.17893 47.5 6.25 47.5H7.5M17.5 27.5C13.3579 27.5 10 24.1421 10 20C10 15.8579 13.3579 12.5 17.5 12.5M41.25 47.5H18.75C16.6789 47.5 15 45.821 15 43.75C15 37.5 22.5 35 30 35C37.5 35 45 37.5 45 43.75C45 45.821 43.321 47.5 41.25 47.5ZM37.5 20C37.5 24.1421 34.1423 27.5 30 27.5C25.8577 27.5 22.5 24.1421 22.5 20C22.5 15.8579 25.8577 12.5 30 12.5C34.1423 12.5 37.5 15.8579 37.5 20Z" stroke="#303030" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 772 B |
|
|
@ -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<Props>`
|
||||
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 (
|
||||
<Container>
|
||||
<h1>Пользователи помогатора</h1>
|
||||
<MainGroups>
|
||||
<LinkGroup>
|
||||
<Users />
|
||||
<p>Пользователи и группы</p>
|
||||
</LinkGroup>
|
||||
<LinkGroup>
|
||||
<Users />
|
||||
Пользователи Unix
|
||||
</LinkGroup>
|
||||
<LinkGroup>
|
||||
<Settings />
|
||||
Настройки
|
||||
</LinkGroup>
|
||||
</MainGroups>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue