From d3efab753fc92cd49acc5de350d988a0fcd8a6ca Mon Sep 17 00:00:00 2001
From: cue <cu.e@arelon.org>
Date: Wed, 3 Apr 2024 05:45:05 +0300
Subject: [PATCH] add user card, design fix

---
 .../components/pages/Admin/Admin.module.less  | 14 ++++++++--
 frontend/src/components/pages/Admin/Admin.tsx | 26 +++++++++++++------
 .../pages/SkillTree/SkillTree.module.less     |  8 +++++-
 .../components/pages/SkillTree/SkillTree.tsx  |  1 +
 4 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/pages/Admin/Admin.module.less b/frontend/src/components/pages/Admin/Admin.module.less
index 8cbf9ef..bd7eda8 100644
--- a/frontend/src/components/pages/Admin/Admin.module.less
+++ b/frontend/src/components/pages/Admin/Admin.module.less
@@ -5,6 +5,16 @@
     justify-content: center;
     align-items: center;
     gap: 50px;
-    margin-top: 40px;
     height: 70vh;
-}
\ No newline at end of file
+}
+.full-content{
+    padding-top: 80px;
+
+}
+.card{
+    max-width: 800px;
+    padding: 20px;
+    margin-bottom: 10px;
+    margin-left: 5px;
+
+}
diff --git a/frontend/src/components/pages/Admin/Admin.tsx b/frontend/src/components/pages/Admin/Admin.tsx
index 86e2f6e..b5dc2e1 100644
--- a/frontend/src/components/pages/Admin/Admin.tsx
+++ b/frontend/src/components/pages/Admin/Admin.tsx
@@ -10,6 +10,8 @@ import { useTranslation } from "react-i18next";
 import CreateTeam from "../../widgets/CreateTeams/CreateTeams";
 import { UserList } from "../AdminEventPage/AdminEventAPI";
 import { useEffect, useState } from "react";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "../../shared/ui/card"
+
 
 const AdminPage = () => {
   const { t } = useTranslation();
@@ -34,22 +36,30 @@ var result = window.location.pathname.substring(index);
         });
     }, []);
   return (
-    <ResizablePanelGroup direction="horizontal">
-      <ResizablePanel defaultSize={95} maxSize={95}>
+    <ResizablePanelGroup className={less["full-content"]} direction="horizontal">
+      <ResizablePanel defaultSize={60} maxSize={60}>
         <div className={less["main-admin"]}>
-          <Button>{t("EditTree")}</Button>
           <CreateTeam />
         </div>
       </ResizablePanel>
       <ResizableHandle withHandle />
       <ResizablePanel>
+      <h4>Members: {players.length}</h4>
       {players.map((event) => (
-        <div>{event.first_name}</div>
+        <Card className={`${less["card"]} flex flex-row `}>
+        <div className="flex flex-col">
+          <CardHeader className="p-0">
+            <CardTitle className="p-0">{`${event.first_name} | ${event.email}`}</CardTitle>
+          </CardHeader >
+          <CardContent className="p-0 mt-2">
+            <p>{t("skills")}:</p>
+            <p>{event.bio}</p>
+        
+          </CardContent>
+          </div>
+        </Card>
       ))}
-        <PlayerCard />
-        <PlayerCard />
-        <PlayerCard />
-        <PlayerCard />
+
       </ResizablePanel>
     </ResizablePanelGroup>
   );
diff --git a/frontend/src/components/pages/SkillTree/SkillTree.module.less b/frontend/src/components/pages/SkillTree/SkillTree.module.less
index 64fd32e..e6c397b 100644
--- a/frontend/src/components/pages/SkillTree/SkillTree.module.less
+++ b/frontend/src/components/pages/SkillTree/SkillTree.module.less
@@ -1,11 +1,12 @@
 .general{
     display: flex;
     flex-direction: row;
-    padding-top: 100px;
+    padding-top: 80px;
 }
 .left{
 width: 50%;
 padding: 20px;
+padding-top: 0;
 }
 .right{
     width: 50%;
@@ -33,4 +34,9 @@ padding: 20px;
     justify-content: space-between;
     align-items: center;
     padding: 0;
+
+}
+.h2{
+    font-size: 24px;
+    font-weight: 600;
 }
\ No newline at end of file
diff --git a/frontend/src/components/pages/SkillTree/SkillTree.tsx b/frontend/src/components/pages/SkillTree/SkillTree.tsx
index 8d268c8..506b2a3 100644
--- a/frontend/src/components/pages/SkillTree/SkillTree.tsx
+++ b/frontend/src/components/pages/SkillTree/SkillTree.tsx
@@ -47,6 +47,7 @@ const SkillTree = () => {
     return (
         <div className={less["general"]}>
             <div className={less["left"]}>
+              <h2 className={less["h2"]}>Create event</h2>
                 <form className={less["input-form"]} onSubmit={(event) => addEvent(event)}>
                     <Input type="text" name="title" placeholder="Event name" />
                     <Input type="text" name="description" placeholder="Last name" />