✨ 変更の保留を実装

SystemEngineeringTeam · Oct 3, 2024 · 4109b79 · 4109b79
1 parent 3b04228
commit 4109b79
Show file tree

Hide file tree

Showing 3 changed files with 207 additions and 159 deletions.
diff --git a/src/components/Button.ts b/src/components/Button.ts
@@ -0,0 +1,66 @@
+import { Button } from "@radix-ui/themes";
+import styled from "styled-components";
+
+export const ButtonStyled = styled(Button)`
+  font-weight: 600;
+  font-family: sans-serif;
+  font-size: 1rem;
+  cursor: pointer;
+
+  background-color: #e7e7e7;
+  color: #00cdc2;
+  border: 1px solid #00cdc2;
+
+  width: fit-content;
+  height: fit-content;
+
+  padding: 10px 20px;
+
+  border-radius: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+
+  box-shadow:
+    6px 6px 16px #b5bec9,
+    -6px -6px 16px #ffffff;
+
+  transform-origin: 50% 50%;
+  transition: 300ms;
+
+  ::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 120%;
+    background-color: #00cdc2;
+
+    top: 0;
+    left: 0;
+    z-index: -1;
+    transform-origin: 100% 50%;
+    transform: scaleX(0%);
+    transition: transform 300ms;
+  }
+
+  &:hover {
+    box-shadow: none;
+    transform: scale(1.06);
+
+    &::after {
+      transform-origin: 0% 50%;
+      transform: scaleX(100%);
+      transform: none;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+    transform: scale(1.06);
+    box-shadow: none;
+  }
+`;
diff --git a/src/pages/auth/callback/index.tsx b/src/pages/auth/callback/index.tsx
@@ -1,10 +1,11 @@
 import { useStore } from "@nanostores/react";
-import { Button, Flex } from "@radix-ui/themes";
+import { Flex } from "@radix-ui/themes";
 import { type ReactNode, useEffect, useState, type ReactElement } from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import useSWRImmutable from "swr/immutable";
 import { match, P } from "ts-pattern";
+import { ButtonStyled } from "@/components/Button";
 import { ErrorScreen } from "@/components/ErrorScreen";
 import { Expanded, ExpandedCenter } from "@/components/Expanded";
 import { useAchievements } from "@/hooks/db/achievements";
@@ -52,70 +53,6 @@ const TeamInfo = styled(Flex)`
   }
 `;
 
-const ButtonStyled = styled(Button)`
-  font-weight: 600;
-  font-family: sans-serif;
-  font-size: 1rem;
-  cursor: pointer;
-
-  background-color: #e7e7e7;
-  color: #00cdc2;
-  border: 1px solid #00cdc2;
-
-  width: fit-content;
-  height: fit-content;
-
-  padding: 10px 20px;
-
-  border-radius: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
-  z-index: 1;
-
-  box-shadow:
-    6px 6px 16px #b5bec9,
-    -6px -6px 16px #ffffff;
-
-  transform-origin: 50% 50%;
-  transition: 300ms;
-
-  ::after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 120%;
-    background-color: #00cdc2;
-
-    top: 0;
-    left: 0;
-    z-index: -1;
-    transform-origin: 100% 50%;
-    transform: scaleX(0%);
-    transition: transform 300ms;
-  }
-
-  &:hover {
-    box-shadow: none;
-    transform: scale(1.06);
-
-    &::after {
-      transform-origin: 0% 50%;
-      transform: scaleX(100%);
-      transform: none;
-    }
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.3;
-    transform: scale(1.06);
-    box-shadow: none;
-  }
-`;
-
 type Team = ArrayElem<
   Awaited<ReturnType<ReturnType<typeof useMember>["fetchJoinedTeams"]>>
 >;