From 686edceda63d5b88b1fdf94cd97577f2954ec6ea Mon Sep 17 00:00:00 2001
From: Aaron Liu <abslant.liu@gmail.com>
Date: Tue, 15 Jul 2025 10:41:37 +0800
Subject: [PATCH] feat: add powered by banner

---
 src/component/Frame/HeadlessFrame.tsx |  6 ++-
 src/component/Frame/PoweredBy.tsx     | 59 +++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 src/component/Frame/PoweredBy.tsx

diff --git a/src/component/Frame/HeadlessFrame.tsx b/src/component/Frame/HeadlessFrame.tsx
index 46a012c..cd6df13 100644
--- a/src/component/Frame/HeadlessFrame.tsx
+++ b/src/component/Frame/HeadlessFrame.tsx
@@ -1,9 +1,10 @@
 import { Box, Container, Grid, Paper } from "@mui/material";
+import { Outlet, useNavigation } from "react-router-dom";
 import { useAppDispatch, useAppSelector } from "../../redux/hooks.ts";
+import AutoHeight from "../Common/AutoHeight.tsx";
 import CircularProgress from "../Common/CircularProgress.tsx";
 import Logo from "../Common/Logo.tsx";
-import AutoHeight from "../Common/AutoHeight.tsx";
-import { Outlet, useNavigation } from "react-router-dom";
+import PoweredBy from "./PoweredBy.tsx";
 
 const Loading = () => {
   return (
@@ -71,6 +72,7 @@ const HeadlessFrame = () => {
               </AutoHeight>
             </Paper>
           </Box>
+          <PoweredBy />
         </Grid>
       </Container>
     </Box>
diff --git a/src/component/Frame/PoweredBy.tsx b/src/component/Frame/PoweredBy.tsx
new file mode 100644
index 0000000..a61c954
--- /dev/null
+++ b/src/component/Frame/PoweredBy.tsx
@@ -0,0 +1,59 @@
+import { Box, BoxProps, Typography, useTheme } from "@mui/material";
+
+export interface PoweredByProps extends BoxProps {}
+
+const PoweredBy = ({ ...rest }: PoweredByProps) => {
+  const theme = useTheme();
+  return (
+    <Box {...rest}>
+      <Box
+        component="a"
+        marginBottom={2}
+        href="https://cloudreve.org"
+        target="_blank"
+        sx={{
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          textDecoration: "none",
+          "& img": {
+            filter: "grayscale(100%)",
+            opacity: 0.3,
+          },
+          "&:hover": {
+            "& img": {
+              filter: "grayscale(0%)",
+              opacity: 1,
+            },
+          },
+        }}
+      >
+        <Typography
+          variant="body2"
+          sx={{
+            color: (theme) => theme.palette.action.disabled,
+          }}
+          fontWeight={500}
+        >
+          Powered by
+        </Typography>
+        <Box
+          component="img"
+          alt="Cloudreve"
+          sx={{
+            height: 20,
+          }}
+          src={
+            theme.palette.mode === "dark"
+              ? "https://docs.cloudreve.org/logo_light.svg"
+              : "https://docs.cloudreve.org/logo.svg"
+          }
+          alt="Cloudreve"
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default PoweredBy;