Add full time differencial on matches list

Andres2D · Feb 12, 2023 · a0bb33d · a0bb33d
1 parent 466f149
commit a0bb33d
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 4 deletions.
diff --git a/components/matches/match-list.tsx b/components/matches/match-list.tsx
@@ -205,6 +205,8 @@ const MatchList: NextPage<Props> = ({ matches }) => {
               <Team
                 name={home_team.name}
                 image={home_team.shield}
+                fullTime={fullTime}
+                score={homeScore}
                 width={120}
                 height={120}
               />
@@ -225,6 +227,8 @@ const MatchList: NextPage<Props> = ({ matches }) => {
               <Team
                 name={away_team.name}
                 image={away_team.shield}
+                fullTime={fullTime}
+                score={awayScore}
                 width={120}
                 height={120}
               />
@@ -235,6 +239,7 @@ const MatchList: NextPage<Props> = ({ matches }) => {
               colorScheme="teal"
               size="md"
               mb={2}
+              disabled={fullTime}
               aria-label="Edit match"
               icon={<SettingsIcon />}
             />
@@ -262,6 +267,7 @@ const MatchList: NextPage<Props> = ({ matches }) => {
               size="md"
               aria-label="Deleted match"
               mb={2}
+              disabled={fullTime}
               onClick={() =>
                 showLeaveMatchModal({
                   _id,
@@ -278,6 +284,7 @@ const MatchList: NextPage<Props> = ({ matches }) => {
             />
             <IconButton
               colorScheme="green"
+              disabled={fullTime}
               size="md"
               aria-label="Full time"
               onClick={() =>

diff --git a/components/matches/team.module.scss b/components/matches/team.module.scss
@@ -4,9 +4,17 @@
   align-items: center;
   position: relative;
 
-  .tag {
+  .tag,
+  .score {
     color: #333 !important;
-    margin-top: 20px;
+  }
+
+  .tag {
+    margin-top: 10px;
+  }
+
+  .score {
+    margin-top: 5px;
   }
 
   .logoShadow {

diff --git a/components/matches/team.tsx b/components/matches/team.tsx
@@ -6,11 +6,13 @@ import styles from './team.module.scss';
 interface Props {
   name: string;
   image: string;
+  fullTime: boolean,
+  score: number;
   width: number;
   height: number;
 }
 
-const Team: NextPage<Props> = ({name, image, width, height}: Props) => {
+const Team: NextPage<Props> = ({name, image, fullTime, score, width, height}: Props) => {
   return (
     <div className={styles.team}>
       <Image
@@ -28,6 +30,17 @@ const Team: NextPage<Props> = ({name, image, width, height}: Props) => {
       >
         {name}
       </Tag>
+      {
+        fullTime && 
+        <Tag 
+          size='lg' 
+          variant='solid' 
+          colorScheme='clean'
+          className={styles.score}
+        >
+          {score}
+        </Tag>
+      }
     </div>
   );
 }

diff --git a/pages/matches/[...matchId]/index.tsx b/pages/matches/[...matchId]/index.tsx
@@ -48,7 +48,7 @@ const MatchDetails: NextPage<Props> = ({match, profile}) => {
     <>
       <HeaderSettings 
         title={`${matchDetail.match.home_team.name} vs ${matchDetail.match.away_team.name}`} 
-        description='Set the line uo' 
+        description='Set the line up' 
       />
       <MatchDetailsLayout />
     </>