fixed some styling

Author: bennobuilder

src/components/other/Icons/icons.tsx

@@ -1,7 +1,22 @@
+import {
+  FiDownload,
+  FiEdit,
+  FiGitMerge,
+  FiRepeat,
+  FiServer,
+  FiStar,
+  FiUsers,
+  FiZap,
+} from 'react-icons/all';
 import React from 'react';
-import { FiStar, FiZap } from 'react-icons/all';
 
-export const IconKeyMap = {
+export const iconKeyMap = {
   star: (props) => <FiStar {...props} />,
   zap: (props) => <FiZap {...props} />,
+  repeat: (props) => <FiRepeat {...props} />,
+  users: (props) => <FiUsers {...props} />,
+  server: (props) => <FiServer {...props} />,
+  edit: (props) => <FiEdit {...props} />,
+  gitMerge: (props) => <FiGitMerge {...props} />,
+  download: (props) => <FiDownload {...props} />,
 };

src/components/other/Icons/index.tsx

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

src/components/other/SectionScroller/components/SectionRightItem/index.tsx

@@ -1,9 +1,10 @@
-import React from "react";
-import styles from "./styles.module.css";
-import clsx from "clsx";
+import React from 'react';
+import styles from './styles.module.css';
+import clsx from 'clsx';
+import Icons, { IconTypes } from '../../../Icons';
 
 export type Props = {
-  icon?: React.ComponentElement<any, any>;
+  icon?: IconTypes;
   title: string;
   description: string;
   onClick: () => void;
@@ -18,10 +19,9 @@ const SectionRightItem: React.FC<Props> = (props) => {
       className={clsx(styles.Container, {
         [styles.Container_Active]: active,
       })}
-      onClick={onClick}
-    >
+      onClick={onClick}>
       <h3 className={styles.Header}>
-        {icon && <div className={styles.Icon}>{icon}</div>}
+        {icon && <Icons type={icon} className={styles.Icon} />}
         {title}
       </h3>
       <p className={styles.Description}>{description}</p>

src/components/other/SectionScroller/components/SectionRightItem/styles.module.css

@@ -39,7 +39,7 @@
 }
 
 .Icon {
-  margin: 5px 10px 0 0;
+  margin-right: 10px;
 }
 
 .Header {

src/components/other/SectionScroller/index.tsx

@@ -4,13 +4,14 @@ import { useWindowSize } from '../../../hooks/useWindowSize';
 import SectionRightItem from './components/SectionRightItem';
 import SectionLeftItem from './components/SectionLeftItem';
 import { FiChevronDown, FiChevronUp } from 'react-icons/all';
+import { IconTypes } from '../Icons';
 
 export interface SectionInterface {
   codeWithComment?: string;
   code: string;
   title: string;
   description: string;
-  icon?: React.ComponentElement<any, any>;
+  icon?: IconTypes;
 }
 
 export type Props = { sections: SectionInterface[]; startIndex?: number };

src/components/other/StatBadge/index.tsx

@@ -2,19 +2,31 @@ import React from 'react';
 import styles from './styles.module.css';
 import { IconContext } from 'react-icons';
 import Icons, { IconTypes } from '../Icons';
+import clsx from 'clsx';
+import { useHistory } from 'react-router-dom';
 
 export type Props = {
   icon?: IconTypes;
   number: number;
   text: string;
   to: string;
+  className?: string;
 };
 
 const StatBadge: React.FC<Props> = (props) => {
-  const { icon, number, text, to } = props;
+  const { icon, number, text, to, className } = props;
+  const history = useHistory();
 
   return (
-    <div className={styles.Container}>
+    <div
+      className={clsx(styles.Container, className)}
+      onClick={() => {
+        if (to.startsWith('http')) {
+          window.open(to, '_blank');
+          return;
+        }
+        history.push(to);
+      }}>
       {icon && (
         <div className={styles.IconContainer}>
           <Icons type={icon} className={styles.Icon} />

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

@@ -1,25 +1,33 @@
 .Container {
   position: relative;
   display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
   flex-direction: column;
-  padding: 3rem 6rem;
+  height: 170px;
+  width: 260px;
+  cursor: pointer;
   border-radius: 8px;
   border: 2px solid var(--ifm-color-on-background-3);
 }
 
 .IconContainer {
   position: absolute;
-  top: 0;
-  right: 0;
+  display: flex;
+  top: -1rem;
+  right: -1rem;
   padding: 1rem;
-  border-radius: 100px;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
   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;
+  font-size: 1.5rem;
 }
 
 .ContentContainer {
@@ -28,12 +36,12 @@
 }
 
 .Number {
-  color: var(--ifm-color-on-background-3);
+  color: var(--ifm-color-on-background-2);
   font-size: var(--ifm-font-size-48);
   font-weight: bold;
 }
 
 .Text {
-  color: var(--ifm-color-on-background-2);
+  color: var(--ifm-color-on-background-3);
   font-size: var(--ifm-font-size-18);
 }

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

@@ -5,7 +5,6 @@ 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();
@@ -24,12 +23,27 @@ const StatsView: React.FC = () => {
           <Spacer height={20} />
         </div>
         <Spacer height={60} />
-        <div className={styles.Badges}>
+        <div className={styles.BadgesContainer}>
           <StatBadge
-            icon={<FiStar />}
+            icon={'star'}
             number={githubStars}
             text={'Stars'}
             to={`${siteConfig.customFields.githubUrl}/stargazers`}
+            className={styles.Badge}
+          />
+          <StatBadge
+            icon={'gitMerge'}
+            number={githubForks}
+            text={'Forks'}
+            to={`${siteConfig.customFields.githubUrl}/network/members`}
+            className={styles.Badge}
+          />
+          <StatBadge
+            icon={'download'}
+            number={npmDownloads}
+            text={'Downloads'}
+            to={siteConfig.customFields.npmCoreUrl}
+            className={styles.Badge}
           />
         </div>
       </div>

src/pages/LandingPage/components/StatsView/styles.module.css

@@ -35,3 +35,13 @@
   color: var(--ifm-color-on-background);
   font-weight: bold;
 }
+
+.BadgesContainer {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.Badge {
+  margin: 2em;
+}

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

@@ -4,7 +4,6 @@ import Spacer from '../../../../components/other/Spacer';
 import SectionScroller, {
   SectionInterface,
 } from '../../../../components/other/SectionScroller';
-import { FiEdit, FiRepeat, FiServer, FiUsers, FiZap } from 'react-icons/all';
 import PlainButton from '../../../../components/buttons/PlainButton';
 
 const sections: SectionInterface[] = [
@@ -23,7 +22,7 @@ MY_STATE.set("Frank");
     title: 'Create State',
     description:
       'Create an Information we need to remember at a later point in time.',
-    icon: <FiZap />,
+    icon: 'zap',
   },
   {
     code: `
@@ -36,7 +35,7 @@ const myState = useAgile(MY_STATE);
     `,
     title: 'Subscribe State',
     description: 'Bind any State to any Component.',
-    icon: <FiRepeat />,
+    icon: 'repeat',
   },
   {
     code: `
@@ -52,7 +51,7 @@ MY_COLLECTION.collect({id: 1, name: "Jeff"});
     `,
     title: 'Create set of States',
     description: 'Create a dynamic and reactive set of States.',
-    icon: <FiUsers />,
+    icon: 'users',
   },
   {
     code: `
@@ -64,7 +63,7 @@ MY_STATE.persist();
     `,
     title: 'Persist State',
     description: 'Store State permanently in any Storage.',
-    icon: <FiServer />,
+    icon: 'server',
   },
   {
     code: `
@@ -82,7 +81,7 @@ const IS_AUTH = App.createComputed(() => {
     `,
     title: 'Compute State',
     description: 'Compute State depending on other States.',
-    icon: <FiEdit />,
+    icon: 'edit',
   },
 ];