From f6039556a720bcf28e8621bcdf9874b46a8f0eb9 Mon Sep 17 00:00:00 2001 From: 1500hayao <169636853+1500hayao@users.noreply.github.com> Date: Mon, 17 Jun 2024 11:26:17 +0900 Subject: [PATCH 1/2] =?UTF-8?q?FirstPengin=E3=81=AE=E8=A1=A8=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/firstsvg/Group 30.svg | 5 ++ src/assets/firstsvg/Union.svg | 3 ++ src/pages/hayato.tsx | 78 ++++++++++++++++++++++++++++++-- 3 files changed, 83 insertions(+), 3 deletions(-) create mode 100644 src/assets/firstsvg/Group 30.svg create mode 100644 src/assets/firstsvg/Union.svg diff --git a/src/assets/firstsvg/Group 30.svg b/src/assets/firstsvg/Group 30.svg new file mode 100644 index 0000000..67a4771 --- /dev/null +++ b/src/assets/firstsvg/Group 30.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/firstsvg/Union.svg b/src/assets/firstsvg/Union.svg new file mode 100644 index 0000000..491c15f --- /dev/null +++ b/src/assets/firstsvg/Union.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/hayato.tsx b/src/pages/hayato.tsx index 5544e28..e41b945 100644 --- a/src/pages/hayato.tsx +++ b/src/pages/hayato.tsx @@ -1,8 +1,80 @@ +import { Flex, Text, Avatar, Box} from "@radix-ui/themes"; import { type ReactElement } from "react"; -import Info from "@/components/achievements/Info"; +import styled from "styled-components"; +import GroupSVG from "@/assets/firstsvg/Group 30.svg"; +import UnionSVG from "@/assets/firstsvg/Union.svg"; + +const StyledFlex = styled(Flex)` + padding:8px; +`; + +const Margin = styled.div` + margin-bottom: 50px + `; + +const BackgroundImage = styled.div` +position: relative; +top:-50px; +`; + +const Front = styled.div` +position: absolute; +top:5px; +left:60px; +`; + +const King = styled.div` +position: absolute; +top:53px; +left: 120px; +`; + export default function Page(): ReactElement { + const achievementTest = { + id: 1, + name: "first blood", + description: "Get the first kill in a match.", + icon: "https://placehold.jp/150x150.png", + tag: ["kill"], + }; + return ( - + + + + + + + 最初の解除者 + + + + + + + + + Union + + + + + + {achievementTest.name} + + + + Group + + + ); -} \ No newline at end of file +} + + From a4592247b0cf5e4b815923e3766e718bd298f72c Mon Sep 17 00:00:00 2001 From: 1500hayao <169636853+1500hayao@users.noreply.github.com> Date: Mon, 17 Jun 2024 11:39:56 +0900 Subject: [PATCH 2/2] =?UTF-8?q?achievements=E3=81=A7firstpenguin=E3=81=AE?= =?UTF-8?q?=E8=A1=A8=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/achievements/FirstPenguin.tsx | 80 ++++++++++++++++++++ src/pages/achievements/index.tsx | 2 + 2 files changed, 82 insertions(+) diff --git a/src/components/achievements/FirstPenguin.tsx b/src/components/achievements/FirstPenguin.tsx index e69de29..e2ab55f 100644 --- a/src/components/achievements/FirstPenguin.tsx +++ b/src/components/achievements/FirstPenguin.tsx @@ -0,0 +1,80 @@ +import { Flex, Text, Avatar, Box} from "@radix-ui/themes"; +import { type ReactElement } from "react"; +import styled from "styled-components"; +import GroupSVG from "@/assets/firstsvg/Group 30.svg"; +import UnionSVG from "@/assets/firstsvg/Union.svg"; + +const StyledFlex = styled(Flex)` + padding:8px; +`; + +const Margin = styled.div` + margin-bottom: 50px + `; + +const BackgroundImage = styled.div` +position: relative; +top:-50px; +`; + +const Front = styled.div` +position: absolute; +top:5px; +left:60px; +`; + +const King = styled.div` +position: absolute; +top:53px; +left: 120px; +`; + + +export function FirstPenguin(): ReactElement { + const achievementTest = { + id: 1, + name: "first blood", + description: "Get the first kill in a match.", + icon: "https://placehold.jp/150x150.png", + tag: ["kill"], + }; + + return ( + + + + + + + 最初の解除者 + + + + + + + + + Union + + + + + + {achievementTest.name} + + + + Group + + + + ); +} + + diff --git a/src/pages/achievements/index.tsx b/src/pages/achievements/index.tsx index 9dbdbdf..5708e64 100644 --- a/src/pages/achievements/index.tsx +++ b/src/pages/achievements/index.tsx @@ -1,10 +1,12 @@ import { type ReactElement } from "react"; +import { FirstPenguin } from "@/components/achievements/FirstPenguin"; import { AchievementCard } from "@/components/achievements/Card"; import data from "@/assets/achievements.json"; export default function Page(): ReactElement { return ( <> + {data.achievements.map((achievement) => (