create dayWishes component

src/components/VolunteerBoard/DayWishes/DayWishes.tsx

@@ -0,0 +1,38 @@
+import { FC, memo, useCallback, useState } from "react"
+import classnames from "classnames"
+import { daysChoice, daysChoiceSelectionDefaultState } from "./days.utils"
+import styles from "./styles.module.scss"
+
+const DayWishes: FC = (): JSX.Element | null => {
+    const [selection, setSelection] = useState(daysChoiceSelectionDefaultState)
+    const onChoiceClick = useCallback(
+        (id) => {
+            setSelection({
+                ...selection,
+                [id]: !selection[id],
+            })
+        },
+        [selection, setSelection]
+    )
+
+    return (
+        <ul className={styles.dayWishes}>
+            {daysChoice.map(({ id, label }) => (
+                <li key={id} className={styles.dayWishesItem}>
+                    <button
+                        type="button"
+                        onClick={() => onChoiceClick(id)}
+                        className={classnames(
+                            styles.dayWishesButton,
+                            selection[id] && styles.active
+                        )}
+                    >
+                        {label}
+                    </button>
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+export default memo(DayWishes)

src/components/VolunteerBoard/DayWishes/days.utils.ts

@@ -0,0 +1,15 @@
+const daysUtils = ["Jeudi", "Vendredi", "Samedi", "Dimanche", "Lundi"]
+
+export const daysChoice = daysUtils.map((label) => ({
+    id: label[0],
+    label,
+}))
+
+interface selectionChoices {
+    [key: string]: boolean
+}
+
+export const daysChoiceSelectionDefaultState = daysChoice.reduce((state, { id }) => {
+    state[id] = false
+    return state
+}, <selectionChoices>{})

src/components/VolunteerBoard/DayWishes/styles.module.scss

@@ -0,0 +1,28 @@
+@import "../../../theme/variables";
+@import "../../../theme/mixins";
+
+.dayWishes {
+    @include clear-ul-style;
+}
+
+.dayWishesItem {
+    display: inline-block;
+    margin: 2px;
+}
+
+.dayWishesButton {
+    margin: 0;
+    padding: 4px;
+    border: 0;
+    border-radius: 0;
+    width: 90px;
+    text-align: center;
+    color: $color-grey-dark;
+    background-color: $color-grey-light;
+    cursor: pointer;
+
+    &.active {
+        color: $color-yellow;
+        background-color: $color-black;
+    }
+}