Issues/3

src/assets/members.json

@@ -3,18 +3,18 @@
     {
       "myself": false,
       "name": "苗字 名前",
-      "screen_name": "xxxxxx",
+      "screen_name": "myouji namae",
       "icon": "https://placehold.jp/150x150.png",
       "role": "member",
       "posts_count": 0,
       "joined_at": "2019-01-01T00:00:00Z",
       "last_posted_at": "2019-01-01T00:00:00Z",
-      "email": "xxxxxx"
+      "email": "yyyyyy"
     },
     {
       "myself": true,
       "name": "重音 テト",
-      "screen_name": "xxxxxx",
+      "screen_name": "ju-on teto",
       "icon": "https://placehold.jp/150x150.png",
       "role": "owner",
       "posts_count": 0,

src/components/member/RankingCard.tsx

@@ -0,0 +1,50 @@
+import { Member } from "@/types/member";
+import { Avatar, Box, Flex, Separator, Text } from "@radix-ui/themes";
+import { type ReactElement } from "react";
+import SampleMembers from "@/assets/members.json";
+
+export function MemberCard({
+  memberEmail,
+  index,
+  point,
+}: {
+  memberEmail: string;
+  index: number;
+  point: number;
+}): ReactElement {
+  // const userPoint = unlockedAchievements.unlockedAchievements.filter(
+  //   (achievements) => {
+  //     return achievements.userEmail == "xxxxx";
+  //   },
+  // );
+  const user: Member = SampleMembers.members.find(
+    (member) => member.email === memberEmail,
+  )!;
+
+  return (
+    <>
+      <Box maxWidth="50rem">
+        <Flex gap="6" align="center" ml="14rem">
+          <Text size="8" mr="3rem">
+            {index + 1}
+          </Text>
+          <Avatar
+            size="8"
+            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"
+          />
+          <Flex direction="column" align="center">
+            <Text as="div" size="7" weight="bold">
+              {user.name}
+            </Text>
+            <Text as="div" size="7" color="gray">
+              {point}pt
+            </Text>
+          </Flex>
+        </Flex>
+        <Separator my="3" size="4" />
+      </Box>
+    </>
+  );
+}

src/pages/_app.tsx

@@ -18,7 +18,6 @@ export function Catch(): ReactElement {
 export default function Layout(): ReactElement {
   const Main = styled.main`
     font-family: "Noto Sans JP Variable";
-    background-color: #aaa;
     word-break: keep-all;
   `;
 

src/pages/ranking/index.tsx

@@ -1,13 +1,33 @@
-import { MemberCard } from "@/components/member/Card";
+import { MemberCard } from "@/components/member/RankingCard";
 import { ReactElement } from "react";
-import SampleMember from "@/assets/members.json";
-import members from "@/assets/members.json";
-import { Member } from "@/types/member";
+import unlockedAchievements from "@/assets/unlockedAchievements.json";
 
 export default function Page(): ReactElement {
-  const teto = SampleMember.members.at(-1) as Member;
+  // 仮のデータ(unlockedAchievements)からfilterでpointを取得する
+  const members = [
+    {
+      memberEmail: "xxxxxx",
+      point: 100,
+    },
+    {
+      memberEmail: "yyyyyy",
+      point: 200,
+    },
+  ];
 
-  if (teto == null) throw new Error("Teto not found!");
-
-  return <MemberCard member={teto}></MemberCard>;
+  return (
+    <div>
+      {members.map((member, index) => {
+        return (
+          <MemberCard
+            key={index}
+            memberEmail={member.memberEmail}
+            index={index}
+            point={member.point}
+          />
+        );
+      })}
+    </div>
+  );
 }
+

vite.config.mts

@@ -5,4 +5,7 @@ import generouted from "@generouted/react-router/plugin";
 
 export default defineConfig({
   plugins: [react(), paths(), generouted()],
+  server: {
+    port: 8080,
+  },
 });