Issues/11

src/components/member/Card.tsx

@@ -1,13 +1,41 @@
 import { Member } from "@/types/member";
-import { Text } from "@radix-ui/themes";
+import { Avatar, Box, Flex, Separator, Text } from "@radix-ui/themes";
 import { type ReactElement } from "react";
 
 export function MemberCard({ member }: { member: Member }): ReactElement {
+  //仮の情報を表示
+  //icon,name,screen_name,post_count,role
   return (
     <>
-      <Text>Hello This page is memberCard</Text>
-      <Text>{member.name}</Text>
-      <Text>{member.email}</Text>
+      <Flex gap="4" align="center" height="80px">
+          <Avatar
+            size="5"
+            src = {member.icon}
+            radius="full"
+            fallback="T"
+          />
+          <Box width="300px" >
+            <Text as="div" size="7" weight="bold">
+              {member.name}
+            </Text>
+          </Box>
+          <Box width="60px">
+            <Text as="div" size="5" color="gray" align="center">
+              {member.screen_name}
+            </Text>
+          </Box>
+          <Box width="60px">
+            <Text as="div" size="5" color="gray" align="center">
+              {member.posts_count}
+            </Text>
+          </Box>
+          <Box width="60px">
+            <Text as="div" size="5" color="gray" align="center">
+              {member.role}
+            </Text>
+          </Box>
+      </Flex>
+      <Separator my="1" size="4" />
     </>
   );
 }

src/pages/members/index.tsx

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

vite.config.mts

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