Add ButtonType component

package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
+    "nanoid": "^3.3.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.1",

src/App.js

@@ -1,14 +1,13 @@
-import Page from "./Page";
+import Page from "./components/Page";
 import "./App.css";
 
 const App = () => {
-  console.log("App");
   return (
     <div className="App">
       <Page />
       <center>
         <strong>
-          Created By: <a href="https://github.com/Gameonn">Gameonn</a>{" "}
+          Created By: <a href="https://github.com/Gameonn">Gameonn</a>
         </strong>
         - devChallenges.io
       </center>

src/components/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/ButtonType.js

@@ -0,0 +1,38 @@
+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, "types");
+  let item = {};
+  let selectedTypes = Object.fromEntries(
+    Object.keys(types).filter(([key]) => key.includes(set))
+  )[set];
+  // console.log(selectedTypes);
+  return (
+    <div>
+      <b> {title} </b>
+      <FlexboxGrid justify="space-around">
+        {selectedTypes &&
+          selectedTypes.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;

src/Main.js → src/components/Main.js

@@ -1,35 +1,42 @@
 import Button from "./Button";
+import ButtonType from "./ButtonType";
 import { FlexboxGrid, Divider } from "rsuite";
 
 let styleObj = {
   display: "block",
   height: "40px"
 };
 
+const variantTypes = ["", "outline", "text"];
+const colorTypes = ["default", "primary", "danger", "secondary"];
+const sizeTypes = ["xs", "sm", "md", "lg"];
+const startIconTypes = ["home", "bookmarks", "bolt", "book"];
+const endIconTypes = ["toys", "whatshot", "weekend", "vignette"];
+
+const types = {
+  color: ["default", "primary", "danger", "secondary"],
+  size: ["xs", "sm", "md", "lg"],
+  variant: ["", "outline", "text"],
+  startIcon: ["home", "bookmarks", "bolt", "book"],
+  endIcon: ["toys", "whatshot", "weekend", "vignette"]
+};
+
 const Main = () => {
-  console.log("Main");
   return (
     <div>
       <h4>Buttons</h4> <br />
       <div className="show-grid">
-        <b> Normal </b>
-        <FlexboxGrid justify="space-around">
-          <FlexboxGrid.Item colspan={6}>
-            <small style={styleObj}> {`<Button />`} </small>
-            <Button />
-          </FlexboxGrid.Item>
-          <FlexboxGrid.Item colspan={6}>
-            <small style={styleObj}>{`<Button variant="outline" />`}</small>
-            <Button variant="outline" />
-          </FlexboxGrid.Item>
-          <FlexboxGrid.Item colspan={6}>
-            <small style={styleObj}> {`<Button variant="text" />`} </small>
-            <Button variant="text" />
-          </FlexboxGrid.Item>
-        </FlexboxGrid>
-
-        <Divider />
+        <ButtonType types={types} set="variant" title="Normal" />
+        <ButtonType types={types} set="color" title="Colors" />
+        <ButtonType types={types} set="size" title="Size" />
+        <ButtonType
+          types={startIconTypes}
+          set="startIcon"
+          title="Start Icons"
+        />
+        <ButtonType types={endIconTypes} set="endIcon" title="End Icons" />
         <b> Colors </b>
+
         <FlexboxGrid justify="space-around">
           <FlexboxGrid.Item colspan={4}>
             <small style={styleObj}> {`<Button color="default" />`} </small>