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

market

src/user/marketplace/index.tsx

@@ -1,6 +1,51 @@
+import { Tag } from 'antd';
 import react from 'react'
+import { PrevMarketCard } from '../../components/prevMarketCard';
+import { UserPreview } from '../../components/userPreview';
 import header from '../header'
 
+import './style.css';
+
 export const Marketplace: react.FC = () => {
-    return <div>{header}</div>
+    return <div>
+        {header}
+        <div className="centered">
+            <div className="mp-container">
+                <div className="mp-previev">
+                    <UserPreview 
+                        level={3}
+                        username="Vladimir"
+                        score={"100 / 800"}
+                        rubles={'100'}
+                        fio={"Vladimir Dubrovin"}
+                        id={32}
+                        tags={[<Tag color="cyan">Designer</Tag>]}
+                        tg={"vladimir_dubrovin"}
+                        description="Долгое описание"
+                        logo_url='/logo_example.png'
+                    />
+                </div>
+                <div className="mp-content">
+                    <PrevMarketCard 
+                        cost={100}
+                        name="Кружка"
+                        image='/cup.png'
+                        descr='Долгое описание'
+                    />
+                    <PrevMarketCard 
+                        cost={100}
+                        name="Кружка"
+                        image='/cup.png'
+                        descr='Долгое описание'
+                    />
+                    <PrevMarketCard 
+                        cost={100}
+                        name="Кружка"
+                        image='/cup.png'
+                        descr='Долгое описание'
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
 }

src/user/marketplace/style.css

@@ -0,0 +1,26 @@
+.centered{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.mp-container{
+    width: 900px;
+    margin-top: 100px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+.mp-previev{
+    background-color: #262626;
+    color: white;
+    border-radius: 16px;
+}
+
+.mp-content{
+    padding: 20px 100px;
+    background-color: white;
+    border-radius: 16px;
+    display: flex;
+    gap: 10px;
+}