From 210a6dd11ac5483e8a61ed1a84f7cfbc51acf6a7 Mon Sep 17 00:00:00 2001 From: Romulus21 Date: Fri, 19 Jan 2024 20:26:14 +0100 Subject: [PATCH] add Dark mode and fix get age function --- index.html | 2 +- src/App.tsx | 6 +++--- src/components/BirthdayList.tsx | 13 ++++--------- src/utilities.ts | 13 ++++++++++++- 4 files changed, 20 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 076e99d..9f9c716 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - +
diff --git a/src/App.tsx b/src/App.tsx index 5ebe6c0..ec0e6eb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -99,9 +99,9 @@ function App() { return ( <> -
+
birthday cake Birthdays -
+ @@ -130,7 +130,7 @@ function App() {
-
+
= ({birthdays, selectedPerson, selectPerson}) => { - const age = (birthday: Birthday) => { - const age = ((new Date()).getTime() - (new Date(`${birthday.year}-${birthday.month}-${birthday.day}`)).getTime()) / 1000 / 60 /60 /24 /365.75 - return age.toFixed(age < 3 ? 1 : 0) - } - return
    {birthdays.map((birthday, index) => { const content: ReactNode[] = [] if (index === 0 || (index > 0 && birthdays[index].month !== birthdays[index - 1].month)) { content.push(
  • + className="text-lg pl-2 text-gray-600 dark:text-neutral-500 border-t dark:border-neutral-500"> {MONTHS[birthday.month - 1]}
    • ) } content.push(
  • + className={`${selectedPerson?.id === birthday.id ? 'bg-blue-400' : ((new Date).getDate() === birthday.day && ((new Date).getMonth() + 1) === birthday.month ? 'bg-yellow-500 py-1' : '')} hover:bg-blue-300 dark:hover:bg-blue-900 flex gap-2 flex-wrap`}>
    selectPerson(birthday)}> {birthday.name} @@ -30,7 +25,7 @@ const BirthdayList: FC = ({birthdays, selectedPerson, selectP
    {birthday.year ? birthday.year : null}
    - {birthday.year ? age(birthday) + ' ans' : null}
    + {birthday.year ? getAge(birthday) + ' ans' : null}
) diff --git a/src/utilities.ts b/src/utilities.ts index bc65b01..594d5e5 100644 --- a/src/utilities.ts +++ b/src/utilities.ts @@ -1,3 +1,5 @@ +import {Birthday} from "./types.ts"; + export const arrayRange = (end: number, start = 0) => { const array = [] for (let i = start; i <= end; i++) { @@ -10,4 +12,13 @@ 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'] \ No newline at end of file +export const MONTHS = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'] + +export const getAge = (birthday: Birthday) => { + const age = ((new Date()).getTime() - (new Date(`${birthday.year}-${birthday.month}-${birthday.day}`)).getTime()) / 1000 / 60 /60 /24 /365.75 + if (age < 3) { + return age.toFixed(age < 3 ? 1 : 0) + } else { + return Math.floor(age).toFixed() + } +} \ No newline at end of file