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