Merge pull request #29 from SystemEngineeringTeam/issue/13

Issue/13

src/components/achievements/Info.tsx

@@ -0,0 +1,38 @@
+import { Flex, Text, Avatar, Box} from "@radix-ui/themes";
+import { type ReactElement } from "react";
+
+export default function Page(): ReactElement {
+  const achievementTest = {
+    id: 1,
+    name: "first blood",
+    description: "Get the first kill in a match.",
+    icon: "https://placehold.jp/150x150.png",
+    tag: ["kill"],
+  };
+
+  return (
+
+    <Box maxWidth="8rem" >
+      <Flex direction="column" align="center">
+
+          <Avatar
+            size="7"
+            src="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.67&fp-y=0.5&fp-z=1.4&fit=crop"
+            radius="full"
+            fallback="T"
+            />
+
+        <Text size="6" weight="bold">
+          恋愛失敗
+        </Text>
+
+      </Flex>
+
+          {achievementTest.tag.map((tag,index) => (
+            <Text key={index} color="gray">タグ {tag}</Text>
+          ))}
+
+    </Box>
+
+  );
+}

src/pages/hayato.tsx

@@ -0,0 +1,8 @@
+import { type ReactElement } from "react";
+import Info from "@/components/achievements/Info";
+
+export default function Page(): ReactElement {
+  return (
+   <Info />
+  );
+}

src/router.ts

@@ -10,6 +10,7 @@ export type Path =
   | `/auth/callback`
   | `/auth/login`
   | `/create`
+  | `/hayato`
   | `/members`
   | `/members/:id`
   | `/ranking`