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 - - flag - - {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 { +