diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index e69de29..b64042b 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -0,0 +1,56 @@
+import { Flex } from "@radix-ui/themes";
+import { type ReactElement } from "react";
+import styled from "styled-components";
+import { Link } from "@/router.ts";
+
+const FooterStyle = styled(Flex)`
+ position: fixed;
+ color: #242d3c;
+ bottom: 5%;
+ right: 0;
+ left: 0;
+ margin: 0 auto;
+ height: 6.2%;
+ width: 95%;
+ z-index: 10;
+`;
+
+const CreateStyle = styled(Link)`
+ background-color: #00cdc2;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: fit-content;
+ height: fit-content;
+ padding: 1rem;
+ margin-left: auto;
+ border-radius: 80px;
+ box-shadow:
+ 12px 12px 16px #b5bec9,
+ -12px -12px 16px #ffffff;
+ overflow: hidden;
+ transition: 160ms;
+
+ &:hover {
+ box-shadow: none;
+ width: fit-content;
+ }
+`;
+
+const PrusStyle = styled.img`
+ width: 1.8rem;
+ height: 1.8rem;
+`;
+
+export function Footer(): ReactElement {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index acc396e..6b49aa4 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -8,7 +8,7 @@ import {
} from "@radix-ui/themes";
import { type ReactElement } from "react";
import styled from "styled-components";
-import Icon from "@/assets/EsaChibuIcon.svg";
+import LogoIcon from "@/assets/EsaChibuIcon.svg";
import { getAuthorizePageUrl } from "@/lib/services/esa";
import { $hasAuthenticated } from "@/lib/stores/auth";
import { Link } from "@/router.ts";
@@ -30,7 +30,7 @@ const RightContents = styled(Flex)`
border-radius: 80px;
`;
-const CreateStyle = styled(Link)`
+const UnlockedStyle = styled(Link)`
color: #f7f7f7;
background-color: #00cdc2;
box-shadow:
@@ -39,6 +39,7 @@ const CreateStyle = styled(Link)`
width: 10rem;
border-radius: 80px;
+ padding: 1rem;
align-items: center;
justify-content: center;
@@ -93,11 +94,30 @@ const IconStyle = styled.img`
margin-right: 0.5vw;
`;
+const TeamStyle = styled(Link)`
+ display: flex;
+ height: 100%;
+ width: fit-content;
+ background-color: #00cdc2;
+ border-radius: 100rem;
+ align-items: center;
+ justify-content: center;
+ color: #f7f7f7;
+ margin-left: 0.8rem;
+ box-shadow:
+ 12px 12px 16px #b5bec9,
+ -12px -12px 16px #ffffff;
+ &:hover {
+ box-shadow: none;
+ transition: 160ms;
+ }
+`;
+
export function Header(): ReactElement {
return (
-
+
Esa
chievement
@@ -124,7 +144,7 @@ export function Header(): ReactElement {
{useStore($hasAuthenticated) ? (
-
@@ -139,7 +159,7 @@ export function Header(): ReactElement {
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
/>
-
+
) : (
)}
+ teamIcon
);
- // https://api.iconify.design/ion:add.svg
}
diff --git a/src/components/achievements/Info.tsx b/src/components/achievements/Info.tsx
index ec8ffd0..700ee95 100644
--- a/src/components/achievements/Info.tsx
+++ b/src/components/achievements/Info.tsx
@@ -1,35 +1,78 @@
import { Flex, Text, Avatar, Box } from "@radix-ui/themes";
import { type ReactElement } from "react";
+import styled from "styled-components";
-export function Info(): ReactElement {
- const achievementTest = {
- id: 1,
- name: "first blood",
- description: "Get the first kill in a match.",
- icon: "https://placehold.jp/150x150.png",
- tag: ["kill"],
- };
+const InfoBox = styled(Flex)`
+ color: #242d3c;
+ position: relative;
+ left: 0;
+ background-color: #e7e7e7;
+ border-radius: 0 30px 30px 0;
+ height: 100vh;
+ width: fit-content;
+ padding: 9rem 4rem 6rem 4rem;
+ box-shadow:
+ 6px 6px 16px #b5bec9,
+ -6px -6px 16px #ffffff;
+`;
+
+const PercentageUnlocked = styled(Box)`
+ color: #00cdc2;
+ font-weight: bold;
+ font-size: 5rem;
+ box-shadow:
+ 6px 6px 16px #b5bec9,
+ -6px -6px 16px #ffffff;
+ padding: 0.8rem 2.4rem;
+ border-radius: 20px;
+`;
+
+const TagStyle = styled(Box)`
+ color: #242d3c;
+ font-weight: bold;
+ font-size: 1.2rem;
+ width: fit-content;
+ box-shadow:
+ 6px 6px 16px #b5bec9,
+ -6px -6px 16px #ffffff;
+ padding: 0.2rem 1rem;
+ border-radius: 100rem;
+`;
+const TagGroup = styled(Flex)`
+ width: 14rem;
+ flex-wrap: wrap;
+`;
+
+export function Info(): ReactElement {
return (
-
+
-
+
恋愛失敗
- {achievementTest.tag.map((tag, index) => (
- // eslint-disable-next-line react/no-array-index-key
-
- タグ {tag}
-
- ))}
-
+
+ タグ
+
+
+ #Love
+
+ #Love
+
+
+
+
+ 全体の実績解除率
+ 50%
+
+
);
}
diff --git a/src/components/achievements/RecentUnlockedCard.tsx b/src/components/achievements/RecentUnlockedCard.tsx
index 351a8da..f319477 100644
--- a/src/components/achievements/RecentUnlockedCard.tsx
+++ b/src/components/achievements/RecentUnlockedCard.tsx
@@ -1,77 +1,154 @@
-import { Avatar, Flex, Table, Text } from "@radix-ui/themes";
-import { useEffect, useState, type ReactElement } from "react";
-// import { useNavigate } from "react-router-dom";
+import { Avatar, Box, Flex, Text } from "@radix-ui/themes";
+import { type ReactElement } from "react";
+import { Link } from "react-router-dom";
import styled from "styled-components";
-import Achievements from "@/assets/achievements.json";
-import { type UnlockedAchievement } from "@/types/post-data/unlocked-achievements";
+// import { useNavigate } from "react-router-dom";
-const TableRow = styled(Table.Row)`
- transition: background-color 100ms;
- cursor: pointer;
- &:hover {
- background-color: #e2e8f0;
- }
-`;
+// const TableRow = styled(Table.Row)`
+// transition: background-color 100ms;
+// cursor: pointer;
+// &:hover {
+// background-color: #e2e8f0;
+// }
+// `;
-export function RecentUnlockedCard({
- unlockedAchievement,
-}: {
- unlockedAchievement: UnlockedAchievement;
-}): ReactElement {
- // const navigate = useNavigate();
+// export function RecentUnlockedCard({
+// unlockedAchievement,
+// }: {
+// unlockedAchievement: UnlockedAchievement;
+// }): ReactElement {
+// // const navigate = useNavigate();
- const [dayDiff, setDayDiff] = useState(0);
- const rtf1 = new Intl.RelativeTimeFormat("jp-lg", { style: "short" });
+// const [dayDiff, setDayDiff] = useState(0);
+// const rtf1 = new Intl.RelativeTimeFormat("jp-lg", { style: "short" });
- const matchedAchievement = Achievements.achievements.find(
- (a) => a.id === unlockedAchievement.achievementID,
- );
- if (matchedAchievement == null) {
- throw new Error("matchedAchievement not found!");
+// const matchedAchievement = Achievements.achievements.find(
+// (a) => a.id === unlockedAchievement.achievementID,
+// );
+// if (matchedAchievement == null) {
+// throw new Error("matchedAchievement not found!");
+// }
+
+// useEffect(() => {
+// const now = new Date();
+// const formatedCreatedAt = new Date(matchedAchievement.createdAt);
+// setDayDiff(
+// Math.round(
+// (formatedCreatedAt.getTime() - now.getTime()) / (24 * 60 * 60 * 1000),
+// ),
+// );
+// });
+
+// return (
+// {
+// // navigate("/achievements/:id", {
+// // params: {
+// // id: matchedAchievement.id.toString(),
+// // },
+// // });
+// // }}
+// >
+//
+//
+// {rtf1.format(dayDiff, "day")}
+//
+// {/* {passedDate} */}
+//
+//
+//
+//
+//
+//
+//
+//
+// {matchedAchievement?.name}
+//
+//
+// {matchedAchievement?.description}
+//
+//
+// #{matchedAchievement?.tags[0].name}
+//
+//
+//
+// );
+// }
+
+const a = [
+ { id: 1 },
+ { id: 2 },
+ { id: 3 },
+ { id: 4 },
+ { id: 5 },
+ { id: 6 },
+ { id: 7 },
+ { id: 8 },
+ { id: 9 },
+];
+
+const UnlockedBox = styled(Flex)`
+ width: 100%;
+ height: 100%;
+ margin: 7rem 6rem 0rem 6rem;
+`;
+
+const UnlockedCardStyle = styled(Link)`
+ display: flex;
+ flex-direction: column;
+ color: #242d3c;
+ width: 100%;
+ height: fit-content;
+ border-radius: 20px;
+ padding: 0rem 0.8rem;
+ box-shadow:
+ 6px 6px 16px #b5bec9,
+ -6px -6px 16px #ffffff;
+`;
+
+const UnlockedCardList = styled(Flex)`
+ padding: 1rem 2rem;
+ border-radius: 10px;
+ transition: 100ms;
+ margin: 0 1rem;
+ &:hover {
+ box-shadow:
+ inset 6px 6px 32px #b5bec9,
+ inset -10px -10px 32px #ffffff;
}
+`;
- useEffect(() => {
- const now = new Date();
- const formatedCreatedAt = new Date(matchedAchievement.createdAt);
- setDayDiff(
- Math.round(
- (formatedCreatedAt.getTime() - now.getTime()) / (24 * 60 * 60 * 1000),
- ),
- );
- });
+const UnlockedTitle = styled(Box)`
+ width: 100%;
+ font-weight: bold;
+ font-size: 1.2rem;
+`;
+export function RecentUnlockedCard(): ReactElement {
return (
- {
- // navigate("/achievements/:id", {
- // params: {
- // id: matchedAchievement.id.toString(),
- // },
- // });
- // }}
- >
-
-
- {rtf1.format(dayDiff, "day")}
-
- {/* {passedDate} */}
-
-
-
-
-
-
-
-
- {matchedAchievement?.name}
-
-
- {matchedAchievement?.description}
-
-
- #{matchedAchievement?.tags[0].name}
-
-
-
+
+
+ 最近解除した人
+
+
+
+ {a.map((b) => (
+
+
+
+ メンバー名
+
+ 20位
+ 1000pt
+
+ ))}
+
+
+
);
}
diff --git a/src/components/member/Info.tsx b/src/components/member/Info.tsx
index 95918fe..a595d74 100644
--- a/src/components/member/Info.tsx
+++ b/src/components/member/Info.tsx
@@ -1,97 +1,77 @@
-import { Avatar, Text } from "@radix-ui/themes";
+import { Flex, Text, Avatar, Box } from "@radix-ui/themes";
import { type ReactElement } from "react";
import styled from "styled-components";
-import FirstFlag from "@/assets/FirstFlag.svg";
-import Members from "@/assets/members.json";
-const FlexContainer = styled.div`
- display: flex;
- align-items: end;
- gap: 1rem;
-`;
-
-const StyledText = styled(Text)`
- font-size: 81px;
- font-weight: bold;
- white-space: nowrap;
+const InfoBox = styled(Flex)`
+ color: #242d3c;
position: relative;
- top: 0px;
- left: 0px;
+ left: 0;
+ background-color: #e7e7e7;
+ /* border-radius: 0 30px 30px 0; */
+ height: 100vh;
+ width: fit-content;
+ padding: 9rem 4rem 6rem 3rem;
+ box-shadow:
+ 6px 6px 16px #b5bec9,
+ -6px -6px 16px #ffffff;
`;
-const Point = styled.div`
- color: gray;
- font-size: 30px;
+const PercentageUnlocked = styled(Box)`
+ color: #00cdc2;
font-weight: bold;
- position: relative;
- top: 90px;
- left: 0px;
-`;
-
-const StyledAvatar = styled(Avatar)`
- width: 300px;
- height: 380px;
- padding-top: 5rem;
-`;
-
-// const Styledclass = styled.div`
-// font-size: 30px;
-// font-weight: bold;
-// color: gray;
-// padding: 8px;
-// `;
-
-const Flag = styled.div`
- position: relative;
- top: 90px;
- right: 0px;
-`;
-
-const Padding = styled.div`
- padding-left: 80px;
+ font-size: 5rem;
+ box-shadow:
+ 6px 6px 16px #b5bec9,
+ -6px -6px 16px #ffffff;
+ padding: 0.8rem 2.4rem;
+ border-radius: 20px;
`;
-const One = styled.div`
- font-size: 80px;
- position: relative;
- top: -80px;
- left: 25px;
-`;
-
-const Center = styled.div`
- display: flex;
- flex-direction: column;
- justify-content: center;
+const RankingStyle = styled(Flex)`
+ color: #242d3c;
+ font-weight: bold;
+ align-items: center;
+ font-size: 2.6rem;
+ box-shadow:
+ 6px 6px 16px #b5bec9,
+ -6px -6px 16px #ffffff;
+ padding: 0.4rem 2.4rem;
+ border-radius: 20px;
`;
-export function Info({
- id,
- point,
- rank,
-}: {
- id: string;
- point: number;
- rank: number;
-}): ReactElement {
- const matchedMember = Members.members.find((a) => a.email === id);
-
+export function Info(): ReactElement {
return (
-
-
-
- {point}pt
-
-
-
- {rank}
-
+
+
+
+
+
+ メンバー
+
+
-
-
+
+
+ 順位
+
+
+ 31位
+
+ 100pt
+
+
+
-
- {matchedMember?.name}
-
-
+
+
+ 実績解除率
+
+ 50%
+
+
);
}
diff --git a/src/components/member/UnlockedCard.tsx b/src/components/member/UnlockedCard.tsx
new file mode 100644
index 0000000..25e2422
--- /dev/null
+++ b/src/components/member/UnlockedCard.tsx
@@ -0,0 +1,84 @@
+import { Avatar, Box, Flex, Text } from "@radix-ui/themes";
+import { type ReactElement } from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+
+const a = [
+ { id: 1 },
+ { id: 2 },
+ { id: 3 },
+ { id: 4 },
+ { id: 5 },
+ { id: 6 },
+ { id: 7 },
+ { id: 8 },
+ { id: 9 },
+];
+
+const UnlockedBox = styled(Flex)`
+ width: 100%;
+ height: 100%;
+ margin: 7rem 6rem 0rem 6rem;
+`;
+
+const UnlockedCardStyle = styled(Link)`
+ display: flex;
+ flex-direction: column;
+ color: #242d3c;
+ width: 100%;
+ height: fit-content;
+ border-radius: 20px;
+ padding: 0rem 0.8rem;
+ box-shadow:
+ 6px 6px 16px #b5bec9,
+ -6px -6px 16px #ffffff;
+`;
+
+const UnlockedCardList = styled(Flex)`
+ padding: 1rem 2rem;
+ border-radius: 10px;
+ transition: 100ms;
+ margin: 0 1rem;
+ &:hover {
+ box-shadow:
+ inset 6px 6px 32px #b5bec9,
+ inset -10px -10px 32px #ffffff;
+ }
+`;
+
+const UnlockedTitle = styled(Box)`
+ width: 100%;
+ font-weight: bold;
+ font-size: 1.2rem;
+`;
+
+export function UnlockedCard(): ReactElement {
+ return (
+
+
+ メンバーが解除した実績
+
+
+
+ {a.map((b) => (
+
+
+
+ 恋愛失敗
+
+
+ dafjasdklflkasdjflkjasdflkjlaskjflaskdj
+
+ #love
+
+ ))}
+
+
+
+ );
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 81ea41e..334b685 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -4,6 +4,7 @@ import { type ReactElement } from "react";
import { Outlet, useRouteError } from "react-router-dom";
import styled from "styled-components";
import { Center } from "@/components/Center";
+import { Footer } from "@/components/Footer";
import { Header } from "@/components/Header";
import { Redirects } from "@/components/Redirects";
@@ -67,6 +68,7 @@ export default function Layout(): ReactElement {
+
diff --git a/src/pages/achievements/[id]/index.tsx b/src/pages/achievements/[id]/index.tsx
index 2da42ba..3b1e655 100644
--- a/src/pages/achievements/[id]/index.tsx
+++ b/src/pages/achievements/[id]/index.tsx
@@ -1,41 +1,47 @@
+import { Flex } from "@radix-ui/themes";
import { type ReactElement } from "react";
-import useSWRImmutable from "swr/immutable";
-import { match } from "ts-pattern";
-import { ErrorScreen } from "@/components/ErrorScreen";
-import { useAchievements } from "@/hooks/db/achievements";
-import { useTeam } from "@/hooks/teams";
-import { S } from "@/lib/consts";
-import { handleSWRError } from "@/lib/utils/swr";
-import { useParams } from "@/router";
+import { Info } from "@/components/achievements/Info";
+import { RecentUnlockedCard } from "@/components/achievements/RecentUnlockedCard";
-export default function Page(): ReactElement {
- const { id } = useParams("/achievements/:id");
- const { fetch } = useAchievements(useTeam);
- const swrAchievement = useSWRImmutable("achievements", fetch);
+// export default function Page(): ReactElement {
+// const { id } = useParams("/achievements/:id");
+// const { fetch } = useAchievements(useTeam);
+// const swrAchievement = useSWRImmutable("achievements", fetch);
+
+// return match(swrAchievement)
+// .with(S.Loading, () =>
Loading...
)
+// .with(S.Success, ({ data }) => (
+//
+// {data.map((d) => {
+// if (d.id === Number(id)) {
+// return (
+//
+//
name: {d.name}
+//
id: {d.id}
+//
description: {d.description}
+//
icon: {d.icon}
+//
createdAt: {String(d.createdAt)}
+//
updatedAt: {String(d.updatedAt)}
+//
tags: {d.tags.join(", ")}
+//
+// );
+// }
+// return null;
+// })}
+//
+// ))
+// .otherwise(({ data, error }) => (
+//
+// ));
+// }
- return match(swrAchievement)
- .with(S.Loading, () => Loading...
)
- .with(S.Success, ({ data }) => (
-
- {data.map((d) => {
- if (d.id === Number(id)) {
- return (
-
-
name: {d.name}
-
id: {d.id}
-
description: {d.description}
-
icon: {d.icon}
-
createdAt: {String(d.createdAt)}
-
updatedAt: {String(d.updatedAt)}
-
tags: {d.tags.join(", ")}
-
- );
- }
- return null;
- })}
-
- ))
- .otherwise(({ data, error }) => (
-
- ));
+export default function Page(): ReactElement {
+ return (
+
+
+
+
+
+
+ );
}
diff --git a/src/pages/members/[id]/index.tsx b/src/pages/members/[id]/index.tsx
index 183b03f..d2d0375 100644
--- a/src/pages/members/[id]/index.tsx
+++ b/src/pages/members/[id]/index.tsx
@@ -1,42 +1,58 @@
+// import { type ReactElement } from "react";
+// import useSWRImmutable from "swr/immutable";
+// import { match } from "ts-pattern";
+// import { ErrorScreen } from "@/components/ErrorScreen";
+// import { useTeam } from "@/hooks/teams";
+// import { S } from "@/lib/consts";
+// import { handleSWRError } from "@/lib/utils/swr";
+// import { useParams } from "@/router";
+
+// export default function Page(): ReactElement {
+// const { id } = useParams("/members/:id");
+// const { fetchMembers } = useTeam();
+// const swrMembers = useSWRImmutable("members", fetchMembers);
+
+// return match(swrMembers)
+// .with(S.Loading, () => Loading...
)
+// .with(S.Success, ({ data }) => (
+//
+// {data.map((d) => {
+// if (d.email === id) {
+// return (
+//
+//
name: {d.name}
+//
screen_name: {d.screen_name}
+//
email: {d.email}
+//
myself: {d.myself}
+//
createdAt: {String(d.joined_at)}
+//
posts_count: {d.posts_count}
+//
last_accessed_at: {d.last_accessed_at}
+//
role: {d.role}
+//
icon: {d.icon}
+//
+// );
+// }
+// return null;
+// })}
+//
+// ))
+// .otherwise(({ data, error }) => (
+//
+// ));
+// }
+
+import { Flex } from "@radix-ui/themes";
import { type ReactElement } from "react";
-import useSWRImmutable from "swr/immutable";
-import { match } from "ts-pattern";
-import { ErrorScreen } from "@/components/ErrorScreen";
-import { useTeam } from "@/hooks/teams";
-import { S } from "@/lib/consts";
-import { handleSWRError } from "@/lib/utils/swr";
-import { useParams } from "@/router";
+import { Info } from "@/components/member/Info";
+import { UnlockedCard } from "@/components/member/UnlockedCard";
export default function Page(): ReactElement {
- const { id } = useParams("/members/:id");
- const { fetchMembers } = useTeam();
- const swrMembers = useSWRImmutable("members", fetchMembers);
-
- return match(swrMembers)
- .with(S.Loading, () => Loading...
)
- .with(S.Success, ({ data }) => (
-
- {data.map((d) => {
- if (d.email === id) {
- return (
-
-
name: {d.name}
-
screen_name: {d.screen_name}
-
email: {d.email}
-
myself: {d.myself}
-
createdAt: {String(d.joined_at)}
-
posts_count: {d.posts_count}
-
last_accessed_at: {d.last_accessed_at}
-
role: {d.role}
-
icon: {d.icon}
-
- );
- }
- return null;
- })}
-
- ))
- .otherwise(({ data, error }) => (
-
- ));
+ return (
+
+
+
+
+
+
+ );
}