Issues/16

src/assets/achievements.json

@@ -5,35 +5,75 @@
       "name": "First Blood",
       "description": "Get the first kill in a match.",
       "icon": "https://placehold.jp/150x150.png",
-      "tag": ["kill"]
+      "tags": [
+        {
+          "id": 1,
+          "name": "kill",
+          "color": "#FF0000"
+        }
+      ],
+      "createdAt": "2021-01-01T00:00:00Z",
+      "updatedAt": "2021-01-01T00:00:00Z"
     },
     {
       "id": 2,
       "name": "Double Kill",
       "description": "Get two kills in a row.",
       "icon": "https://placehold.jp/150x150.png",
-      "tag": ["kill"]
+      "tags": [
+        {
+          "id": 1,
+          "name": "kill",
+          "color": "#FF0000"
+        }
+      ],
+      "createdAt": "2021-01-01T00:00:00Z",
+      "updatedAt": "2021-01-01T00:00:00Z"
     },
     {
       "id": 3,
       "name": "Triple Kill",
       "description": "Get three kills in a row.",
       "icon": "https://placehold.jp/150x150.png",
-      "tag": ["kill"]
+      "tags": [
+        {
+          "id": 1,
+          "name": "kill",
+          "color": "#FF0000"
+        }
+      ],
+      "createdAt": "2021-01-01T00:00:00Z",
+      "updatedAt": "2021-01-01T00:00:00Z"
     },
     {
       "id": 4,
       "name": "Quadra Kill",
       "description": "Get four kills in a row.",
       "icon": "https://placehold.jp/150x150.png",
-      "tag": ["kill"]
+      "tags": [
+        {
+          "id": 1,
+          "name": "kill",
+          "color": "#FF0000"
+        }
+      ],
+      "createdAt": "2021-01-01T00:00:00Z",
+      "updatedAt": "2021-01-01T00:00:00Z"
     },
     {
       "id": 5,
       "name": "Penta Kill",
       "description": "Get five kills in a row.",
       "icon": "https://placehold.jp/150x150.png",
-      "tag": ["kill"]
+      "tags": [
+        {
+          "id": 1,
+          "name": "kill",
+          "color": "#FF0000"
+        }
+      ],
+      "createdAt": "2021-01-01T00:00:00Z",
+      "updatedAt": "2021-01-01T00:00:00Z"
     }
   ]
 }

src/components/achievements/Card.tsx

@@ -1,10 +1,18 @@
+import { Achievement } from "@/types/achievement";
 import { Text } from "@radix-ui/themes";
 import { type ReactElement } from "react";
 
-export function memberCard({ data }: { data: any }): ReactElement {
+export function AchievementCard({
+  data,
+  showRelativeDate = false,
+}: {
+  data: Achievement;
+  showRelativeDate: boolean;
+}): ReactElement {
   return (
     <>
-      <Text>Hello This page is memberCard</Text>
+      {showRelativeDate && <Text>1日前</Text>}
+      <Text>Hello This page is AchievementCard</Text>
       <Text>{data.name}</Text>
       <Text>{data.description}</Text>
     </>

src/pages/achievements/index.tsx

@@ -1,18 +1,17 @@
 import { type ReactElement } from "react";
-import { MemberCard } from "@/components/member/Card";
+import { AchievementCard } from "@/components/achievements/Card";
+import data from "@/assets/achievements.json";
 
-export function Page(): ReactElement {
-  const achievementsTestData = [
-    {
-      id: 1,
-      name: "John Doe",
-      description: "",
-    },
-    {
-      id: 2,
-      name: "Jane Doe",
-      description: "",
-    },
-  ];
-  return <p></p>;
+export default function Page(): ReactElement {
+  return (
+    <>
+      {data.achievements.map((achievement) => (
+        <AchievementCard
+          key={achievement.id}
+          data={achievement}
+          showRelativeDate={false}
+        />
+      ))}
+    </>
+  );
 }

src/pages/members/index.tsx

@@ -3,7 +3,7 @@ import { MemberCard } from "@/components/member/Card";
 import SampleMember from "@/assets/members.json";
 import { Member } from "@/types/member";
 
-export function Page(): ReactElement {
+export default function Page(): ReactElement {
   const teto = SampleMember.members.at(-1) as Member;
 
   return <MemberCard member={teto}></MemberCard>;