SMA-32: Implement upcoming match and match in progress (#22)

frontend/sportsmatch-app/src/components/Match.tsx

@@ -0,0 +1,82 @@
+import '../styles/Match.css'
+import {
+  LuSwords,
+  LuMapPin,
+  LuMedal,
+  LuCalendarCheck,
+  LuCalendarX,
+  LuSettings2,
+} from 'react-icons/lu'
+
+interface InProgressProps {
+  event: {
+    id: number
+    maxElo: number
+    minElo: number
+    dateEnd: string
+    dateStart: string
+    location: string
+    title: string
+    sport: string
+    playerOne: string
+    playerTwo?: string
+  }
+}
+
+function InProgress({ event }: InProgressProps) {
+  return (
+    <>
+      <div className="container-sm">
+        <div className="match">
+          <div className="row">
+            <div className="col position-relative">
+              <a
+                href="test/1"
+                className="overlap position-absolute top-0 end-0"
+              >
+                <LuSettings2 />
+              </a>
+              {event.playerTwo === null ? (
+                <h1>
+                  Matchmaking
+                  <br /> in progress
+                </h1>
+              ) : (
+                <h1>
+                  Upcoming
+                  <br /> match
+                </h1>
+              )}
+              <ul>
+                <li>
+                  <LuSwords />{' '}
+                  {event.playerTwo === null
+                    ? 'Awaiting opponent...'
+                    : event.playerTwo}
+                </li>
+                <li>
+                  <LuMapPin />
+                  {event.location}
+                </li>
+                <li>
+                  <LuMedal />
+                  {event.minElo} - {event.maxElo}
+                </li>
+                <li>
+                  <LuCalendarCheck />
+                  {event.dateStart}
+                </li>
+                <li>
+                  <LuCalendarX />
+                  {event.dateEnd}
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default InProgress

frontend/sportsmatch-app/src/components/SportEvent.test.tsx

@@ -18,14 +18,19 @@ describe('SportEvent', async () => {
     render(<SportEvent event={mockEvent} />)
 
     // Assert that the rendered component contains the expected data
-    expect(screen.getByText(`📍${mockEvent.location}`)).toBeInTheDocument()
+    expect(screen.getByText(`Test Location`)).toBeInTheDocument()
     expect(
-      screen.getByText(`🏅${mockEvent.minElo} - ${mockEvent.maxElo}`),
-    ).toBeInTheDocument()
-    expect(
-      screen.getByText(`📆${mockEvent.dateStart} to ${mockEvent.dateEnd}`),
+      screen.getByText(`${mockEvent.minElo} - ${mockEvent.maxElo}`),
     ).toBeInTheDocument()
+    expect(screen.getByText(`${mockEvent.dateStart}`)).toBeInTheDocument()
+    expect(screen.getByText(`${mockEvent.dateEnd}`)).toBeInTheDocument()
     expect(screen.getByText(mockEvent.title)).toBeInTheDocument()
+
+    // Check for the presence of react-icons
+    expect(screen.getByTestId('luMapPin')).toBeInTheDocument()
+    expect(screen.getByTestId('luMedal')).toBeInTheDocument()
+    expect(screen.getByTestId('luCalendarCheck')).toBeInTheDocument()
+    expect(screen.getByTestId('luCalendarX')).toBeInTheDocument()
   })
 
   it('renders the component without playerTwo when it is not provided', () => {

frontend/sportsmatch-app/src/components/SportEvent.tsx

@@ -1,4 +1,5 @@
 import '../styles/SportEvent.css'
+import { LuMapPin, LuMedal, LuCalendarCheck, LuCalendarX } from 'react-icons/lu'
 
 interface SportEventProps {
   event: {
@@ -19,20 +20,29 @@ function SportEvent({ event }: SportEventProps) {
   return (
     <>
       <div className="container-sm">
-        <div className="event-card">
-          <div className="left">
-            <ul>
-              <li>📍{event.location}</li>
-              <li>
-                🏅{event.minElo} - {event.maxElo}
-              </li>
-              <li>
-                📆{event.dateStart} to {event.dateEnd}
-              </li>
-            </ul>
-          </div>
-          <div className="right">
-            <h3>{event.title}</h3>
+        <div className="event">
+          <div className="row">
+            <div className="col left">
+              <ul>
+                <li data-testid="luMapPin">
+                  <LuMapPin /> {event.location}
+                </li>
+                <li data-testid="luMedal">
+                  <LuMedal /> {event.minElo} - {event.maxElo}
+                </li>
+                <li data-testid="luCalendarCheck">
+                  <LuCalendarCheck />
+                  {event.dateStart}
+                </li>
+                <li data-testid="luCalendarX">
+                  <LuCalendarX />
+                  {event.dateEnd}
+                </li>
+              </ul>
+            </div>
+            <div className="col right">
+              <h3>{event.title}</h3>
+            </div>
           </div>
         </div>
       </div>

frontend/sportsmatch-app/src/pages/Home.tsx

@@ -1,11 +1,12 @@
+import Match from '../components/Match'
 import SportEvent from '../components/SportEvent'
 
 function Home() {
   const sampleEvent = {
     id: 1,
     maxElo: 2000,
     minElo: 1200,
-    dateEnd: '2024-05-01',
+    dateEnd: '2024-05-02',
     dateStart: '2024-05-01',
     location: 'Prague, Stadium A',
     title: 'Badminton match',
@@ -16,6 +17,7 @@ function Home() {
 
   return (
     <>
+      <Match event={sampleEvent} />
       <SportEvent event={sampleEvent} />
     </>
   )

frontend/sportsmatch-app/src/styles/Match.css

@@ -0,0 +1,56 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap');
+
+svg {
+  color: #fff;
+}
+
+.match {
+  margin-top: 4em;
+}
+
+.match .row {
+  margin: 0.75em 0;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
+  background: linear-gradient(
+      0deg,
+      rgba(232, 95, 41, 0.25),
+      rgba(232, 95, 41, 0.25)
+    ),
+    url(./assets/InProgress.png);
+  background-clip: content-box;
+  background-size: cover;
+  border-radius: 2px;
+  min-height: 395px;
+}
+
+.match .col {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 0.563em;
+}
+
+.match .col ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  color: #fff;
+}
+
+.match .col svg {
+  margin-right: 0.5em;
+}
+
+.match h1 {
+  font-family: 'Manrope', sans-serif;
+  font-size: 2.5em !important;
+  font-weight: 900;
+  font-size: 1em;
+
+  color: #fff;
+}
+
+.match .overlap {
+  padding-top: 0.563em;
+  padding-right: 0.563em;
+}

frontend/sportsmatch-app/src/styles/SportEvent.css

@@ -1,59 +1,64 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap');
 
+* {
+  font-family: 'Inter', sans-serif;
+}
+
+body {
+  background-color: #F9F8F5;
+}
+
+.event .row {
+  padding: 0.75em;
+  min-height: 6.625em;
+}
+
+.event .col.left {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  border-top-left-radius: 0.125em;
+  border-bottom-left-radius: 0.125em;
+}
 
-.container {
+.event .col.right {
   display: flex;
-  justify-content: center;
-  margin-top: 5%;
-
-}
-.event-card {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    min-width: 361px;
-    min-height: 106px;
-    margin: 16px;
-    font-size: 10px;
-    font-family: 'Inter', sans-serif;
-    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
-    border-radius: 2px;
-}
-
-.left {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    padding: 9px;
-  }
-
-.right {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: flex-end;
-    background:linear-gradient(0deg, rgba(232, 95, 41, 0.25), rgba(232, 95, 41, 0.25)), url(https://images.pexels.com/photos/8007406/pexels-photo-8007406.jpeg);
-    background-size: cover;
-    background-position: bottom;
-    color: #fff; 
-    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
-    border-bottom-right-radius: 2px;
-    border-top-right-radius: 2px;
-    padding: 0 9px;
-  }
-
-  .right h3 {
-    font-weight: 900;
-    font-size: 24px;
-    text-transform: uppercase;
-    text-align: right;
-  }
-
-.event-card ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-.event-card ul li {
-    color: #393939;
+  flex-direction: column;
+  justify-content: flex-end;
+  text-align: right;
+  background: linear-gradient(
+      0deg,
+      rgba(232, 95, 41, 0.25),
+      rgba(232, 95, 41, 0.25)
+    ),
+    url('/assets/img-event-card-badminton.png');
+  background-size: cover;
+  background-position: top;
+  border-bottom-right-radius: 0.125em;
+  border-top-right-radius: 0.125em;
 }
+
+.event .col.right h3 {
+  font-weight: 900;
+  font-size: 1.5em;
+  text-transform: uppercase;
+  text-align: right;
+  color: #fff;
+}
+
+.event ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.event svg {
+  color: #393939;
+  margin-right: 0.5em;
+}
+
+.event ul li {
+  color: #393939;
+  font-size: 0.78em;
+}