adjust the code (#2090)

Co-authored-by: root <root@abing>
eesast · Nov 17, 2024 · c5152e1 · c5152e1
1 parent 08b36ee
commit c5152e1
Showing 1 changed file with 40 additions and 40 deletions.
diff --git a/src/app/UserSite/Components/Background.tsx b/src/app/UserSite/Components/Background.tsx
@@ -8,51 +8,51 @@ interface BackgroundProps {
   children: React.ReactNode;
 }
 
-const Background: React.FC<BackgroundProps> = ({
-  mode,
-  children,
-  imageIndex,
-}) => {
-  const Background = styled.div<{ url: string }>`
-    height: calc(100vh - 72px);
-    width: 100%;
-    background-image: url(${(props) => props.url});
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  `;
-
-  const ActionCard = styled.div`
-    width: 360px;
-    padding-top: 12px;
-    padding-bottom: 36px;
-    padding-left: 36px;
-    padding-right: 36px;
-    border-radius: 8px;
-    box-shadow: 0 0 18px rgba(0, 0, 0, 0.25);
-    background-color: ${mode === "light"
-      ? `rgba(255, 255, 255, 0.5)`
-      : `rgba(0, 0, 0, 0.5)`};
-    backdrop-filter: blur(36px);
-  `;
-
-  const backgrounds = [
-    `./backgrounds/tsinghua-fall.jpg`,
-    `./backgrounds/integrated-circuits.jpg`,
-    `./backgrounds/signals.jpg`,
-    `./backgrounds/cognition.jpg`,
-  ];
+interface StyledActionCardProps {
+  mode?: string;
+}
+
+const backgrounds = [
+  `./backgrounds/tsinghua-fall.jpg`,
+  `./backgrounds/integrated-circuits.jpg`,
+  `./backgrounds/signals.jpg`,
+  `./backgrounds/cognition.jpg`,
+];
+
+const StyledBackground = styled.div<{ url: string }>`
+  height: calc(100vh - 72px);
+  width: 100%;
+  background-image: url(${(props) => props.url});
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const StyledActionCard = styled.div<StyledActionCardProps>`
+  width: 360px;
+  padding-top: 12px;
+  padding-bottom: 36px;
+  padding-left: 36px;
+  padding-right: 36px;
+  border-radius: 8px;
+  box-shadow: 0 0 18px rgba(0, 0, 0, 0.25);
+  background-color: ${(props) =>
+    props.mode === "light" ? `rgba(255, 255, 255, 0.5)` : `rgba(0, 0, 0, 0.5)`};
+  backdrop-filter: blur(36px);
+`;
+
+const Background: React.FC<BackgroundProps> = ({ children, imageIndex }) => {
   const background = backgrounds[Math.floor(imageIndex * backgrounds.length)];
 
   return (
-    <Background url={background}>
+    <StyledBackground url={background}>
       <Center>
-        <ActionCard>{children}</ActionCard>
+        <StyledActionCard>{children}</StyledActionCard>
       </Center>
-    </Background>
+    </StyledBackground>
   );
 };