Merge pull request #43 from /issues/9

achievementsの一覧表示

src/components/achievements/Card.tsx

@@ -1,20 +1,30 @@
-import { Text } from "@radix-ui/themes";
+import { Avatar, Box, Card, Flex, Text } from "@radix-ui/themes";
 import { type ReactElement } from "react";
-import { type Achievement } from "@/types/achievement";
+import { type Achievement, } from "@/types/achievement";
 
-export function AchievementCard({
-  data,
-  showRelativeDate = false,
-}: {
-  data: Achievement;
-  showRelativeDate: boolean;
-}): ReactElement {
+export function AchievementCard({achievement}: {achievement: Achievement}): ReactElement {
   return (
-    <>
-      {showRelativeDate && <Text>1日前</Text>}
-      <Text>Hello This page is AchievementCard</Text>
-      <Text>{data.name}</Text>
-      <Text>{data.description}</Text>
-    </>
+    <Card>
+      <Flex align="center" gap="3">
+        <Avatar
+          fallback="T"
+          radius="full"
+          size="3"
+          src={achievement.icon}
+        />
+        <Box>
+          <Text as="div" size="2" weight="bold">
+            {achievement.name}
+          </Text>
+          <Text as="div" color="gray" size="2">
+            {achievement.description}
+          </Text>
+          <Text as="div" color="gray" size="2">
+            #{achievement.tags[0].name}
+        </Text>
+        </Box>
+      </Flex>
+
+    </Card>
   );
 }

src/pages/achievements/index.tsx

@@ -1,17 +1,16 @@
 import { type ReactElement } from "react";
-import { FirstPenguin } from "@/components/achievements/FirstPenguin";
+import Achievements from "@/assets/achievements.json";
 import { AchievementCard } from "@/components/achievements/Card";
-import data from "@/assets/achievements.json";
+import { FirstPenguin } from "@/components/achievements/FirstPenguin";
 
 export default function Page(): ReactElement {
   return (
     <>
       <FirstPenguin />
-      {data.achievements.map((achievement) => (
+      {Achievements.achievements.map((achievement) => (
         <AchievementCard
-          key={achievement.id}
-          data={achievement}
-          showRelativeDate={false}
+          key={achievement.id} 
+          achievement={achievement}
         />
       ))}
     </>