integrate reactDnD

package.json

@@ -6,8 +6,12 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "express": "^4.18.2",
     "react": "^18.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

public/index.html

@@ -5,6 +5,9 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
     <meta
       name="description"
       content="Web site created using create-react-app"

src/App.js

@@ -1,25 +1,18 @@
-import logo from './logo.svg';
-import './App.css';
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Home from './components/homePage';
+import Sheets from './components/sheets';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/sheets" element={<Sheets />} />
+        {/* Define more routes here if needed */}
+      </Routes>
+    </Router>
   );
 }
 
-export default App;
+export default App;

src/components/draggables/labelInput.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useDrag } from 'react-dnd';
+
+const MyDraggableComponent = ({ isDragging, text }) => {
+  const [{ opacity }, dragRef] = useDrag(
+    () => ({
+      type: 'card',
+      collect: (monitor) => ({
+        opacity: monitor.isDragging() ? 0.5 : 1
+      })
+    }),
+    []
+  )
+  return (
+    <div ref={dragRef} style={{ opacity }}>
+      <label>Character Name<input type="text" name="name" id="characterName" /></label>
+    </div>
+  )
+};
+
+export default MyDraggableComponent;

src/components/homePage.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import '../styles/main.css'; // Import CSS/LESS file directly
+
+const Home = () => {
+  return (
+    <div className="home page">
+      <nav className="nav">
+        <Link to="/builder" className='navButton'>Builder</Link>
+        <Link to="/sheets" className='navButton'>Sheets</Link>
+      </nav>
+      <main className="content">
+        <section id="about">
+          <h1>About SheetBuilder</h1>
+          <p>SheetBuilder is a web application that allows users to build and share custom character sheets for any RPG out there, using a simple Drag n Drop system</p>
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export default Home;

src/components/sheets.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import '../styles/main.css'; // Import CSS/LESS file directly
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import LabelInput from './draggables/labelInput.jsx';
+
+
+const Home = () => {
+  return (
+    <div className="home page">
+      <nav className="nav">
+        <Link to="/builder" className='navButton'>Builder</Link>
+        <Link to="/sheets" className='navButton'>Sheets</Link>
+      </nav>
+      <main className="content">
+        <aside className='sidebar'>
+          <h2>Pick your draggable component</h2>
+          <div className="picker">
+            <DndProvider backend={HTML5Backend}>
+              <LabelInput />
+            </DndProvider>
+          </div>
+        </aside>
+        <section id="create">
+          <h1>Create your own</h1>
+
+
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export default Home;