feat: components structure Curriculum Vitae

packages/ui/src/Home/About/AboutList/AboutItem.tsx

@@ -1,6 +1,6 @@
 export interface AboutItemProps {
   label: string
-  value: string
+  value: React.ReactNode
   link?: string
 }
 

packages/ui/src/Home/About/AboutList/AboutItemBirthDate.tsx

@@ -1,27 +0,0 @@
-"use client"
-
-import { BIRTH_DATE } from "@repo/utils/constants"
-import { getAge, getISODate } from "@repo/utils/dates"
-import { useTranslations } from "next-intl"
-import { useMemo } from "react"
-import { AboutItem } from "./AboutItem"
-
-export interface AboutItemBirthDateProps {}
-
-export const AboutItemBirthDate: React.FC<AboutItemBirthDateProps> = () => {
-  const t = useTranslations()
-
-  const age = useMemo(() => {
-    return getAge(BIRTH_DATE)
-  }, [])
-
-  return (
-    <AboutItem
-      label={t("home.about.birth-date.label")}
-      value={t("home.about.birth-date.value", {
-        age,
-        birthDate: getISODate(BIRTH_DATE),
-      })}
-    />
-  )
-}

packages/ui/src/Home/About/AboutList/AboutList.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl"
 import { AboutItem } from "./AboutItem"
-import { AboutItemBirthDate } from "./AboutItemBirthDate"
+import { BirthDate } from "./BirthDate"
 
 export interface AboutListProps {}
 
@@ -13,7 +13,10 @@ export const AboutList: React.FC<AboutListProps> = () => {
         label={t("home.about.pronouns.label")}
         value={t("home.about.pronouns.value")}
       />
-      <AboutItemBirthDate />
+      <AboutItem
+        label={t("home.about.birth-date.label")}
+        value={<BirthDate />}
+      />
       <AboutItem
         label={t("home.about.nationality.label")}
         value={t("home.about.nationality.value")}

packages/ui/src/Home/About/AboutList/BirthDate.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { BIRTH_DATE, BIRTH_DATE_STRING } from "@repo/utils/constants"
+import { getAge } from "@repo/utils/dates"
+import { useTranslations } from "next-intl"
+import { useMemo } from "react"
+
+export interface BirthDateProps {}
+
+export const BirthDate: React.FC<BirthDateProps> = () => {
+  const t = useTranslations()
+
+  const age = useMemo(() => {
+    return getAge(BIRTH_DATE)
+  }, [])
+
+  return t("home.about.birth-date.value", {
+    age,
+    birthDate: BIRTH_DATE_STRING,
+  })
+}