Add TeamList ui component and teamList selectors

src/components/Teams/TeamIntro.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+
+const TeamIntro: React.FC = (): JSX.Element => (
+    <div>
+        <h1>Les Equipes</h1>
+        <p>
+            Lors de votre participation au festival en tant que bénévole, vous allez faire partie
+            d&apos;une des nombreuses équipes présentes sur le festival.
+        </p>
+        <p>
+            Afin de vous aidez dans votre choix, voici la liste et la description des équipes. Vous
+            pouvez renseigner dans votre profil les équipes qui vous intéressent et vous serez
+            affectés à l&apos;une d&apos;elle en fonction des demandes de chacun. N&apos;hésitez pas
+            à indiquer plusieurs choix pour nous faciliter la tâche.
+        </p>
+        <p>
+            Vous choisissez votre équipe pour son rôle durant le festival. Certaines d&apos;entre
+            elles demandent de la préparation en amont, voire quelques tâches après le festival.
+            N&apos;hésitez pas à vous manifester si vous souhaitez y participer.
+        </p>
+    </div>
+)
+
+export default TeamIntro

src/components/Teams/TeamItem.tsx

@@ -0,0 +1,19 @@
+import React, { memo } from "react"
+import styles from "./styles.module.scss"
+import { Team } from "../../services/teams"
+
+interface Props {
+    team: Team
+}
+
+const TeamItem: React.FC<Props> = ({ team }): JSX.Element => {
+    const { name, description } = team
+    return (
+        <li className={styles.teamItem}>
+            <div className={styles.teamName}>{name}</div>
+            <div className={styles.teamDescription}>{description}</div>
+        </li>
+    )
+}
+
+export default memo(TeamItem)

src/components/Teams/TeamList.tsx

@@ -0,0 +1,20 @@
+import React, { memo } from "react"
+import { useSelector } from "react-redux"
+import styles from "./styles.module.scss"
+import TeamItem from "./TeamItem"
+import { selectTeamList } from "../../store/teamList"
+
+const TeamList: React.FC = (): JSX.Element | null => {
+    const teams = useSelector(selectTeamList)
+    if (!teams || teams.length === 0) return null
+
+    return (
+        <ul className={styles.teamList}>
+            {teams.map((team: any) => (
+                <TeamItem team={team} key={team.id} />
+            ))}
+        </ul>
+    )
+}
+
+export default memo(TeamList)

src/components/Teams/styles.module.scss

@@ -0,0 +1,18 @@
+@import "../../theme/variables";
+@import "../../theme/mixins";
+
+.teamList {
+    padding: 0;
+    list-style: none;
+}
+
+.teamItem {
+    padding: 10px 0;
+}
+
+.teamName {
+    font-weight: bold;
+}
+
+.teamDescription {
+}