transformed header view to css modules :/

Author: bennobuilder

package.json

@@ -13,8 +13,8 @@
     "install-docusaurus": "yalc add @docusaurus/core & yarn install"
   },
   "dependencies": {
-    "@agile-ts/core": "0.0.10",
-    "@agile-ts/react": "0.0.10",
+    "@agile-ts/core": "0.0.11",
+    "@agile-ts/react": "0.0.11",
     "@docusaurus/core": "^2.0.0-alpha.70",
     "@docusaurus/module-type-aliases": "^2.0.0-alpha.70",
     "@docusaurus/preset-classic": "^2.0.0-alpha.70",

src/components/HeaderTyper/index.tsx

@@ -1,27 +1,27 @@
 import React from "react";
 import { FaGithub } from "react-icons/all";
 import { useHistory } from "react-router-dom";
-import styles from "./styles.module.scss";
+import styles from "./styles.module.css";
+import clsx from "clsx";
 
-export type Props = { to: string };
+export type Props = { to: string; className: string };
 
 const GithubButton: React.FC<Props> = (props) => {
-  const { to } = props;
+  const { to, className } = props;
   const history = useHistory();
 
   return (
     <button
-      className={styles.buttonContainer}
+      className={clsx(styles.ButtonContainer, className)}
       onClick={() => {
         if (to.startsWith("http")) {
           window.location.href = to;
           return;
         }
         history.push(to);
       }}
-      {...props}
     >
-      <FaGithub className={styles.githubIcon} />
+      <FaGithub className={styles.GithubIcon} />
       <div>GITHUB</div>
     </button>
   );

src/components/buttons/GithubButton/index.tsx

@@ -1,4 +1,4 @@
-.buttonContainer {
+.ButtonContainer {
   color: var(--ifm-color-on-surface);
   background-color: var(--ifm-color-surface);
 
@@ -18,12 +18,12 @@
   box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
 
   transition: 0.3s ease all;
+}
 
-  &:hover {
-    background-color: var(--ifm-color-surface-2);
-  }
+.ButtonContainer:hover {
+   background-color: var(--ifm-color-surface-2);
+ }
 
-  .githubIcon {
-    margin-right: 5px;
-  }
-}
+.GithubIcon {
+  margin-right: 5px;
+}

src/components/buttons/GithubButton/styles.module.scss renamed to src/components/buttons/GithubButton/styles.module.css

@@ -0,0 +1,28 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+import styles from "./styles.module.css";
+import clsx from "clsx";
+
+export type Props = { to: string; className: string };
+
+const PrimaryButton: React.FC<Props> = (props) => {
+  const { to, children, className } = props;
+  const history = useHistory();
+
+  return (
+    <button
+      className={clsx(styles.ButtonContainer, className)}
+      onClick={() => {
+        if (to.startsWith("http")) {
+          window.location.href = to;
+          return;
+        }
+        history.push(to);
+      }}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default PrimaryButton;

src/components/buttons/PrimaryButton.tsx

@@ -0,0 +1,21 @@
+.ButtonContainer {
+  color: var(--ifm-color-on-primary);
+  background-color: var(--ifm-color-primary);
+  border-radius: 3px;
+  border: none;
+
+  font-size: 18px;
+  font-weight: bold;
+
+  cursor: pointer;
+
+  padding: 15px 30px;
+  align-items: center;
+  justify-content: center;
+
+  transition: 0.3s ease all;
+}
+
+.ButtonContainer:hover {
+  background-color: var(--ifm-color-primary-lighter);
+}