mirror of
https://github.com/more-tech4-magnum-opus/frontend.git
synced 2024-11-22 00:26:35 +03:00
add some comps and base screens
This commit is contained in:
ilia
parent
86477bd461
commit
dcd4dde7b2
17785
package-lock.json
generated
17785
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
public/Respect.svg
Normal file
10
public/Respect.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="14" height="14" rx="7" fill="url(#paint0_linear_56_7526)"/>
|
||||||
|
<path d="M5 3.00005H9.03316C9.12502 2.99894 9.21616 3.01622 9.30124 3.05085C9.38631 3.08549 9.4636 3.13679 9.52856 3.20174C9.59351 3.2667 9.64482 3.34399 9.67946 3.42907C9.7141 3.51414 9.73136 3.6053 9.73025 3.69715V4.92535H6.88379V6.07058H9.73025V7.96268H6.88379V11H5V3.00005Z" fill="white"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_56_7526" x1="-1.04308e-07" y1="14" x2="14.9243" y2="12.9335" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#8637E9"/>
|
||||||
|
<stop offset="1" stop-color="#D33BE0"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 699 B |
10
public/Rubles.svg
Normal file
10
public/Rubles.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="14" height="14" rx="7" fill="url(#paint0_linear_56_7533)"/>
|
||||||
|
<path d="M4 7.61187C4.00216 7.42709 4.07653 7.25048 4.2072 7.11981C4.33787 6.98914 4.51448 6.91477 4.69927 6.91261H6.97189C7.10843 6.91514 7.24403 6.88941 7.37015 6.83704C7.49627 6.78467 7.61019 6.70679 7.70478 6.6083C7.79937 6.5098 7.87258 6.39281 7.9198 6.26467C7.96702 6.13653 7.98724 6.00002 7.97918 5.86369C7.96629 5.60164 7.85248 5.35475 7.66161 5.17474C7.47073 4.99473 7.21761 4.89556 6.95525 4.89803H4V3.00001H6.94692C7.71978 2.99777 8.46224 3.30095 9.01262 3.84354C9.56301 4.38613 9.87674 5.12418 9.88552 5.897C9.88646 6.4451 9.73009 6.98197 9.43497 7.44383C9.13984 7.9057 8.71836 8.27317 8.22059 8.50261L10.718 11H8.07907L5.91467 8.8356V11H4.01665L4 7.61187Z" fill="white"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_56_7533" x1="-1.04308e-07" y1="14" x2="14.9243" y2="12.9335" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#096DD9"/>
|
||||||
|
<stop offset="1" stop-color="#40A9FF"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
public/event-image.png
Normal file
BIN
public/event-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
3
public/eye.svg
Normal file
3
public/eye.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M7 9.80071C5.852 9.81471 4.7159 9.56691 3.6778 9.07621C2.87329 8.68365 2.15087 8.14153 1.5491 7.47881C0.911715 6.79358 0.409842 5.99386 0.0699999 5.12191L0 4.90071L0.0735 4.67951C0.413556 3.8083 0.914352 3.00878 1.5498 2.32261C2.15134 1.65993 2.87353 1.11781 3.6778 0.725205C4.7157 0.234217 5.85191 -0.0135668 7 0.00070543C8.148 -0.0132946 9.2841 0.234505 10.3222 0.725205C11.1272 1.11721 11.8489 1.65971 12.4509 2.32261C13.0893 3.00721 13.5919 3.80661 13.93 4.67951L14 4.90071L13.9265 5.12191C13.3904 6.51747 12.4385 7.71467 11.1997 8.5515C9.96082 9.38833 8.49481 9.8244 7 9.80071V9.80071ZM7 1.40071C5.83545 1.36421 4.68679 1.67836 3.7029 2.30242C2.71901 2.92648 1.94524 3.83168 1.4819 4.90071C1.94517 5.96979 2.71891 6.87505 3.70282 7.49912C4.68673 8.12319 5.83544 8.43729 7 8.40071C8.16453 8.4371 9.31315 8.12292 10.297 7.49887C11.2809 6.87482 12.0547 5.96967 12.5181 4.90071C12.0554 3.83122 11.2818 2.92558 10.2977 2.30143C9.31369 1.67727 8.1647 1.36345 7 1.40071V1.40071ZM7 7.00071C6.5103 7.00395 6.03467 6.83708 5.65434 6.5286C5.27401 6.22012 5.01257 5.78917 4.91468 5.30935C4.81678 4.82953 4.88851 4.3306 5.1176 3.89779C5.34669 3.46497 5.71894 3.12512 6.17077 2.93627C6.6226 2.74742 7.12597 2.72129 7.59492 2.86235C8.06387 3.0034 8.46931 3.30289 8.74198 3.70966C9.01465 4.11643 9.13765 4.60525 9.08996 5.09263C9.04227 5.58 8.82685 6.03571 8.4805 6.38191C8.28688 6.5778 8.05635 6.73335 7.80222 6.83957C7.54809 6.94579 7.27543 7.00055 7 7.00071V7.00071Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
BIN
public/logo_example.png
Normal file
BIN
public/logo_example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
|
|
@ -77,7 +77,10 @@ export const AddAdminMarketProduct:React.FC = () =>{
|
||||||
<div className="InpWrapper">
|
<div className="InpWrapper">
|
||||||
<div>Изображение</div>
|
<div>Изображение</div>
|
||||||
<div>
|
<div>
|
||||||
<FileUploader onResponse={(file)=>setFile(file)}></FileUploader>
|
<FileUploader onResponse={(file) => {
|
||||||
|
setFile(file);
|
||||||
|
console.log(file)
|
||||||
|
}}></FileUploader>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,6 @@ export const AdminMarketPopUp:React.FC = () =>{
|
||||||
let dispatch = useAppDispatch()
|
let dispatch = useAppDispatch()
|
||||||
let navigate = useNavigate()
|
let navigate = useNavigate()
|
||||||
const onSave = () =>{
|
const onSave = () =>{
|
||||||
console.log("cocb")
|
|
||||||
fetchChangeProduct(dispatch, {
|
fetchChangeProduct(dispatch, {
|
||||||
cost: cost,
|
cost: cost,
|
||||||
name: name,
|
name: name,
|
||||||
|
|
|
||||||
|
|
@ -13,10 +13,11 @@
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
overflow: visible;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
.links{
|
.links{
|
||||||
|
overflow: visible;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap:16px;
|
gap:16px;
|
||||||
|
|
@ -27,9 +28,11 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
.link{
|
.link{
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.043));
|
filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.043));
|
||||||
border-radius: 101px;
|
border-radius: 101px;
|
||||||
padding: 8px 16px;
|
padding: 5px 16px;
|
||||||
border: 1px solid #1890FF;
|
border: 1px solid #1890FF;
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -38,6 +41,7 @@
|
||||||
.activeLink{
|
.activeLink{
|
||||||
background: #1890FF;
|
background: #1890FF;
|
||||||
/* drop-shadow / button-primary */
|
/* drop-shadow / button-primary */
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.043);
|
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.043);
|
||||||
border-radius: 101px;
|
border-radius: 101px;
|
||||||
|
|
@ -46,6 +50,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.userInfo{
|
.userInfo{
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
16
src/components/button/index.tsx
Normal file
16
src/components/button/index.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import react from 'react'
|
||||||
|
import './style.css'
|
||||||
|
|
||||||
|
interface IEButton{
|
||||||
|
className: string;
|
||||||
|
disabled: boolean;
|
||||||
|
children?: react.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Button: react.FC<IEButton> = (props) => {
|
||||||
|
var classes = ['my-button', props.className];
|
||||||
|
if (props.disabled) classes.push('disabled')
|
||||||
|
return <button className={classes.join(' ')}>
|
||||||
|
{props.children}
|
||||||
|
</button>
|
||||||
|
}
|
||||||
15
src/components/button/style.css
Normal file
15
src/components/button/style.css
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
.my-button{
|
||||||
|
padding: 4px 15px;
|
||||||
|
border-radius: 30px;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
background-color: #1890FF;
|
||||||
|
font-size: 14px;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.disabled{
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid #1890FF;
|
||||||
|
color: #1890FF;
|
||||||
|
}
|
||||||
|
|
@ -12,11 +12,9 @@ export const FileUploader:React.FC<FileUploaderIE> = (data) =>{
|
||||||
|
|
||||||
const props = {
|
const props = {
|
||||||
name: 'file',
|
name: 'file',
|
||||||
action: host + '/api/',
|
|
||||||
headers: {
|
headers: {
|
||||||
authorization: 'authorization-text',
|
"content-type": 'multipart/form-data; boundary=----WebKitFormBoundaryqTqJIxvkWFYqvP5s'
|
||||||
},
|
},
|
||||||
|
|
||||||
onChange(info:any) {
|
onChange(info:any) {
|
||||||
if (info.file.status !== 'uploading') {
|
if (info.file.status !== 'uploading') {
|
||||||
}
|
}
|
||||||
|
|
@ -31,7 +29,11 @@ export const FileUploader:React.FC<FileUploaderIE> = (data) =>{
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Upload {...props} multiple>
|
<Upload {...props} customRequest={(file) => {
|
||||||
|
console.log(file);
|
||||||
|
}} onDownload={(file) => {
|
||||||
|
console.log(file)
|
||||||
|
}} multiple>
|
||||||
<Button icon={<UploadOutlined></UploadOutlined>}>Загрузите файлы для проверки</Button>
|
<Button icon={<UploadOutlined></UploadOutlined>}>Загрузите файлы для проверки</Button>
|
||||||
</Upload>
|
</Upload>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
53
src/components/userPreview/index.tsx
Normal file
53
src/components/userPreview/index.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
import { Tag } from 'antd'
|
||||||
|
import react from 'react'
|
||||||
|
|
||||||
|
|
||||||
|
interface IUserPreview{
|
||||||
|
level: number;
|
||||||
|
username: string;
|
||||||
|
score: string;
|
||||||
|
rubles: string;
|
||||||
|
fio: string;
|
||||||
|
id: number;
|
||||||
|
tg: string;
|
||||||
|
tags: react.ReactNode[];
|
||||||
|
description: string;
|
||||||
|
logo_url: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const UserPreview: react.FC<IUserPreview> = (props) => {
|
||||||
|
return <div className="self-info">
|
||||||
|
<img src={props.logo_url} alt="" className="self-img" />
|
||||||
|
<div className="information">
|
||||||
|
<div className="stats">
|
||||||
|
<div className="lvl">
|
||||||
|
Lvl <span>{props.level} {props.username}</span>
|
||||||
|
<img src="/Respect.svg" alt="" className='respect'/>
|
||||||
|
<span>{props.score}</span>
|
||||||
|
</div>
|
||||||
|
<div className="rubles">
|
||||||
|
<img src="/Rubles.svg" alt="" className="rubles-img" />
|
||||||
|
{props.rubles}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="fio-id">
|
||||||
|
<div className="id">
|
||||||
|
Id {props.id}
|
||||||
|
</div>
|
||||||
|
<div className="fio">
|
||||||
|
{props.fio}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="tg">
|
||||||
|
@{props.tg}
|
||||||
|
<img src="/eye.svg" alt="" className="eye" />
|
||||||
|
</div>
|
||||||
|
<div className="tags">
|
||||||
|
{props.tags}
|
||||||
|
</div>
|
||||||
|
<div className="description">
|
||||||
|
{props.description}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
168
src/components/userPreview/style.css
Normal file
168
src/components/userPreview/style.css
Normal file
|
|
@ -0,0 +1,168 @@
|
||||||
|
.content{
|
||||||
|
background-color: #262626;
|
||||||
|
color: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
.block{
|
||||||
|
margin-top: 100px;
|
||||||
|
width: 900px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.self-img{
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
.information{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.self-info{
|
||||||
|
display: flex;
|
||||||
|
padding: 20px 100px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.centered{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.stats{
|
||||||
|
display: inline-flex;
|
||||||
|
gap: 7px;
|
||||||
|
}
|
||||||
|
.lvl-back{
|
||||||
|
background: linear-gradient(85.91deg, #8637E9 0%, #D33BE0 100%);
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
}
|
||||||
|
.lvl{
|
||||||
|
padding: 1px;
|
||||||
|
border: 1px solid #8637E9;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px 30px;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lvl>span{
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rubles{
|
||||||
|
height: 32px;
|
||||||
|
border: 1px solid #1890FF;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 15px;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
color: #1890FF;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fio-id{
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fio{
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.tg{
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: linear-gradient(85.91deg, #096DD9 0%, #40A9FF 100%);
|
||||||
|
}
|
||||||
|
.events{
|
||||||
|
background-color: white;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 16px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sep{
|
||||||
|
height: 24px;
|
||||||
|
width: 2px;
|
||||||
|
background-color: #1890FF;
|
||||||
|
}
|
||||||
|
.buttons{
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.gift{
|
||||||
|
display: flex;
|
||||||
|
padding: 0px 10px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.header-events{
|
||||||
|
margin: 0px 100px;
|
||||||
|
}
|
||||||
|
.gift-content{
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
border: 1px solid #8637E9;
|
||||||
|
color: #8637E9;
|
||||||
|
padding: 4px 16px;
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
.content-header{
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 0px 10px;
|
||||||
|
color: black;
|
||||||
|
font-family: Roboto;
|
||||||
|
}
|
||||||
|
.descr{
|
||||||
|
color: #00000040;
|
||||||
|
padding: 0px 10px;
|
||||||
|
}
|
||||||
|
.par-title{
|
||||||
|
padding: 0px 10px;
|
||||||
|
color: #00000073;
|
||||||
|
}
|
||||||
|
.participant-content{
|
||||||
|
padding: 0px 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.grad-button{
|
||||||
|
margin: 10px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.content-events{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
margin: 20px 100px;
|
||||||
|
}
|
||||||
|
.grad-button{
|
||||||
|
background: linear-gradient(85.91deg, #8637E9 0%, #D33BE0 100%)!important;
|
||||||
|
}
|
||||||
|
.event{
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid #1890FF;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 5px;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
.gift{
|
||||||
|
font-family: Roboto;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
@ -15,8 +15,10 @@ import {
|
||||||
createRoutesFromElements,
|
createRoutesFromElements,
|
||||||
RouterProvider,
|
RouterProvider,
|
||||||
Link,
|
Link,
|
||||||
Routes
|
Routes,
|
||||||
} from "react-router-dom";
|
} from "react-router-dom";
|
||||||
|
import { UserLk } from './user/lk';
|
||||||
|
import { Clan } from './user/clan';
|
||||||
|
|
||||||
const container = document.getElementById('root')!;
|
const container = document.getElementById('root')!;
|
||||||
const root = createRoot(container);
|
const root = createRoot(container);
|
||||||
|
|
@ -28,7 +30,8 @@ const router = createBrowserRouter(
|
||||||
<Route path='admin/market/:id' element={<Provider store={adminStore}><AdminMarketPopUp></AdminMarketPopUp></Provider>}></Route>
|
<Route path='admin/market/:id' element={<Provider store={adminStore}><AdminMarketPopUp></AdminMarketPopUp></Provider>}></Route>
|
||||||
<Route path='admin/market/add' element={<Provider store={adminStore}><AddAdminMarketProduct></AddAdminMarketProduct></Provider>}></Route>
|
<Route path='admin/market/add' element={<Provider store={adminStore}><AddAdminMarketProduct></AddAdminMarketProduct></Provider>}></Route>
|
||||||
<Route path="hr"></Route>
|
<Route path="hr"></Route>
|
||||||
<Route path="user"></Route>
|
<Route path="user/lk/" element={<UserLk />} />
|
||||||
|
<Route path='user/clan' element={<Clan />} />
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
)
|
)
|
||||||
|
|
|
||||||
8
src/user/clan/index.tsx
Normal file
8
src/user/clan/index.tsx
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
import react from 'react'
|
||||||
|
import header from '../header'
|
||||||
|
|
||||||
|
export const Clan: react.FC = () => {
|
||||||
|
return <div>
|
||||||
|
{header}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
28
src/user/header.tsx
Normal file
28
src/user/header.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { Header } from "../components/Header";
|
||||||
|
|
||||||
|
export default <Header links={[
|
||||||
|
{
|
||||||
|
link: "/user/events",
|
||||||
|
name: "События"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "/user/clan",
|
||||||
|
name: "Мой клан"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "/user/leaderboard",
|
||||||
|
name: "Лидерборд"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "/user/clan-war",
|
||||||
|
name: "Битва кланов"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "/user/marketplace",
|
||||||
|
name: "Маркетплейс"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "/user/transaction-history",
|
||||||
|
name: "История транзакций"
|
||||||
|
}
|
||||||
|
]} name={"Пользователь Юзер"}/>
|
||||||
110
src/user/lk/index.tsx
Normal file
110
src/user/lk/index.tsx
Normal file
|
|
@ -0,0 +1,110 @@
|
||||||
|
import react from 'react'
|
||||||
|
import { Header } from '../../components/Header'
|
||||||
|
import './style.css'
|
||||||
|
import { Tag } from 'antd'
|
||||||
|
import { Button } from '../../components/button'
|
||||||
|
import { UserPreview } from '../../components/userPreview'
|
||||||
|
import header from "../header"
|
||||||
|
|
||||||
|
export const UserLk: react.FC = () => {
|
||||||
|
return <div>
|
||||||
|
{header}
|
||||||
|
<div className="centered">
|
||||||
|
<div className="block">
|
||||||
|
<div className="content">
|
||||||
|
<UserPreview
|
||||||
|
level={3}
|
||||||
|
logo_url='/logo_example.png'
|
||||||
|
username='BrainBreaker'
|
||||||
|
rubles='100'
|
||||||
|
fio='Vladimir Dubrovin'
|
||||||
|
id={123}
|
||||||
|
tg={'dubrovin_vladimir'}
|
||||||
|
tags={[<Tag color={'blue'}>Designer</Tag>]}
|
||||||
|
description={"Очень долгое описание"}
|
||||||
|
score={"700 / 800"}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className="events">
|
||||||
|
<div className="header-events">
|
||||||
|
<div className="buttons">
|
||||||
|
<Button className='' disabled={false} children={<span>Все события</span>} />
|
||||||
|
<div className="sep"></div>
|
||||||
|
<Button className='' disabled={true} children={<span>Участвую</span>} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="content-events">
|
||||||
|
<div className="event">
|
||||||
|
<img src="/event-image.png" alt="" className="event-photo" />
|
||||||
|
<div className="gift">
|
||||||
|
<span className="title-gift">Награда</span>
|
||||||
|
<div className="gift-content">
|
||||||
|
<img src="/Respect.svg" alt="" />
|
||||||
|
260
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="content-header">MEETUP «творческий рост 4.0»</div>
|
||||||
|
<div className="descr">Посидим, поговорим о творчестве. Ведь Люди...</div>
|
||||||
|
<div className="participants">
|
||||||
|
<div className="par-title">Кол-во участников</div>
|
||||||
|
<div className="participant-content">28/35</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
disabled={false}
|
||||||
|
children={<span>Присоединиться</span>}
|
||||||
|
className='grad-button'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="event">
|
||||||
|
<img src="/event-image.png" alt="" className="event-photo" />
|
||||||
|
<div className="gift">
|
||||||
|
<span className="title-gift">Награда</span>
|
||||||
|
<div className="gift-content">
|
||||||
|
<img src="/Respect.svg" alt="" />
|
||||||
|
260
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="content-header">MEETUP «творческий рост 4.0»</div>
|
||||||
|
<div className="descr">Посидим, поговорим о творчестве. Ведь Люди...</div>
|
||||||
|
<div className="participants">
|
||||||
|
<div className="par-title">Кол-во участников</div>
|
||||||
|
<div className="participant-content">28/35</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
disabled={false}
|
||||||
|
children={<span>Присоединиться</span>}
|
||||||
|
className='grad-button'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="event">
|
||||||
|
<img src="/event-image.png" alt="" className="event-photo" />
|
||||||
|
<div className="gift">
|
||||||
|
<span className="title-gift">Награда</span>
|
||||||
|
<div className="gift-content">
|
||||||
|
<img src="/Respect.svg" alt="" />
|
||||||
|
260
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="content-header">MEETUP «творческий рост 4.0»</div>
|
||||||
|
<div className="descr">Посидим, поговорим о творчестве. Ведь Люди...</div>
|
||||||
|
<div className="participants">
|
||||||
|
<div className="par-title">Кол-во участников</div>
|
||||||
|
<div className="participant-content">28/35</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
disabled={false}
|
||||||
|
children={<span>Присоединиться</span>}
|
||||||
|
className='grad-button'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
}
|
||||||
168
src/user/lk/style.css
Normal file
168
src/user/lk/style.css
Normal file
|
|
@ -0,0 +1,168 @@
|
||||||
|
.content{
|
||||||
|
background-color: #262626;
|
||||||
|
color: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
.block{
|
||||||
|
margin-top: 100px;
|
||||||
|
width: 900px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.self-img{
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
.information{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.self-info{
|
||||||
|
display: flex;
|
||||||
|
padding: 20px 100px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.centered{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.stats{
|
||||||
|
display: inline-flex;
|
||||||
|
gap: 7px;
|
||||||
|
}
|
||||||
|
.lvl-back{
|
||||||
|
background: linear-gradient(85.91deg, #8637E9 0%, #D33BE0 100%);
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
}
|
||||||
|
.lvl{
|
||||||
|
padding: 1px;
|
||||||
|
border: 1px solid #8637E9;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px 30px;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lvl>span{
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rubles{
|
||||||
|
height: 32px;
|
||||||
|
border: 1px solid #1890FF;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 15px;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
color: #1890FF;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fio-id{
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fio{
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.tg{
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: linear-gradient(85.91deg, #096DD9 0%, #40A9FF 100%);
|
||||||
|
}
|
||||||
|
.events{
|
||||||
|
background-color: white;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 16px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sep{
|
||||||
|
height: 24px;
|
||||||
|
width: 2px;
|
||||||
|
background-color: #1890FF;
|
||||||
|
}
|
||||||
|
.buttons{
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.gift{
|
||||||
|
display: flex;
|
||||||
|
padding: 0px 10px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.header-events{
|
||||||
|
margin: 0px 100px;
|
||||||
|
}
|
||||||
|
.gift-content{
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
border: 1px solid #8637E9;
|
||||||
|
color: #8637E9;
|
||||||
|
padding: 4px 16px;
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
.content-header{
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 0px 10px;
|
||||||
|
color: black;
|
||||||
|
font-family: Roboto;
|
||||||
|
}
|
||||||
|
.descr{
|
||||||
|
color: #00000040;
|
||||||
|
padding: 0px 10px;
|
||||||
|
}
|
||||||
|
.par-title{
|
||||||
|
padding: 0px 10px;
|
||||||
|
color: #00000073;
|
||||||
|
}
|
||||||
|
.participant-content{
|
||||||
|
padding: 0px 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.grad-button{
|
||||||
|
margin: 10px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.content-events{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
margin: 20px 100px;
|
||||||
|
}
|
||||||
|
.grad-button{
|
||||||
|
background: linear-gradient(85.91deg, #8637E9 0%, #D33BE0 100%)!important;
|
||||||
|
}
|
||||||
|
.event{
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid #1890FF;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 5px;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
.gift{
|
||||||
|
font-family: Roboto;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user