Add: age / Change: card width

src/constants/details.ts

@@ -1,4 +1,9 @@
 import { type Props as CardProps } from "@/components/Card.astro";
+import { differenceInYears } from "date-fns";
+import { format } from "date-fns";
+
+const birthday = new Date("2014-12-08T16:14:00+09:00");
+const age = differenceInYears(new Date(), birthday);
 
 export default [
   {
@@ -8,9 +13,14 @@ export default [
   },
   {
     title: "誕生日",
-    description: "2014/12/8",
+    description: format(birthday, "yyyy/MM/dd"),
     img: "cake.svg",
   },
+  {
+    title: "年齢",
+    description: `${age}歳`,
+    img: "age.svg",
+  },
   {
     title: "場所",
     description: "神奈川県",

src/pages/index.astro

@@ -37,9 +37,9 @@ import contacts from "@/constants/contacts";
   
   <div class={`
     flex
-    flex-col
+    flex-wrap
     gap-3
-    w-full
+    w-[70vw]
     p-5
   `}>
     <span class="font-bold text-4xl w-full mb-3">詳細</span>
@@ -50,7 +50,6 @@ import contacts from "@/constants/contacts";
         description={detail.description}
         img={detail.img}
         href={detail.href}
-        isFullWidth
       />
     ))}
   </div>
@@ -59,7 +58,7 @@ import contacts from "@/constants/contacts";
     flex
     flex-wrap
     gap-3
-    w-fit
+    w-[70vw]
     p-5
   `}>
     <span class="font-bold text-4xl w-full mb-3">リンク</span>
@@ -78,7 +77,7 @@ import contacts from "@/constants/contacts";
     flex
     flex-col
     gap-3
-    w-full
+    w-[70vw]
     p-5
   `}>
     <span class="font-bold text-4xl w-full mb-3">連絡先</span>