細かな修正

SystemEngineeringTeam · Sep 6, 2024 · 4dea72f · 4dea72f
1 parent 5be2a59
commit 4dea72f
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 122 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,11 +1,6 @@
+import { Icon } from "@iconify/react";
 import { useStore } from "@nanostores/react";
-import {
-  Avatar,
-  Flex,
-  Text,
-  Link as LinkComponent,
-  Box,
-} from "@radix-ui/themes";
+import { Flex, Text, Link as LinkComponent, Box } from "@radix-ui/themes";
 import { type ReactElement } from "react";
 import styled from "styled-components";
 import LogoIcon from "@/assets/EsaChibuIcon.svg";
@@ -169,16 +164,11 @@ export function Header(): ReactElement {
             className="createStyle createHoverAnime headerDefaultStyle"
             to="/unlocked"
           >
-            <Flex align="center" gap="4">
+            <Flex align="center" gap="4" style={{ color: "white" }}>
               <Text size="2" weight="bold">
                 実績管理
               </Text>
-              <Avatar
-                fallback="A"
-                radius="full"
-                size="3"
-                src="https://api.iconify.design/mdi:lock-open-outline.svg"
-              />
+              <Icon height="2em" icon="mdi:lock-open-outline" />
             </Flex>
           </UnlockedStyle>
         ) : (
@@ -191,24 +181,13 @@ export function Header(): ReactElement {
                 <Text size="3" weight="bold">
                   ログイン
                 </Text>
-                <Avatar
-                  fallback="T"
-                  radius="full"
-                  size="2"
-                  src="https://api.iconify.design/mdi:account.svg"
-                />
+                <Icon height="2em" icon="mdi:account" />
               </Flex>
             </LoginStyle>
           </LinkComponent>
         )}
         <TeamStyle to="/">
-          <Avatar
-            fallback="T"
-            radius="full"
-            size="3"
-            src="https://api.iconify.design/mdi:account-group.svg"
-            style={{ width: "60px", padding: "0.5rem" }}
-          />
+          <Icon height="2em" icon="mdi:account-group" width="4em" />
         </TeamStyle>
       </RightContents>
     </HeaderStyle>

diff --git a/src/components/member/Info.tsx b/src/components/member/Info.tsx
@@ -43,21 +43,19 @@ export function Info({
   name,
   ranking,
   point,
+  icon,
   rateOfUnlocked,
 }: {
   name: string;
   ranking: number;
   point: number;
+  icon: string;
   rateOfUnlocked: number;
 }): ReactElement {
   return (
     <InfoBox direction="column">
       <Flex align="center" direction="column">
-        <Avatar
-          fallback="T"
-          size="9"
-          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"
-        />
+        <Avatar fallback="T" size="9" src={icon} />
 
         <Text mt="1rem" size="8" weight="bold">
           {name}

diff --git a/src/pages/members/[id]/index.tsx b/src/pages/members/[id]/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from "@radix-ui/themes";
+import { Box, Flex, Text } from "@radix-ui/themes";
 import { type ReactElement } from "react";
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
@@ -47,7 +47,8 @@ export default function Page(): ReactElement {
 
               const thisMemberUnlockedAchievements = unlockedAchievements
                 .filter((u) => u.memberEmail === m.email)
-                .map((u) => achievements.find((a) => a.id === u.achievementID));
+                .map((u) => achievements.find((a) => a.id === u.achievementID))
+                .reverse();
 
               const rankedMembers = members
                 .map((l) => ({
@@ -66,13 +67,18 @@ export default function Page(): ReactElement {
               return (
                 <Flex key={m.email} gap="9">
                   <Info
+                    icon={m.icon}
                     name={m.name}
                     point={point}
                     ranking={ranking}
                     rateOfUnlocked={rateOfUnlocked}
                   />
                   <div>
                     <Box mt="20vh" />
+                    <Text size="8" weight="bold">
+                      最近解除した実績
+                    </Text>
+                    <Box mt="1rem" />
                     <BoxStyle>
                       {thisMemberUnlockedAchievements.map((achievement) => {
                         if (achievement === undefined) return null;

diff --git a/src/pages/test/index.tsx b/src/pages/test/index.tsx
diff --git a/src/router.ts b/src/router.ts
@@ -12,7 +12,6 @@ export type Path =
   | `/members`
   | `/members/:id`
   | `/ranking`
-  | `/test`
   | `/unlocked`;
 
 export type Params = {