Romain/birthday
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add Dark mode and fix get age function

Browse Source
This commit is contained in:
Romulus21
2024-01-19 20:26:14 +01:00
parent 9c87e6f7cc
commit 210a6dd11a
4 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -11,7 +11,7 @@
<link rel="mask-icon" href="/cake.svg" color="#FFFFFF"> <link rel="mask-icon" href="/cake.svg" color="#FFFFFF">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
</head> </head>
<body> <body class="dark:bg-neutral-800 dark:text-neutral-300">
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>

6
src/App.tsx
View File

@@ -99,9 +99,9 @@ function App() {
return ( return (
<> <>
<div className="bg-gray-300 px-5 py-2.5 flex items-center font-bold text-3xl"> <header className="bg-gray-300 dark:bg-neutral-900 px-5 py-2.5 flex items-center font-bold text-3xl">
<img src={cake} alt="birthday cake" className="w-12 inline-block"/> Birthdays <img src={cake} alt="birthday cake" className="w-12 inline-block"/> Birthdays
</div> </header>
<BirthdayList birthdays={birthdays} selectedPerson={selectedPerson} selectPerson={selectPerson} /> <BirthdayList birthdays={birthdays} selectedPerson={selectedPerson} selectPerson={selectPerson} />
@@ -130,7 +130,7 @@ function App() {
</div> </div>
<form className={`${addModal ? 'h-18' : 'h-0 overflow-hidden'} flex`} <form className={`${addModal ? 'h-18' : 'h-0 overflow-hidden'} flex`}
onSubmit={handleSubmitBirthday}> onSubmit={handleSubmitBirthday}>
<div className="p-2 w-full flex"> <div className="p-2 w-full flex dark:text-neutral-800">
<input name="name" <input name="name"
type="text" type="text"
autoFocus autoFocus

13
src/components/BirthdayList.tsx
View File

@@ -1,25 +1,20 @@
import {FC, ReactNode} from "react"; import {FC, ReactNode} from "react";
import {Birthday} from "../types.ts"; import {Birthday} from "../types.ts";
import {MONTHS} from "../utilities.ts"; import {getAge, MONTHS} from "../utilities.ts";
const BirthdayList: FC<BirthdayListProps> = ({birthdays, selectedPerson, selectPerson}) => { const BirthdayList: FC<BirthdayListProps> = ({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 <ul className="text-2xl"> return <ul className="text-2xl">
{birthdays.map((birthday, index) => { {birthdays.map((birthday, index) => {
const content: ReactNode[] = [] const content: ReactNode[] = []
if (index === 0 || (index > 0 && birthdays[index].month !== birthdays[index - 1].month)) { if (index === 0 || (index > 0 && birthdays[index].month !== birthdays[index - 1].month)) {
content.push(<li key={"month-" + birthday.month} content.push(<li key={"month-" + birthday.month}
className="text-lg pl-2 text-gray-600 border-t"> className="text-lg pl-2 text-gray-600 dark:text-neutral-500 border-t dark:border-neutral-500">
{MONTHS[birthday.month - 1]} {MONTHS[birthday.month - 1]}
</li>) </li>)
} }
content.push(<li key={birthday.name + '-' + birthday.day + '-' + birthday.month} content.push(<li key={birthday.name + '-' + birthday.day + '-' + birthday.month}
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 flex gap-2 flex-wrap`}> 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`}>
<div className="flex-1 cursor-pointer flex items-center pl-5" <div className="flex-1 cursor-pointer flex items-center pl-5"
onClick={() => selectPerson(birthday)}> onClick={() => selectPerson(birthday)}>
{birthday.name} {birthday.name}
@@ -30,7 +25,7 @@ const BirthdayList: FC<BirthdayListProps> = ({birthdays, selectedPerson, selectP
<div className="text-lg text-gray-400">{birthday.year ? birthday.year : null}</div> <div className="text-lg text-gray-400">{birthday.year ? birthday.year : null}</div>
</div> </div>
<div className="flex flex-1 justify-center items-center"> <div className="flex flex-1 justify-center items-center">
{birthday.year ? age(birthday) + ' ans' : null}</div> {birthday.year ? getAge(birthday) + ' ans' : null}</div>
</div> </div>
</li>) </li>)

11
src/utilities.ts
View File

@@ -1,3 +1,5 @@
import {Birthday} from "./types.ts";
export const arrayRange = (end: number, start = 0) => { export const arrayRange = (end: number, start = 0) => {
const array = [] const array = []
for (let i = start; i <= end; i++) { for (let i = start; i <= end; i++) {
@@ -11,3 +13,12 @@ export const pad = (number: number, pad = 2, char = '0') => {
} }
export const MONTHS = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'] 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()
}
}