add month titles on birthdays list

src/App.tsx

@@ -38,6 +38,11 @@ function App() {
             result.push(item)
             return result
         }, [])
+            .sort((a, b) => {
+                if (b.birthday < a.birthday) return 1
+                if (b.birthday > a.birthday) return -1
+                return 0
+            })
 
         return birthdays
     }

src/components/BirthdayList.tsx

@@ -1,5 +1,6 @@
-import {FC} from "react";
+import {FC, ReactNode} from "react";
 import {Birthday} from "../types.ts";
+import {MONTHS} from "../utilities.ts";
 
 const BirthdayList: FC<BirthdayListProps> = ({birthdays, selectedPerson, selectPerson}) => {
 
@@ -9,12 +10,15 @@ const BirthdayList: FC<BirthdayListProps> = ({birthdays, selectedPerson, selectP
     }
 
     return <ul className="text-2xl">
-        {birthdays.sort((a, b) => {
-            if (b.birthday < a.birthday) return 1
-            if (b.birthday > a.birthday) return -1
-            return 0
-        })
-            .map(birthday => <li key={birthday.name + '-' + birthday.day + '-' + birthday.month}
+        {birthdays.map((birthday, index) => {
+            const content: ReactNode[] = []
+            if (index === 0 || (index > 0 && birthdays[index].month !== birthdays[index - 1].month)) {
+                content.push(<li key={"month-" + birthday.month}
+                                 className="text-lg pl-2 text-gray-600 border-t">
+                    {MONTHS[birthday.month - 1]}
+                </li>)
+            }
+            content.push(<li key={birthday.name + '-' + birthday.day + '-' + birthday.month}
                 className={`${selectedPerson?.id === birthday.id ? 'bg-blue-400' : ''} hover:bg-blue-300 flex gap-2 flex-wrap`}>
                 <div className="flex-1 cursor-pointer flex items-center pl-5"
                      onClick={() => selectPerson(birthday)}>
@@ -28,7 +32,10 @@ const BirthdayList: FC<BirthdayListProps> = ({birthdays, selectedPerson, selectP
                     <div className="flex flex-1 justify-center items-center">
                         {birthday.year ? age(birthday) + ' ans' : null}</div>
                 </div>
-        </li>)}
+            </li>)
+
+            return content
+        })}
     </ul>
 }
 

src/utilities.ts

@@ -9,3 +9,5 @@ export const arrayRange = (end: number, start = 0) => {
 export const pad = (number: number, pad = 2, char = '0') => {
     return (new Array(pad).join(char) + number).slice(-pad)
 }
+
+export const MONTHS = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']