init project

This commit is contained in:
иосиф брыков 2024-04-18 05:49:40 +05:00
commit 9b8032a4df
32 changed files with 4482 additions and 0 deletions

18
.eslintrc.cjs Normal file
View File

@ -0,0 +1,18 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}

24
.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

9
.prettierrc Normal file
View File

@ -0,0 +1,9 @@
{
"tabWidth": 2,
"singleQuote": true,
"jsxSingleQuote": true,
"arrowParents": "avoid",
"semi": false,
"trailingComma": "none",
"useTabs": true
}

30
README.md Normal file
View File

@ -0,0 +1,30 @@
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level `parserOptions` property like this:
```js
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}
```
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

13
index.html Normal file
View File

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/osgos_logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ОСГОС Помогатор</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

3761
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

31
package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "osgos-pomogator",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@fontsource/inter": "^5.0.17",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "^6.1.8",
"vite-plugin-svgr": "^4.2.0"
},
"devDependencies": {
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"typescript": "^5.2.2",
"vite": "^5.2.0"
}
}

BIN
public/osgos_logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

62
src/App.tsx Normal file
View File

@ -0,0 +1,62 @@
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'
type Props = {}
const Container = styled.div`
padding: 25px;
`
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('')
return (
<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'
/>
</Container>
)
}

View File

@ -0,0 +1,21 @@
import { createGlobalStyle } from 'styled-components'
export const GlobalStyles = createGlobalStyle`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
&::-webkit-scrollbar {
display: none;
}
}
body {
font-family: "Inter";
background: ${(props) => props.theme.body};
color: ${(props) => props.theme.text};
}
`

32
src/assets/theme.ts Normal file
View File

@ -0,0 +1,32 @@
const theme = {
primary: '#006666',
secondary: '#003333',
h1: `
font-weight: 500;
font-size: 24px;
`,
h2: `
font-weight: 500;
font-size: 16px;
`,
p: `
font-weight: 500;
font-size: 14px;
`
}
export const darkTheme = {
...theme,
body: '#4D4D4D',
text: '#FFFFFF',
bg: '#303030',
content_block_bg: 'rgba(48, 48, 48, 0.5)'
}
export const lightTheme = {
...theme,
body: '#E9EDF0',
text: '#303030',
bg: '#FFFFFF',
content_block_bg: 'rgba(255, 255, 255, 0.5)'
}

View File

@ -0,0 +1,29 @@
import React, { ChangeEvent } from 'react'
import styled from 'styled-components'
type Props = {
value: boolean
onChange: (param: boolean) => void
}
const Input = styled.input`
height: 14px;
width: 14px;
cursor: pointer;
accent-color: ${(props) => props.theme.text};
`
export default function Checkbox({ value, onChange }: Props) {
return (
<>
<Input
type='checkbox'
value={value ? 'on' : 'off'}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
onChange(e.target.value === 'on')
}
/>
</>
)
}

View File

@ -0,0 +1,18 @@
import React, { ReactNode } from 'react'
import styled from 'styled-components'
type Props = {
children: ReactNode
}
const Container = styled.div`
border-radius: 12px;
padding: 20px;
backdrop-filter: blur(10px);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
background: ${(props) => props.theme.content_block_bg};
`
export default function ContentBlock({ children }: Props) {
return <Container>{children}</Container>
}

View File

@ -0,0 +1,47 @@
import React, { ChangeEvent } from 'react'
import styled, { css } from 'styled-components'
type Props = {
value: string
onChange: (param: ChangeEvent<HTMLInputElement>) => void
placeholder: string
fullWidth?: boolean
}
const Input = styled.input<Props>`
border-radius: 12px;
padding: 10px 15px;
border: 1px solid ${(props) => props.theme.text};
opacity: 0.5;
outline: none;
background: ${(props) => props.theme.bg};
${(props) =>
props.fullWidth &&
css`
width: 100%;
`}
font-weight: 400;
font-size: 14px;
&:focus {
opacity: 1;
}
`
export default function MainInput({
value,
onChange,
placeholder,
fullWidth = true
}: Props) {
return (
<Input
value={value}
onChange={onChange}
placeholder={placeholder}
fullWidth={fullWidth}
/>
)
}

View File

@ -0,0 +1,27 @@
import React from 'react'
import styled from 'styled-components'
type Props = {
value: boolean
onChange: (param: boolean) => void
name: string
}
const Input = styled.input`
height: 14px;
width: 14px;
cursor: pointer;
accent-color: ${(props) => props.theme.text};
background: none;
`
export default function RadioButton({ value, onChange, name }: Props) {
return (
<Input
type='radio'
value={value}
onChange={(e) => onChange(e.target.checked)}
name={name}
/>
)
}

View File

@ -0,0 +1,16 @@
import React, { ReactNode } from "react";
import styled from "styled-components";
import Navbar from "./Navbar";
type Props = {
children: ReactNode;
};
const Container = styled.div`
position: relative;
margin-left: 350px;
`
export default function Layout({ children }: Props) {
return <Container><Navbar />{children}</Container>;
}

View File

@ -0,0 +1,181 @@
import styled from 'styled-components'
import { ReactComponent as Application } from 'src/images/navbar/application.svg'
import { ReactComponent as Arrow } from 'src/images/navbar/arrow.svg'
import { ReactComponent as Cluster } from 'src/images/navbar/cluster.svg'
import { ReactComponent as Equipment } from 'src/images/navbar/equipment.svg'
import { ReactComponent as Modules } from 'src/images/navbar/modules.svg'
import { ReactComponent as Net } from 'src/images/navbar/net.svg'
import { ReactComponent as Services } from 'src/images/navbar/services.svg'
import { ReactComponent as Settings } from 'src/images/navbar/settings.svg'
import { ReactComponent as System } from 'src/images/navbar/system.svg'
import { ReactComponent as Tools } from 'src/images/navbar/tools.svg'
import { ReactComponent as Search } from 'src/images/search/search.svg'
import { ChangeEvent, useState } from 'react'
type Props = {}
const Container = styled.div`
position: fixed;
top: 0;
left: 0;
height: 100vh;
overflow: auto;
background: ${(props) => props.theme.content_block_bg};
backdrop-filter: blur(4px);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
width: 350px;
padding: 25px;
display: flex;
flex-direction: column;
gap: 15px;
.logo {
font-weight: 400;
font-size: 20px;
margin-bottom: 10px;
}
`
const SearchInputContainer = styled.div`
display: flex;
align-items: center;
input {
font-weight: 400;
font-size: 20px;
padding: 0 25px;
height: 50px;
outline: none;
border-radius: 12px;
border: 1px solid ${(props) => props.theme.text};
opacity: 0.5;
&:focus {
opacity: 1;
}
}
.search {
margin-left: -40px;
}
`
const MenuItem = styled.div`
.title {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
.content {
display: flex;
align-items: center;
gap: 15px;
font-weight: 400;
font-size: 16px;
}
}
`
export default function Navbar({}: Props) {
const [searchQuery, setSearchQuery] = useState('')
return (
<Container>
<div className='logo'>Помогатор</div>
<SearchInputContainer>
<input
value={searchQuery}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setSearchQuery(e.target.value)
}
placeholder='Поиск'
/>
<Search className='search' />
</SearchInputContainer>
<MenuItem>
<div className='title'>
<div className='content'>
<Application />
Приложение
</div>
<Arrow />
</div>
</MenuItem>
<MenuItem>
<div className='title'>
<div className='content'>
<Settings />
Настройки
</div>
<Arrow />
</div>
</MenuItem>
<MenuItem>
<div className='title'>
<div className='content'>
<System />
Система
</div>
<Arrow />
</div>
</MenuItem>
<MenuItem>
<div className='title'>
<div className='content'>
<Services />
Службы
</div>
<Arrow />
</div>
</MenuItem>
<MenuItem>
<div className='title'>
<div className='content'>
<Tools />
Инструменты
</div>
<Arrow />
</div>
</MenuItem>
<MenuItem>
<div className='title'>
<div className='content'>
<Net />
Сеть
</div>
<Arrow />
</div>
</MenuItem>
<MenuItem>
<div className='title'>
<div className='content'>
<Equipment />
Оборудование
</div>
<Arrow />
</div>
</MenuItem>
<MenuItem>
<div className='title'>
<div className='content'>
<Cluster />
Кластер
</div>
<Arrow />
</div>
</MenuItem>
<MenuItem>
<div className='title'>
<div className='content'>
<Modules />
Модули
</div>
<Arrow />
</div>
</MenuItem>
</Container>
)
}

View File

@ -0,0 +1,7 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.6562 3.90625H2.34375V21.0938H22.6562V3.90625Z" stroke="#303030" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="10.1562" cy="6.25" r="0.78125" fill="#303030"/>
<circle cx="7.8125" cy="6.25" r="0.78125" fill="#303030"/>
<circle cx="5.46875" cy="6.25" r="0.78125" fill="#303030"/>
<path d="M2.34375 8.59375H22.6562" stroke="#303030" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 593 B

View File

@ -0,0 +1,10 @@
<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_183_7859)">
<path d="M1.7085 5.5L8.29137 10.5V0.5L1.7085 5.5Z" fill="#303030"/>
</g>
<defs>
<clipPath id="clip0_183_7859">
<rect width="10" height="10" fill="white" transform="translate(0 0.5)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 344 B

View File

@ -0,0 +1,5 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0345 1.15166C12.3278 1.00503 12.6729 1.00503 12.9662 1.15166L23.3829 6.35999C23.7357 6.53644 23.9586 6.89714 23.9586 7.29169C23.9586 7.68624 23.7357 8.04694 23.3829 8.22339L12.9662 13.4317C12.6729 13.5784 12.3278 13.5784 12.0345 13.4317L1.61782 8.22339C1.26492 8.04694 1.04199 7.68624 1.04199 7.29169C1.04199 6.89714 1.26492 6.53644 1.61782 6.35999L12.0345 1.15166ZM4.4129 7.29169L12.5003 11.3354L20.5878 7.29169L12.5003 3.24797L4.4129 7.29169Z" fill="#303030"/>
<path d="M1.15195 17.2425C1.40923 16.7279 2.03492 16.5194 2.54949 16.7766L12.5003 21.752L22.4511 16.7766C22.9657 16.5194 23.5914 16.7279 23.8486 17.2425C24.1059 17.757 23.8974 18.3827 23.3828 18.64L12.9661 23.8484C12.6729 23.995 12.3277 23.995 12.0345 23.8484L1.6178 18.64C1.10324 18.3827 0.894668 17.757 1.15195 17.2425Z" fill="#303030"/>
<path d="M2.54949 11.5682C2.03492 11.311 1.40923 11.5196 1.15195 12.0342C0.894668 12.5486 1.10324 13.1744 1.6178 13.4317L12.0345 18.64C12.3277 18.7867 12.6729 18.7867 12.9661 18.64L23.3828 13.4317C23.8974 13.1744 24.1059 12.5486 23.8486 12.0342C23.5914 11.5196 22.9657 11.311 22.4511 11.5682L12.5003 16.5436L2.54949 11.5682Z" fill="#303030"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,4 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.03125 17.1875C7.23845 17.1875 7.43716 17.1052 7.58368 16.9587C7.73019 16.8122 7.8125 16.6135 7.8125 16.4062C7.8125 16.199 7.73019 16.0003 7.58368 15.8538C7.43716 15.7073 7.23845 15.625 7.03125 15.625C6.82405 15.625 6.62534 15.7073 6.47882 15.8538C6.33231 16.0003 6.25 16.199 6.25 16.4062C6.25 16.6135 6.33231 16.8122 6.47882 16.9587C6.62534 17.1052 6.82405 17.1875 7.03125 17.1875ZM4.6875 16.4062C4.6875 16.6135 4.60519 16.8122 4.45868 16.9587C4.31216 17.1052 4.11345 17.1875 3.90625 17.1875C3.69905 17.1875 3.50034 17.1052 3.35382 16.9587C3.20731 16.8122 3.125 16.6135 3.125 16.4062C3.125 16.199 3.20731 16.0003 3.35382 15.8538C3.50034 15.7073 3.69905 15.625 3.90625 15.625C4.11345 15.625 4.31216 15.7073 4.45868 15.8538C4.60519 16.0003 4.6875 16.199 4.6875 16.4062Z" fill="#303030"/>
<path d="M25 17.1875C25 18.0163 24.6708 18.8112 24.0847 19.3972C23.4987 19.9833 22.7038 20.3125 21.875 20.3125H3.125C2.2962 20.3125 1.50134 19.9833 0.915291 19.3972C0.32924 18.8112 0 18.0163 0 17.1875V14.8594C0 14.2063 0.164062 13.5625 0.476562 12.9891L4.33906 5.90938C4.54065 5.53961 4.83814 5.231 5.20026 5.01599C5.56237 4.80097 5.97573 4.6875 6.39687 4.6875H18.6031C19.0243 4.6875 19.4376 4.80097 19.7997 5.01599C20.1619 5.231 20.4594 5.53961 20.6609 5.90938L24.5234 12.9875C24.8359 13.5625 25 14.2063 25 14.8594V17.1875ZM5.71094 6.65625L2.4875 12.5672C2.69375 12.5219 2.90625 12.5 3.125 12.5H21.875C22.0938 12.5 22.3062 12.5219 22.5125 12.5656L19.2891 6.65625C19.2217 6.53319 19.1225 6.43053 19.0018 6.35905C18.8811 6.28756 18.7434 6.2499 18.6031 6.25H6.39687C6.25633 6.24962 6.11829 6.28715 5.9973 6.35865C5.8763 6.43015 5.7784 6.53296 5.71094 6.65625ZM1.5625 15.625V17.1875C1.5625 17.6019 1.72712 17.9993 2.02015 18.2924C2.31317 18.5854 2.7106 18.75 3.125 18.75H21.875C22.2894 18.75 22.6868 18.5854 22.9799 18.2924C23.2729 17.9993 23.4375 17.6019 23.4375 17.1875V15.625C23.4375 15.2106 23.2729 14.8132 22.9799 14.5201C22.6868 14.2271 22.2894 14.0625 21.875 14.0625H3.125C2.7106 14.0625 2.31317 14.2271 2.02015 14.5201C1.72712 14.8132 1.5625 15.2106 1.5625 15.625Z" fill="#303030"/>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -0,0 +1,10 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_103_3477)">
<path d="M21.875 0.781225H15.625C15.0034 0.781225 14.4073 1.02815 13.9677 1.46769C13.5282 1.90723 13.2813 2.50337 13.2813 3.12497V9.37497C13.2813 9.99658 13.5282 10.5927 13.9677 11.0323C14.4073 11.4718 15.0034 11.7187 15.625 11.7187H21.875C22.4966 11.7187 23.0928 11.4718 23.5323 11.0323C23.9718 10.5927 24.2188 9.99658 24.2188 9.37497V3.12497C24.2188 2.50337 23.9718 1.90723 23.5323 1.46769C23.0928 1.02815 22.4966 0.781225 21.875 0.781225ZM22.6563 9.37497C22.6563 9.58217 22.574 9.78089 22.4275 9.9274C22.2809 10.0739 22.0822 10.1562 21.875 10.1562H15.625C15.4178 10.1562 15.2191 10.0739 15.0726 9.9274C14.9261 9.78089 14.8438 9.58217 14.8438 9.37497V3.12497C14.8438 2.91777 14.9261 2.71906 15.0726 2.57255C15.2191 2.42603 15.4178 2.34372 15.625 2.34372H21.875C22.0822 2.34372 22.2809 2.42603 22.4275 2.57255C22.574 2.71906 22.6563 2.91777 22.6563 3.12497V9.37497ZM1.56253 5.46872C1.66462 5.46749 1.76548 5.44626 1.8594 5.40622C1.954 5.36653 2.04118 5.31105 2.11721 5.24216C2.22562 5.1323 2.29905 4.99279 2.32825 4.84124C2.35745 4.68968 2.3411 4.53287 2.28128 4.3906C2.24409 4.2947 2.18834 4.20709 2.11721 4.13279C2.02701 4.03872 1.91471 3.96872 1.79054 3.92914C1.66637 3.88957 1.53427 3.88169 1.40628 3.90622C1.35736 3.91489 1.30998 3.93068 1.26565 3.9531C1.21579 3.97002 1.16848 3.99368 1.12503 4.02341L1.00784 4.11716C0.936712 4.19146 0.880958 4.27908 0.843775 4.37497C0.801691 4.47374 0.780415 4.58012 0.781275 4.68747C0.781275 4.89467 0.863585 5.09339 1.0101 5.2399C1.15661 5.38641 1.35532 5.46872 1.56253 5.46872ZM3.65627 3.12497C3.80943 3.12378 3.95885 3.07759 4.08596 2.99216C4.91392 2.44396 5.91957 2.23166 6.89846 2.39841C7.10566 2.4326 7.31796 2.38308 7.48865 2.26074C7.65933 2.1384 7.77443 1.95327 7.80862 1.74607C7.84281 1.53887 7.79328 1.32657 7.67095 1.15589C7.54861 0.985198 7.36348 0.8701 7.15628 0.835912C5.79548 0.61669 4.40192 0.914912 3.25002 1.67185C3.10223 1.75953 2.98747 1.89349 2.92351 2.05298C2.85955 2.21248 2.84996 2.38861 2.89623 2.55411C2.9425 2.71961 3.04204 2.86523 3.17944 2.96843C3.31684 3.07164 3.48444 3.12666 3.65627 3.12497ZM9.22659 2.53904C9.07248 2.67698 8.97936 2.8704 8.96764 3.0769C8.95592 3.2834 9.02657 3.48611 9.16409 3.6406C9.80494 4.35848 10.1582 5.28766 10.1563 6.24997V9.37497C10.1563 9.58217 10.074 9.78089 9.92745 9.9274C9.78094 10.0739 9.58223 10.1562 9.37503 10.1562H6.25002C5.44309 10.1558 4.6561 9.90541 3.9972 9.43957C3.33831 8.97372 2.83985 8.31526 2.57034 7.55466C2.49177 7.37241 2.34679 7.22689 2.16484 7.14765C1.98288 7.06841 1.77759 7.06139 1.59064 7.12802C1.4037 7.19464 1.24911 7.32992 1.15828 7.50637C1.06745 7.68283 1.04718 7.88724 1.10159 8.0781C1.47899 9.14214 2.17647 10.0633 3.09827 10.7151C4.02008 11.367 5.12103 11.7175 6.25002 11.7187H9.37503C9.99663 11.7187 10.5928 11.4718 11.0323 11.0323C11.4718 10.5927 11.7188 9.99658 11.7188 9.37497V6.24997C11.72 4.90415 11.2248 3.60514 10.3282 2.60154C10.1902 2.44743 9.99678 2.35431 9.79029 2.34259C9.58379 2.33087 9.38108 2.40152 9.22659 2.53904ZM21.875 13.2812H15.625C15.0034 13.2812 14.4073 13.5282 13.9677 13.9677C13.5282 14.4072 13.2813 15.0034 13.2813 15.625V21.875C13.2813 22.4966 13.5282 23.0927 13.9677 23.5323C14.4073 23.9718 15.0034 24.2187 15.625 24.2187H21.875C22.4966 24.2187 23.0928 23.9718 23.5323 23.5323C23.9718 23.0927 24.2188 22.4966 24.2188 21.875V15.625C24.2188 15.0034 23.9718 14.4072 23.5323 13.9677C23.0928 13.5282 22.4966 13.2812 21.875 13.2812ZM22.6563 21.875C22.6563 22.0822 22.574 22.2809 22.4275 22.4274C22.2809 22.5739 22.0822 22.6562 21.875 22.6562H15.625C15.4178 22.6562 15.2191 22.5739 15.0726 22.4274C14.9261 22.2809 14.8438 22.0822 14.8438 21.875V15.625C14.8438 15.4178 14.9261 15.2191 15.0726 15.0725C15.2191 14.926 15.4178 14.8437 15.625 14.8437H21.875C22.0822 14.8437 22.2809 14.926 22.4275 15.0725C22.574 15.2191 22.6563 15.4178 22.6563 15.625V21.875ZM9.37503 13.2812H3.12503C2.50342 13.2812 1.90728 13.5282 1.46774 13.9677C1.02821 14.4072 0.781275 15.0034 0.781275 15.625V21.875C0.781275 22.4966 1.02821 23.0927 1.46774 23.5323C1.90728 23.9718 2.50342 24.2187 3.12503 24.2187H9.37503C9.99663 24.2187 10.5928 23.9718 11.0323 23.5323C11.4718 23.0927 11.7188 22.4966 11.7188 21.875V15.625C11.7188 15.0034 11.4718 14.4072 11.0323 13.9677C10.5928 13.5282 9.99663 13.2812 9.37503 13.2812ZM10.1563 21.875C10.1563 22.0822 10.074 22.2809 9.92745 22.4274C9.78094 22.5739 9.58223 22.6562 9.37503 22.6562H3.12503C2.91782 22.6562 2.71911 22.5739 2.5726 22.4274C2.42608 22.2809 2.34377 22.0822 2.34377 21.875V15.625C2.34377 15.4178 2.42608 15.2191 2.5726 15.0725C2.71911 14.926 2.91782 14.8437 3.12503 14.8437H9.37503C9.58223 14.8437 9.78094 14.926 9.92745 15.0725C10.074 15.2191 10.1563 15.4178 10.1563 15.625V21.875Z" fill="#303030"/>
</g>
<defs>
<clipPath id="clip0_103_3477">
<rect width="25" height="25" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.8 KiB

10
src/images/navbar/net.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_103_3447)">
<path d="M24.2188 13.2812V11.7188H13.2812V9.375H16.0156C16.3263 9.37465 16.6242 9.25107 16.8439 9.03138C17.0636 8.81169 17.1872 8.51382 17.1875 8.20312V1.95312C17.1872 1.64243 17.0636 1.34456 16.8439 1.12487C16.6242 0.905176 16.3263 0.781599 16.0156 0.78125H8.98438C8.67368 0.781599 8.37581 0.905176 8.15612 1.12487C7.93643 1.34456 7.81285 1.64243 7.8125 1.95312V8.20312C7.81285 8.51382 7.93643 8.81169 8.15612 9.03138C8.37581 9.25107 8.67368 9.37465 8.98438 9.375H11.7188V11.7188H0.78125V13.2812H4.6875V15.625H2.02104C1.71036 15.6254 1.41249 15.7489 1.1928 15.9686C0.973113 16.1883 0.849532 16.4862 0.84917 16.7969V23.0469C0.849532 23.3576 0.973113 23.6554 1.1928 23.8751C1.41249 24.0948 1.71036 24.2184 2.02104 24.2188H8.98438C9.29507 24.2184 9.59294 24.0948 9.81263 23.8751C10.0323 23.6554 10.1559 23.3576 10.1562 23.0469V16.7969C10.1559 16.4862 10.0323 16.1883 9.81263 15.9686C9.59294 15.7489 9.29507 15.6253 8.98438 15.625H6.25V13.2812H18.75V15.625H16.0156C15.7049 15.6253 15.4071 15.7489 15.1874 15.9686C14.9677 16.1883 14.8441 16.4862 14.8438 16.7969V23.0469C14.8441 23.3576 14.9677 23.6554 15.1874 23.8751C15.4071 24.0948 15.7049 24.2184 16.0156 24.2188H23.0469C23.3576 24.2184 23.6554 24.0948 23.8751 23.8751C24.0948 23.6554 24.2184 23.3576 24.2188 23.0469V16.7969C24.2184 16.4862 24.0948 16.1883 23.8751 15.9686C23.6554 15.7489 23.3576 15.6253 23.0469 15.625H20.3125V13.2812H24.2188ZM9.375 2.34375H15.625V7.8125H9.375V2.34375ZM8.59375 22.6562H2.41167V17.1875H8.59375V22.6562ZM22.6562 22.6562H16.4062V17.1875H22.6562V22.6562Z" fill="#303030"/>
</g>
<defs>
<clipPath id="clip0_103_3447">
<rect width="25" height="25" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.8 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.3 KiB

View File

@ -0,0 +1,10 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_103_3414)">
<path d="M22.5 0.78125H15.7813C15.326 0.783305 14.8901 0.965047 14.5682 1.28693C14.2463 1.60881 14.0646 2.04479 14.0625 2.5V3.90625H2.8125C2.27441 3.90831 1.75895 4.12297 1.37846 4.50346C0.997975 4.88395 0.783308 5.39941 0.78125 5.9375V17.5C0.783308 18.0381 0.997975 18.5535 1.37846 18.934C1.75895 19.3145 2.27441 19.5292 2.8125 19.5312H8L7.57812 22.6562H6.92187C6.71467 22.6562 6.51596 22.7386 6.36945 22.8851C6.22293 23.0316 6.14062 23.2303 6.14062 23.4375C6.14062 23.6447 6.22293 23.8434 6.36945 23.9899C6.51596 24.1364 6.71467 24.2188 6.92187 24.2188H14.9531C15.1603 24.2188 15.359 24.1364 15.5056 23.9899C15.6521 23.8434 15.7344 23.6447 15.7344 23.4375C15.7344 23.2303 15.6521 23.0316 15.5056 22.8851C15.359 22.7386 15.1603 22.6562 14.9531 22.6562H14.2813L13.75 19.5312H19.0625C19.6006 19.5292 20.116 19.3145 20.4965 18.934C20.877 18.5535 21.0917 18.0381 21.0938 17.5V5.9375C21.0917 5.39941 20.877 4.88395 20.4965 4.50346C20.116 4.12297 19.6006 3.90831 19.0625 3.90625H15.625V2.5C15.625 2.45856 15.6415 2.41882 15.6708 2.38951C15.7001 2.36021 15.7398 2.34375 15.7813 2.34375H22.5C22.5414 2.34375 22.5812 2.36021 22.6105 2.38951C22.6398 2.41882 22.6562 2.45856 22.6562 2.5V20.9375C22.6562 20.9789 22.6398 21.0187 22.6105 21.048C22.5812 21.0773 22.5414 21.0938 22.5 21.0938H16.4062C16.199 21.0938 16.0003 21.1761 15.8538 21.3226C15.7073 21.4691 15.625 21.6678 15.625 21.875C15.625 22.0822 15.7073 22.2809 15.8538 22.4274C16.0003 22.5739 16.199 22.6562 16.4062 22.6562H22.5C22.9552 22.6542 23.3912 22.4725 23.7131 22.1506C24.035 21.8287 24.2167 21.3927 24.2188 20.9375V2.5C24.2167 2.04479 24.035 1.60881 23.7131 1.28693C23.3912 0.965047 22.9552 0.783305 22.5 0.78125ZM12.6953 22.6562H9.15625L9.57812 19.5312H12.1719L12.6953 22.6562ZM19.5312 5.9375V17.5C19.5312 17.5616 19.5191 17.6225 19.4956 17.6794C19.472 17.7363 19.4375 17.7879 19.394 17.8315C19.3504 17.875 19.2988 17.9095 19.2419 17.9331C19.185 17.9566 19.1241 17.9688 19.0625 17.9688H2.8125C2.68818 17.9688 2.56895 17.9194 2.48104 17.8315C2.39314 17.7435 2.34375 17.6243 2.34375 17.5V5.9375C2.34375 5.81318 2.39314 5.69395 2.48104 5.60604C2.56895 5.51814 2.68818 5.46875 2.8125 5.46875H19.0625C19.1241 5.46875 19.185 5.48087 19.2419 5.50443C19.2988 5.52799 19.3504 5.56252 19.394 5.60604C19.4375 5.64957 19.472 5.70125 19.4956 5.75812C19.5191 5.81499 19.5312 5.87594 19.5312 5.9375Z" fill="#303030"/>
</g>
<defs>
<clipPath id="clip0_103_3414">
<rect width="25" height="25" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -0,0 +1,11 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_103_3436)">
<path d="M13.889 9.72223H11.1112C10.927 9.72223 10.7504 9.79539 10.6201 9.92563C10.4899 10.0559 10.4167 10.2325 10.4167 10.4167V14.5833C10.4167 14.7675 10.4899 14.9442 10.6201 15.0744C10.7504 15.2046 10.927 15.2778 11.1112 15.2778H13.889C14.0731 15.2778 14.2498 15.2046 14.38 15.0744C14.5103 14.9442 14.5834 14.7675 14.5834 14.5833V10.4167C14.5834 10.2325 14.5103 10.0559 14.38 9.92563C14.2498 9.79539 14.0731 9.72223 13.889 9.72223ZM13.6112 14.3056H11.389V10.6945H13.6112V14.3056Z" fill="#303030"/>
<path d="M23.4098 8.59722L20.5695 5.75694C20.4401 5.62864 20.2656 5.55632 20.0834 5.55555H16.6111V4.20138C16.6206 3.83649 16.486 3.48256 16.2364 3.21614C15.9869 2.94973 15.6425 2.79225 15.2778 2.77777H9.61115C9.43291 2.78478 9.2579 2.82749 9.09646 2.90336C8.93503 2.97923 8.79046 3.08671 8.67131 3.21946C8.55217 3.3522 8.46087 3.5075 8.40282 3.67617C8.34477 3.84483 8.32116 4.02343 8.33337 4.20138V5.55555H4.91671C4.82531 5.55502 4.73471 5.57254 4.6501 5.6071C4.56549 5.64166 4.48854 5.69258 4.42365 5.75694L1.59032 8.59722C1.52595 8.6621 1.47503 8.73906 1.44048 8.82367C1.40592 8.90828 1.3884 8.99888 1.38893 9.09027V19.4444C1.38893 19.8128 1.53526 20.1661 1.79572 20.4265C2.05619 20.687 2.40946 20.8333 2.77782 20.8333H22.2223C22.5906 20.8333 22.9439 20.687 23.2044 20.4265C23.4648 20.1661 23.6111 19.8128 23.6111 19.4444V9.08333C23.6104 8.90115 23.5381 8.72656 23.4098 8.59722ZM9.72226 4.16666H15.2778V5.55555H9.72226V4.16666ZM22.2223 11.8055H15.2778V13.1458H22.2223V19.4444H2.77782V13.1458H9.72226V11.8055H2.77782V9.37499L5.20837 6.94444H19.7917L22.2223 9.37499V11.8055Z" fill="#303030"/>
</g>
<defs>
<clipPath id="clip0_103_3436">
<rect width="25" height="25" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -0,0 +1,3 @@
<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.4583 6.75C14.3348 6.75 16.6667 9.08185 16.6667 11.9583M17.3529 17.8489L21.875 22.375M19.7917 11.9583C19.7917 16.5607 16.0607 20.2917 11.4583 20.2917C6.85596 20.2917 3.125 16.5607 3.125 11.9583C3.125 7.35596 6.85596 3.625 11.4583 3.625C16.0607 3.625 19.7917 7.35596 19.7917 11.9583Z" stroke="#303030" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 482 B

18
src/main.tsx Normal file
View File

@ -0,0 +1,18 @@
import '@fontsource/inter'
import ReactDOM from 'react-dom/client'
import { ThemeProvider } from 'styled-components'
import App from './App.tsx'
import { GlobalStyles } from './assets/globalStyles.ts'
import { darkTheme, lightTheme } from './assets/theme.ts'
import Layout from './components/layout/Layout.tsx'
const theme = 'light'
ReactDOM.createRoot(document.getElementById('root')!).render(
<ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
<GlobalStyles />
<Layout>
<App />
</Layout>
</ThemeProvider>
)

30
tsconfig.json Normal file
View File

@ -0,0 +1,30 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": ".",
"paths": {
"src/*": ["src/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

11
tsconfig.node.json Normal file
View File

@ -0,0 +1,11 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"strict": true
},
"include": ["vite.config.ts"]
}

24
vite.config.ts Normal file
View File

@ -0,0 +1,24 @@
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import svgr from 'vite-plugin-svgr'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
svgr({
svgrOptions: {
exportType: 'named',
ref: true,
svgo: false,
titleProp: true
},
include: '**/*.svg'
})
],
resolve: {
alias: {
src: '/src'
}
}
})