Refactor Fix

package.json

@@ -10,6 +10,7 @@
     "nanoid": "^3.3.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "rsuite": "^5.8.1",
     "web-vitals": "^2.1.4"

src/App.js

@@ -1,9 +1,21 @@
+
+import React from "react";
+import { Route, Routes, Navigate } from "react-router-dom";
+
 import Page from "./components/Page";
 import "./App.css";
 
+import Main from "./components/Main";
+
 const App = () => {
   return (
     <div className="App">
+      <Routes>
+        <Route path="/" element={<Navigate replace to="/button" />} />
+        <Route path="/input" element={Main} />
+        <Route path="/button" element={Page} />
+      </Routes>
+
       <Page />
       <center>
         <strong>

src/components/Button/Button.js

@@ -0,0 +1,39 @@
+import styles from "./Button.module.css";
+
+const Button = (...props) => {
+  console.log(props, "Button");
+  return <p>Hey</p>;
+};
+
+// const Button = ({
+//   variant,
+//   text,
+//   disableShadow,
+//   states,
+//   disabled,
+//   size,
+//   color,
+//   startIcon,
+//   endIcon,
+//   children
+// }) => {
+//   return (
+//     <button
+//       className={`
+//     ${styles.button}
+//     ${color ? styles[color] : styles["default"]}
+//     ${styles[variant]}
+//     ${disableShadow ? styles.disableShadow : undefined}
+//     ${styles[size]}`}
+//       disabled={disabled ? "disabled" : ""}
+//     >
+//       {startIcon && <span className="material-icons">{startIcon}</span>}
+//       {/* {variant && <span className={styles["caps"]}> {variant}</span>}
+//       {color && <span className={styles["caps"]}> {color}</span>}  */}
+//       <span className={styles["caps"]}> Default </span>
+//       {endIcon && <span className="material-icons">{endIcon}</span>}
+//     </button>
+//   );
+// };
+
+export default Button;

src/components/Button/Button.module.css

@@ -0,0 +1,109 @@
+.button {
+  padding: 0.5rem 1rem;
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+  font-family: "Noto Sans", sans-serif;
+  border: none;
+  background: #e0e0e0;
+  border-radius: 0.5rem;
+  box-shadow: 0px 2px 3px rgba(51, 51, 51, 0.2);
+  display: flex;
+  cursor: pointer;
+}
+.button:hover,
+.button:focus,
+.button.active {
+  background: #aeaeae;
+}
+
+.disableShadow {
+  box-shadow: none;
+}
+
+button:disabled {
+  color: #9e9e9e;
+  cursor: default;
+}
+.show-grid small {
+  min-height: 50px;
+  display: inline-block;
+}
+
+.xs {
+  padding: 0.25rem 0.5rem;
+}
+.sm {
+  padding: 0.375rem 0.75rem;
+}
+
+.md {
+  padding: 0.5rem 1rem;
+}
+
+.lg {
+  padding: 0.6875rem 1.375rem;
+}
+
+.default {
+  background-color: #eee;
+  color: rgb(95, 92, 92);
+  border: 1px solid #e0e0e0;
+}
+
+.primary {
+  color: white;
+  background-color: #2962ff;
+  border: 1px solid #3d5afe;
+}
+
+.secondary {
+  color: white;
+  background-color: #455a64;
+  border: 1px solid #9ca4a8;
+}
+
+.caps {
+  text-transform: capitalize;
+  padding: 2px;
+}
+.danger {
+  color: white;
+  background-color: #d32f2f;
+  border: 1px solid #ec7575;
+}
+
+.outline {
+  background: none !important;
+  box-shadow: none;
+  color: #828282;
+}
+
+.primary.outline {
+  color: #2962ff;
+}
+
+.danger.outline {
+  color: #d32f2f;
+}
+
+.secondary.outline {
+  color: #455a64;
+}
+
+.text {
+  background: transparent !important;
+  border: 0px !important;
+  color: #828282;
+  box-shadow: none;
+}
+
+.raw-code {
+  display: block;
+  height: 40px;
+}
+
+.materialIcons {
+  font-size: 14px;
+  margin: 0 0.5rem;
+}

src/components/Button/ButtonType.js

@@ -0,0 +1,34 @@
+import Button from "./Button";
+import { FlexboxGrid, Divider } from "rsuite";
+import { nanoid } from "nanoid";
+
+let styleObj = {
+  display: "block",
+  height: "40px"
+};
+
+const ButtonType = ({ title, types, set }) => {
+  console.log(types[set], "types");
+  let item = {};
+  // let item = {`${set}`:"someString", "dynamicKey2":"someString"};
+  return (
+    <div>
+      <b> {title} </b>
+      <FlexboxGrid justify="space-around">
+        {types[set].map(type => {
+          item[set] = type;
+          return (
+            <FlexboxGrid.Item colspan={6} key={nanoid()}>
+              <small style={styleObj}> {`<Button  />`} </small>
+              <Button {...item} />
+            </FlexboxGrid.Item>
+          );
+        })}
+      </FlexboxGrid>
+
+      <Divider />
+    </div>
+  );
+};
+
+export default ButtonType;