Gallery

client/package.json

@@ -7,14 +7,16 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.19.2",
+    "node": "^14.2.0",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
     "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "sass": "^1.26.5"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/Components/App.js

@@ -1,12 +1,12 @@
 import React, { Component } from "react";
-import { Route, Switch } from "react-router-dom";
+import { Route, Switch, BrowserRouter } from "react-router-dom";
 import Home from "./Home/Home";
 import "../scss/main.scss";
 class App extends Component {
   render() {
     return (
       <Switch>
-        <Route exact path="/" component={Home} />
+        <Route path="/" exact component={Home} />
       </Switch>
     );
   }

client/src/Components/CusButton.jsx

@@ -1,41 +1,69 @@
 import React, { Component } from "react";
 
 class CusButton extends Component {
+  state = {
+    value: "Type here",
+  };
   dragStart = (e) => {
     const target = e.target;
+    target.classList.add("drag");
     e.dataTransfer.setData("card_id", target.id);
     setTimeout(() => {
       target.style.display = "none";
     }, 0);
   };
+  handleInputChange = (e) => {
+    const currentTarget = e.currentTarget;
+    const value = currentTarget.value;
+    this.setState({ value });
+  };
+  handleContextMenu = (e) => {
+    e.preventDefault();
+    const { toggle, styles } = this.props;
+    toggle(styles.aid);
+  };
   dragover = (e) => {
     e.stopPropagation();
   };
+  getInputStyles = (color, radius) => {
+    const styles = {};
+    styles.color = `white`;
+    styles.display = "block";
+    styles.borderRadius = `${radius}`;
+    styles.backgroundColor = `${color}`;
+    return styles;
+  };
+  getButtonStyles = () => {
+    const { styles } = this.props;
+    const properties = ["backgroundColor", "left", "top", "borderRadius"];
+    const buttonStyles = {};
+    for (const property of properties) {
+      buttonStyles[property] = styles[property];
+    }
+    return buttonStyles;
+  };
   render() {
+    const { aid, backgroundColor, borderRadius } = this.props.styles;
     return (
       <button
+        className={aid}
         draggable="true"
         onDragStart={this.dragStart}
         onDragOver={this.dragover}
-        id={this.props.aid}
-        style={{
-          color: this.props.color,
-          left: this.props.left,
-          top: this.props.top,
-          borderRadius: this.props.radius,
-        }}
-        onContextMenu={(e) => {
-          console.log(e);
-          e.preventDefault();
-          this.props.toggle(this.props.aid);
-          // console window object for global access
-          console.log(window.anuj);
-        }}
+        id={aid}
+        style={this.getButtonStyles()}
+        onContextMenu={this.handleContextMenu}
       >
-        hello
+        <input
+          type="text"
+          style={this.getInputStyles(backgroundColor, borderRadius)}
+          value={this.state.value}
+          className="buttonInput"
+          onChange={(e) => this.handleInputChange(e)}
+        />
       </button>
     );
   }
 }
 
-export default CusButton;
+export default CusButton;

client/src/Components/Home/DarkNavBar.jsx

@@ -0,0 +1,90 @@
+import React, { Component } from "react";
+class DarkNav extends Component {
+  state = {
+    link1: "Home",
+    link2: "Design",
+    link3: "Contact us",
+    link4: "Share",
+    backgroundColor: "",
+  };
+  componentDidMount() {
+    const backgroundColor = this.props.styles.backgroundColor;
+    this.setState({ backgroundColor });
+  }
+  handleInputChange = (e, label) => {
+    const value = e.currentTarget.value;
+    this.setState({ [label]: value });
+  };
+  dragStart = (e) => {
+    const target = e.target;
+    e.dataTransfer.setData("card_id", e.target.id);
+    setTimeout(() => {
+      target.style.display = "none";
+    }, 0);
+  };
+  dragover = (e) => {
+    e.stopPropagation();
+  };
+  getNavbarStyles = () => {
+    const element = this.props.styles;
+    const style = {};
+    const properties = [
+      "width",
+      "height",
+      "backgroundColor",
+      "top",
+      "left",
+      "borderRadius",
+      "position",
+    ];
+    for (const property of properties) {
+      style[property] = element[property];
+    }
+    style.padding = "3% 4%";
+    return style;
+  };
+  handleContextMenu = (e) => {
+    e.preventDefault();
+    const { toggle, styles } = this.props;
+    toggle(styles.aid);
+  };
+
+  getInputStyles = () => {
+    const properties = ["backgroundColor"];
+    const styles = {};
+    for (const property of properties) {
+      styles[property] = `${this.state[property]}`;
+    }
+    return styles;
+  };
+  render() {
+    const links = ["link1", "link2", "link3", "link4"];
+    return (
+      <React.Fragment>
+        <div
+          style={this.getNavbarStyles()}
+          id={this.props.styles.aid}
+          onDragStart={this.dragStart}
+          onContextMenu={this.handleContextMenu}
+          onDragOver={this.dragover}
+          draggable={true}
+        >
+          {links.map((m) => (
+            <a href="#" key={m} draggable={false}>
+              <input
+                type="text"
+                value={this.state[m]}
+                style={this.getInputStyles()}
+                draggable={false}
+                onChange={(e) => this.handleInputChange(e, `${m}`)}
+                className="anchorInput"
+              />
+            </a>
+          ))}
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+export default DarkNav;