Issues/120

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 (
+    <FooterStyle>
+      <CreateStyle to="/create">
+        <PrusStyle
+          alt="prus"
+          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23f7f7f7' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M256 112v288m144-144H112'/%3E%3C/svg%3E"
+        />
+      </CreateStyle>
+    </FooterStyle>
+  );
+}

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 (
     <HeaderStyle>
       <EsaAchievementsStyle to="/">
-        <IconStyle alt="Icon" src={Icon} />
+        <IconStyle alt="Icon" src={LogoIcon} />
         <Box>
           <Esa>Esa</Esa>
           <Text>chievement</Text>
@@ -124,7 +144,7 @@ export function Header(): ReactElement {
         </LinkContents>
 
         {useStore($hasAuthenticated) ? (
-          <CreateStyle
+          <UnlockedStyle
             className="createStyle createHoverAnime headerDefaultStyle"
             to="/unlocked"
           >
@@ -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"
               />
             </Flex>
-          </CreateStyle>
+          </UnlockedStyle>
         ) : (
           <LinkComponent
             className="createStyle createHoverAnime"
@@ -158,8 +178,8 @@ export function Header(): ReactElement {
             </Flex>
           </LinkComponent>
         )}
+        <TeamStyle to="/">teamIcon</TeamStyle>
       </RightContents>
     </HeaderStyle>
   );
-  // https://api.iconify.design/ion:add.svg
 }

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 (
-    <Box maxWidth="8rem">
+    <InfoBox direction="column">
       <Flex align="center" direction="column">
         <Avatar
           fallback="T"
-          size="7"
+          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"
         />
 
-        <Text size="6" weight="bold">
+        <Text mt="1rem" size="8" weight="bold">
           恋愛失敗
         </Text>
       </Flex>
 
-      {achievementTest.tag.map((tag, index) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <Text key={index} color="gray">
-          タグ {tag}
-        </Text>
-      ))}
-    </Box>
+      <Flex direction="column" mt="2rem">
+        <Text weight="bold">タグ</Text>
+        <TagGroup>
+          <TagStyle mr="0.6rem" mt="1rem">
+            #Love
+          </TagStyle>
+          <TagStyle mt="1rem">#Love</TagStyle>
+        </TagGroup>
+      </Flex>
+
+      <Flex direction="column" mt="2rem">
+        <Text weight="bold">全体の実績解除率</Text>
+        <PercentageUnlocked mt="1rem">50%</PercentageUnlocked>
+      </Flex>
+    </InfoBox>
   );
 }