created icon keymap for better styling (not working yet)

Author: bennobuilder

src/components/other/Icons/index.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { FiStar, FiZap } from 'react-icons/all';
+
+class IconKeyMap {
+  star = (props) => <FiStar {...props} />;
+  zap = (props) => <FiZap {...props} />;
+}
+
+type FunctionPropertyNames<T> = {
+  [K in keyof T]: T[K] extends (...args: any[]) => any ? K : never;
+}[keyof T] &
+  string;
+
+export type IconTypes<
+  T = IconKeyMap,
+  M = FunctionPropertyNames<Required<T>>
+> = M;
+
+type Props = {
+  type: IconTypes;
+  className: string;
+};
+
+const Icons: React.FC<Props> = (props) => {
+  const { type } = props;
+  const [iconKeyMap] = useState(new IconKeyMap());
+
+  return iconKeyMap[type](props) || <div>Icon '{type}' doesn't exists!</div>;
+};
+
+export default Icons;

src/components/other/StatBadge/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styles from './styles.module.css';
+import { IconContext } from 'react-icons';
+import Icons, { IconTypes } from '../Icons';
+
+export type Props = {
+  icon?: IconTypes;
+  number: number;
+  text: string;
+  to: string;
+};
+
+const StatBadge: React.FC<Props> = (props) => {
+  const { icon, number, text, to } = props;
+
+  return (
+    <div className={styles.Container}>
+      {icon && (
+        <div className={styles.IconContainer}>
+          <Icons type={icon} className={styles.Icon} />
+        </div>
+      )}
+      <div className={styles.ContentContainer}>
+        <div className={styles.Number}>{number}</div>
+        <div className={styles.Text}>{text}</div>
+      </div>
+    </div>
+  );
+};
+
+export default StatBadge;

src/components/other/StatBadge/styles.module.css

@@ -0,0 +1,39 @@
+.Container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 3rem 6rem;
+  border-radius: 8px;
+  border: 2px solid var(--ifm-color-on-background-3);
+}
+
+.IconContainer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 1rem;
+  border-radius: 100px;
+  background-color: var(--ifm-background-color);
+  filter: drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.25));
+}
+
+.Icon {
+  color: var(--ifm-color-on-background-2);
+  size: 1rem;
+}
+
+.ContentContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.Number {
+  color: var(--ifm-color-on-background-3);
+  font-size: var(--ifm-font-size-48);
+  font-weight: bold;
+}
+
+.Text {
+  color: var(--ifm-color-on-background-2);
+  font-size: var(--ifm-font-size-18);
+}

src/pages/LandingPage/components/StatsView/index.tsx

@@ -4,6 +4,8 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Spacer from '../../../../components/other/Spacer';
 import { useAgile } from '@agile-ts/react';
 import core from '../../../../core';
+import StatBadge from '../../../../components/other/StatBadge';
+import { FiStar } from 'react-icons/all';
 
 const StatsView: React.FC = () => {
   const { siteConfig } = useDocusaurusContext();
@@ -22,6 +24,14 @@ const StatsView: React.FC = () => {
           <Spacer height={20} />
         </div>
         <Spacer height={60} />
+        <div className={styles.Badges}>
+          <StatBadge
+            icon={<FiStar />}
+            number={githubStars}
+            text={'Stars'}
+            to={`${siteConfig.customFields.githubUrl}/stargazers`}
+          />
+        </div>
       </div>
     </div>
   );