Added an option to display a custom footer

Added an option in config file.
Added a component which renders the custom footer or a default footer if
no custom footer is defined.
Updated readme file with related instructions.

src/components/GitProfile.jsx

@@ -11,6 +11,7 @@ import Certification from './certification';
 import Education from './education';
 import Project from './project';
 import Blog from './blog';
+import Footer from './footer';
 import {
   genericError,
   getInitialTheme,
@@ -19,7 +20,6 @@ import {
   setupHotjar,
   tooManyRequestError,
   sanitizeConfig,
-  skeleton,
 } from '../helpers/utils';
 import { HelmetProvider } from 'react-helmet-async';
 import PropTypes from 'prop-types';
@@ -215,24 +215,7 @@ const GitProfile = ({ config }) => {
                 className={`p-4 footer ${bgColor} text-base-content footer-center`}
               >
                 <div className="card compact bg-base-100 shadow">
-                  <a
-                    className="card-body"
-                    href="https://github.com/arifszn/gitprofile"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <div>
-                      {loading ? (
-                        skeleton({ width: 'w-52', height: 'h-6' })
-                      ) : (
-                        <p className="font-mono text-sm">
-                          Made with{' '}
-                          <span className="text-primary">GitProfile</span> and
-                          ❤️
-                        </p>
-                      )}
-                    </div>
-                  </a>
+                  <Footer content={sanitizedConfig.footer} loading={loading} />
                 </div>
               </footer>
             </Fragment>

src/components/footer/index.jsx

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+
+import { skeleton } from '../../helpers/utils';
+
+const DefaultFooter = () => {
+  return (
+    <a
+      href="https://github.com/arifszn/gitprofile"
+      target="_blank"
+      rel="noreferrer"
+    >
+      <div>
+        <p className="font-mono text-sm">
+          Made with <span className="text-primary">GitProfile</span> and ❤️
+        </p>
+      </div>
+    </a>
+  );
+};
+
+const Footer = ({ content, loading }) => {
+  let footerContent = null;
+  if (content) {
+    footerContent = <div dangerouslySetInnerHTML={{ __html: content }} />;
+  } else {
+    footerContent = <DefaultFooter />;
+  }
+
+  return (
+    <div className="card-body">
+      {loading ? skeleton({ width: 'w-52', height: 'h-6' }) : footerContent}
+    </div>
+  );
+};
+
+Footer.propTypes = {
+  content: PropTypes.string,
+  loading: PropTypes.bool.isRequired,
+};
+
+export default Footer;

src/helpers/utils.jsx

@@ -135,6 +135,7 @@ export const sanitizeConfig = (config) => {
   ];
 
   return {
+    footer: config?.footer,
     github: {
       username: config?.github?.username || '',
       sortBy: config?.github?.sortBy || 'stars',
@@ -207,7 +208,7 @@ export const tooManyRequestError = (reset) => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          rate limit.
+          rate limit
         </a>
         ! Try again later{` ${reset}`}.
       </p>