add component for d day informations

src/components/VolunteerBoard/DDayInformations/DDaysInformations.tsx

@@ -0,0 +1,76 @@
+import { FC, memo, useCallback, useRef, useState } from "react"
+import styles from "./styles.module.scss"
+
+const sizes = ["XS", "S", "M", "L", "XL", "XXL"]
+
+const DDayInformations: FC = (): JSX.Element | null => {
+    const sizeRef = useRef<HTMLSelectElement | null>(null)
+    const dietRef = useRef<HTMLInputElement | null>(null)
+    const ageRef = useRef<HTMLInputElement | null>(null)
+    const commentRef = useRef<HTMLTextAreaElement | null>(null)
+    const [has2Shirts, setHas2Shirts] = useState<boolean | null>(null)
+
+    const onSubmit = useCallback(() => {
+        console.log("on submit")
+    }, [])
+
+    const onHas2ShirtsClick = useCallback(
+        (value) => {
+            setHas2Shirts(value)
+        },
+        [setHas2Shirts]
+    )
+
+    return (
+        <div className={styles.ddayInfo}>
+            <div className={styles.ddayTitle}>Informations pour le festival</div>
+            <div className={styles.ddayInfoShirtWrapper}>
+                <div className={styles.ddayShirtLabel}>J&apos;ai déjà 2 t-shirts</div>
+                <label>
+                    <input type="radio" name="hasShirt" onClick={() => onHas2ShirtsClick(true)} />{" "}
+                    Oui
+                </label>
+                <label>
+                    <input type="radio" name="hasShirt" onClick={() => onHas2ShirtsClick(false)} />{" "}
+                    Non
+                </label>
+                {has2Shirts === false && (
+                    <div className={styles.ddayShirtSizes}>
+                        <label>Taille</label>
+                        <select ref={sizeRef}>
+                            {sizes.map((size) => (
+                                <option key={size} value={size}>
+                                    {size}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                )}
+            </div>
+            <div className={styles.ddayInfoInputWrapper}>
+                <label htmlFor="ddday-age">Age</label>
+                <input type="number" id="ddday-age" ref={ageRef} />
+            </div>
+            <div className={styles.ddayInfoInputWrapper}>
+                <label htmlFor="dday-diet">Régime alimentaire</label>
+                <input
+                    id="dday-diet"
+                    type="text"
+                    ref={dietRef}
+                    placeholder="végétarien ? halal ? ..."
+                />
+            </div>
+            <div className={styles.ddayInfoCommentWrapper}>
+                <label htmlFor="dday-comment">Des commentaires ?</label>
+                <textarea id="dday-comment" ref={commentRef} />
+            </div>
+            <div className={styles.ddayButtonWrapper}>
+                <button type="submit" onClick={onSubmit}>
+                    Enregistrer
+                </button>
+            </div>
+        </div>
+    )
+}
+
+export default memo(DDayInformations)

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

@@ -0,0 +1,78 @@
+@import "../../../theme/variables";
+@import "../../../theme/mixins";
+
+.ddayInfo {
+    width: 470px;
+}
+
+.ddayTitle {
+    padding: 4px;
+    font-weight: bold;
+    text-align: center;
+}
+
+.ddayInfoInputWrapper {
+    margin: 10px 0;
+
+    label {
+        display: inline-block;
+        width: 150px;
+    }
+    input {
+        width: 320px;
+        border: 1px solid $color-grey-medium;
+        outline: 0;
+    }
+}
+
+.ddayInfoShirtWrapper {
+    margin: 10px 0;
+    height: 22px;
+
+    label {
+        display: inline-block;
+        width: 60px;
+    }
+}
+
+.ddayShirtLabel {
+    display: inline-block;
+    margin-top: 2px;
+    width: 150px;
+}
+
+.ddayShirtSizes {
+    display: inline-block;
+    width: 200px;
+    text-align: right;
+
+    select {
+        margin-left: 10px;
+        width: 60px;
+        border: 1px solid $color-grey-medium;
+        background-color: $color-white;
+        outline: 0;
+    }
+}
+
+.ddayInfoCommentWrapper {
+    margin: 6px 0;
+
+    label {
+        display: block;
+        padding-left: 4px;
+    }
+    textarea {
+        width: 100%;
+        height: 50px;
+        padding: 5px;
+        border: 1px solid $color-grey-light;
+        background-color: $color-grey-lighter;
+        outline: 0;
+    }
+}
+
+.ddayButtonWrapper {
+    margin-bottom: 10px;
+    text-align: center;
+}

src/pages/DayWishes/DayWishes.tsx

@@ -6,6 +6,7 @@ import { AppThunk } from "../../store"
 import { fetchVolunteerDayWishesSetIfNeed } from "../../store/volunteerDayWishesSet"
 import { selectUserJwtToken } from "../../store/auth"
 import DayWishes from "../../components/VolunteerBoard/DayWishes/DayWishes"
+import DDayInformations from "../../components/VolunteerBoard/DDayInformations/DDaysInformations"
 import styles from "./styles.module.scss"
 
 export type Props = RouteComponentProps
@@ -19,6 +20,7 @@ const HomePage: FC<Props> = (): JSX.Element => {
             <div className={styles.dayWishPage}>
                 <div className={styles.dayWisContent}>
                     <DayWishes />
+                    <DDayInformations />
                 </div>
             </div>
         )

src/theme/form.scss

@@ -12,6 +12,7 @@ button {
 
 input[type="text"],
 input[type="password"],
+input[type="number"],
 input[type="email"] {
     padding: 4px 6px;
     border: 1px solid #333;