feat: add powered by banner

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>

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;