Checkpoint - using types out of QController as intended fully typescript types

2025-07-19 05:40:44 +00:00 · 2022-07-05 12:35:24 -05:00
parent d9d6c887f6
commit 4960dde81e
11 changed files with 290 additions and 308 deletions
--- a/src/qqq/components/Footer/index.tsx
+++ b/src/qqq/components/Footer/index.tsx
@ -0,0 +1,116 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @mui material components
+import Link from "@mui/material/Link";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Material Dashboard 2 PRO React TS Base Styles
+import typography from "assets/theme/base/typography";
+
+// Declaring props types for Footer
+interface Props {
+  company?: {
+    href: string;
+    name: string;
+  };
+  links?: {
+    href: string;
+    name: string;
+  }[];
+  [key: string]: any;
+}
+
+function Footer({ company, links }: Props): JSX.Element {
+  const { href, name } = company;
+  const { size } = typography;
+
+  const renderLinks = () =>
+    links.map((link) => (
+      <MDBox key={link.name} component="li" px={2} lineHeight={1}>
+        <Link href={link.href} target="_blank">
+          <MDTypography variant="button" fontWeight="regular" color="text">
+            {link.name}
+          </MDTypography>
+        </Link>
+      </MDBox>
+    ));
+
+  return (
+    <MDBox
+      width="100%"
+      display="flex"
+      flexDirection={{ xs: "column", lg: "row" }}
+      justifyContent="space-between"
+      alignItems="center"
+      px={1.5}
+    >
+      <MDBox
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        flexWrap="wrap"
+        color="text"
+        fontSize={size.sm}
+        px={1.5}
+      >
+        &copy; {new Date().getFullYear()}, made with
+        <MDBox fontSize={size.md} color="text" mb={-0.5} mx={0.25}>
+          <Icon color="inherit" fontSize="inherit">
+            favorite
+          </Icon>
+        </MDBox>
+        by
+        <Link href={href} target="_blank">
+          <MDTypography variant="button" fontWeight="medium">
+            &nbsp;{name}&nbsp;
+          </MDTypography>
+        </Link>
+        for a better web.
+      </MDBox>
+      <MDBox
+        component="ul"
+        sx={({ breakpoints }) => ({
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          justifyContent: "center",
+          listStyle: "none",
+          mt: 3,
+          mb: 0,
+          p: 0,
+
+          [breakpoints.up("lg")]: {
+            mt: 0,
+          },
+        })}
+      >
+        {renderLinks()}
+      </MDBox>
+    </MDBox>
+  );
+}
+
+// Declaring default props for Footer
+Footer.defaultProps = {
+  company: { href: "https://www.kingsrook.com/", name: "Kingsrook" },
+  links: [{ href: "https://www.kingsrook.com/", name: "Kingsrook" }],
+};
+
+export default Footer;