theoludwig/.profile
1
1
Fork 0
mirror of https://github.com/theoludwig/theoludwig.git synced 2025-05-29 22:37:44 +02:00
Code Issues Releases Activity

fix: calculate age client side so it updates "automatically" (not only on rebuild)

Browse Source
This commit is contained in:
Divlo
2022-03-24 18:57:27 +01:00
parent 6abc881e94
commit f67d331416
8 changed files with 35 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/Profile/ProfileList/index.tsx
View File

@ -1,29 +1,23 @@
import useTranslation from 'next-translate/useTranslation'
import { useMemo } from 'react'
import {
DIVLO_BIRTHDAY_DAY,
DIVLO_BIRTHDAY_MONTH,
DIVLO_BIRTHDAY_YEAR
} from 'utils/getAge'
import { DIVLO_BIRTHDAY, DIVLO_BIRTHDAY_DATE, getAge } from 'utils/getAge'
import { ProfileItem } from './ProfileItem'
export interface ProfileListProps {
age: number
}
export const ProfileList: React.FC<ProfileListProps> = (props) => {
const { age } = props
export const ProfileList: React.FC = () => {
const { t } = useTranslation('home')
const age = useMemo(() => {
return getAge(DIVLO_BIRTHDAY)
}, [])
return (
<ul className='m-0 list-none p-0'>
<ProfileItem title={t('home:about.full-name')} value='Théo LUDWIG' />
<ProfileItem
title={t('home:about.birth-date')}
value={`${DIVLO_BIRTHDAY_DAY}/${DIVLO_BIRTHDAY_MONTH}/${DIVLO_BIRTHDAY_YEAR} (${age} ${t(
'home:about.years-old'
)})`}
value={`${DIVLO_BIRTHDAY_DATE} (${age} ${t('home:about.years-old')})`}
/>
<ProfileItem title={t('home:about.nationality')} value='Alsace, France' />
<ProfileItem

10
components/Profile/index.tsx
View File

@ -3,19 +3,13 @@ import { ProfileInformation } from './ProfileInfo'
import { ProfileList } from './ProfileList'
import { ProfileLogo } from './ProfileLogo'
export interface ProfileProps {
age: number
}
export const Profile: React.FC<ProfileProps> = (props) => {
const { age } = props
export const Profile: React.FC = () => {
return (
<div className='flex flex-col items-center justify-center px-10 pt-2 md:flex-row md:pt-10'>
<ProfileLogo />
<div>
<ProfileInformation />
<ProfileList age={age} />
<ProfileList />
<ProfileDescriptionBottom />
</div>
</div>