Merge pull request #1 from more-tech4-magnum-opus/clans-and-user-comp

add some comps and base screens

public/Respect.svg

@@ -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>

public/Rubles.svg

@@ -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>

public/eye.svg

@@ -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>

src/admin/addAdminMarketCard/index.tsx

@@ -77,7 +77,10 @@ export const AddAdminMarketProduct:React.FC = () =>{
                         <div className="InpWrapper">
                             <div>Изображение</div>
                             <div>
-                                <FileUploader onResponse={(file)=>setFile(file)}></FileUploader>
+                                <FileUploader onResponse={(file) => {
+                                    setFile(file);
+                                    console.log(file)
+                                }}></FileUploader>
                             </div>
                         </div>
                     </div>

src/admin/adminMarketPopUp/index.tsx

@@ -20,7 +20,6 @@ export const AdminMarketPopUp:React.FC = () =>{
     let dispatch = useAppDispatch()
     let navigate = useNavigate()
     const onSave = () =>{
-        console.log("cocb")
         fetchChangeProduct(dispatch, {
             cost: cost, 
             name: name,

src/components/Header/Header.css

@@ -13,10 +13,11 @@
     font-weight: 700;
     font-size: 16px;
     line-height: 24px;
-
+    overflow: visible;
     color: #FFFFFF;
 }
 .links{
+    overflow: visible;
     display: flex;
     flex-direction: row;
     gap:16px;
@@ -27,9 +28,11 @@
 
 }
 .link{
+    overflow: visible;
+
     filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.043));
     border-radius: 101px;
-    padding: 8px 16px;
+    padding: 5px 16px;
     border: 1px solid #1890FF;
 
 
@@ -38,7 +41,8 @@
 .activeLink{
     background: #1890FF;
     /* drop-shadow / button-primary */
-    
+    overflow: visible;
+
     box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.043);
     border-radius: 101px;
     padding: 8px 16px;
@@ -46,6 +50,8 @@
 }
 
 .userInfo{
+    overflow: visible;
+
     display: flex;
     flex-direction: row;
     align-items: center;

src/components/button/index.tsx

@@ -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>
+}

src/components/button/style.css

@@ -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;
+}

src/components/fileUploader.tsx

@@ -12,11 +12,9 @@ export const FileUploader:React.FC<FileUploaderIE> = (data) =>{
 
     const props = {
         name: 'file',
-        action: host + '/api/',
         headers: {
-          authorization: 'authorization-text',
+            "content-type": 'multipart/form-data; boundary=----WebKitFormBoundaryqTqJIxvkWFYqvP5s'
         },
-      
         onChange(info:any) {
           if (info.file.status !== 'uploading') {
           }
@@ -31,7 +29,11 @@ export const FileUploader:React.FC<FileUploaderIE> = (data) =>{
       };
       
     return (
-            <Upload {...props} multiple>
+            <Upload {...props} customRequest={(file) => {
+                console.log(file);
+            }} onDownload={(file) => {
+                console.log(file)
+            }} multiple>
               <Button icon={<UploadOutlined></UploadOutlined>}>Загрузите файлы для проверки</Button>
             </Upload>
       );

src/components/userPreview/index.tsx

@@ -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>
+}

src/components/userPreview/style.css

@@ -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;
+}

src/index.tsx

@@ -15,8 +15,10 @@ import {
   createRoutesFromElements,
   RouterProvider,
   Link,
-  Routes
+  Routes,
 } from "react-router-dom";
+import { UserLk } from './user/lk';
+import { Clan } from './user/clan';
 
 const container = document.getElementById('root')!;
 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/add' element={<Provider store={adminStore}><AddAdminMarketProduct></AddAdminMarketProduct></Provider>}></Route>
           <Route path="hr"></Route>
-          <Route path="user"></Route>
+          <Route path="user/lk/" element={<UserLk />} />
+          <Route path='user/clan' element={<Clan />} /> 
     </Route>
           
   )

src/user/clan/index.tsx

@@ -0,0 +1,8 @@
+import react from 'react'
+import header from '../header'
+
+export const Clan: react.FC = () => {
+    return <div>
+        {header}
+    </div>
+}

src/user/header.tsx

@@ -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={"Пользователь Юзер"}/>

src/user/lk/index.tsx

@@ -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>
+}

src/user/lk/style.css

@@ -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;
+}