Initial commit

src/components/Footer/Footer.js

@@ -0,0 +1,127 @@
+/*!
+
+=========================================================
+* Argon Dashboard Chakra PRO - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
+* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
+
+* Designed and Coded by Simmmple & Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+/*eslint-disable*/
+import React from "react";
+import { Flex, Link, List, ListItem, Text, VStack, HStack } from "@chakra-ui/react";
+
+export default function Footer() {
+  return (
+    <Flex
+      flexDirection={{
+        base: "column",
+        xl: "row",
+      }}
+      alignItems={{
+        base: "center",
+        xl: "start",
+      }}
+      justifyContent='space-between'
+      px='30px'
+      pb='20px'>
+      <Text
+        color='gray.400'
+        textAlign={{
+          base: "center",
+          xl: "start",
+        }}
+        mb={{ base: "20px", xl: "0px" }}>
+        &copy; {1900 + new Date().getYear()},{" "}
+        <Text as='span'>
+          {document.documentElement.dir === "rtl"
+            ? " مصنوع من ❤️ بواسطة"
+            : "Made with ❤️ by "}
+        </Text>
+        <Link
+          color='blue.400'
+          href='https://www.creative-tim.com'
+          target='_blank'>
+          {document.documentElement.dir === "rtl"
+            ? " توقيت الإبداعية"
+            : "Creative Tim "}
+        </Link>
+        &
+        <Link color='blue.400' href='https://www.simmmple.com' target='_blank'>
+          {document.documentElement.dir === "rtl" ? "سيممبل " : " Simmmple"}
+        </Link>
+        {document.documentElement.dir === "rtl"
+          ? "للحصول على ويب أفضل"
+          : " for a better web"}
+      </Text>
+      
+      {/* 添加备案信息 */}
+      <VStack spacing={1} align={{base: "center", xl: "start"}} mb={{base: "20px", xl: "0px"}}>
+        <HStack spacing={4} flexWrap="wrap" justify={{base: "center", xl: "start"}}>
+          <Link
+            color='gray.400'
+            href='https://beian.mps.gov.cn/#/query/webSearch?code=11010802046286'
+            target='_blank'
+            rel='noreferrer'
+            fontSize='xs'
+            _hover={{color: 'gray.300'}}
+          >
+            京公网安备11010802046286号
+          </Link>
+          <Text color='gray.400' fontSize='xs'>
+            京ICP备2025107343号-1
+          </Text>
+        </HStack>
+      </VStack>
+      
+      <List display='flex'>
+        <ListItem
+          me={{
+            base: "20px",
+            md: "44px",
+          }}>
+          <Link color='gray.400' href='https://www.creative-tim.com'>
+            {document.documentElement.dir === "rtl"
+              ? "توقيت الإبداعية"
+              : "Creative Tim"}
+          </Link>
+        </ListItem>
+        <ListItem
+          me={{
+            base: "20px",
+            md: "44px",
+          }}>
+          <Link color='gray.400' href='https://www.simmmple.com'>
+            {document.documentElement.dir === "rtl" ? "سيممبل" : "Simmmple"}
+          </Link>
+        </ListItem>
+        <ListItem
+          me={{
+            base: "20px",
+            md: "44px",
+          }}>
+          <Link
+            color='gray.400'
+            href='https://creative-tim.com/blog'>
+            {document.documentElement.dir === "rtl" ? "مدونة" : "Blog"}
+          </Link>
+        </ListItem>
+        <ListItem>
+          <Link
+            color='gray.400'
+            href='https://www.creative-tim.com/license'>
+            {document.documentElement.dir === "rtl" ? "رخصة" : "License"}
+          </Link>
+        </ListItem>
+      </List>
+    </Flex>
+  );
+}