Settings

src/App.js

@@ -8,14 +8,14 @@ import NameBar from "./Components/NameBar/NameBar";
 import TopBar from "./Components/TopBar/TopBar";
 import CBASummaryBox from "./Components/SummaryBox/CreateBotAreaSummaryBox/CBASummaryBox";
 import CSASummaryBox from "./Components/SummaryBox/CreateStrategyAreaSummaryBox/CSASummaryBox";
-
+import ForgotPassword from "./Components/LogIn/ForgotPassword/ForgotPassword";
 import CreateStrategyArea from "./Components/CreateStrategyArea/CreateStrategyArea";
 import CreateBotArea from "./Components/CreateBotArea/CreateBotArea";
 import SideBar from "./Components/SideBar/SideBar";
 import Strategy from "./Components/Strategy/Strategy";
 import * as BS from "react-bootstrap";
 import ToggleVisibility from "./Components/SideBar/ToggleVisibility";
-import ForgotPassword from "./Components/LogIn/ForgotPassword/ForgotPassword"
+import Settings from "./Components/Settings/Settings";
 
 import SignIn from "./Components/LogIn/SignIn/SignIn";
 
@@ -26,9 +26,7 @@ let isLoggedIn = 1;
 function App() {
   return (
     <div className="container-fluid">
-
       {isLoggedIn ? (
-
         <BS.Row>
           <BS.Col md="2">
             <ToggleVisibility>
@@ -42,7 +40,6 @@ function App() {
             <BS.Row className="p-3">
               <BrowserRouter>
                 <Routes>
-
                   <Route index element={<Home />} />
                   <Route path="namebar" element={<NameBar />} />
                   <Route path="topBar" element={<TopBar />} />
@@ -56,19 +53,21 @@ function App() {
                   <Route path="createbotarea" element={<CreateBotArea />} />
                   <Route path="sidebar" element={<SideBar />} />
                   <Route path="strategy" element={<Strategy />} />
+                  <Route path="settings" element={<Settings />} />
                 </Routes>
               </BrowserRouter>
             </BS.Row>
           </BS.Col>
         </BS.Row>
-      ) : (<BrowserRouter>
-        <Routes>
-          <Route index element={<SignIn />} />
-          <Route  path="signin" element={<SignIn />} />
-          <Route path="forgotpassword" element={<ForgotPassword />} />
-          <Route path="signup" element={<SignUp />} />
-        </Routes>
-      </BrowserRouter>
+      ) : (
+        <BrowserRouter>
+          <Routes>
+            <Route index element={<SignIn />} />
+            <Route path="signin" element={<SignIn />} />
+            <Route path="forgotpassword" element={<ForgotPassword />} />
+            <Route path="signup" element={<SignUp />} />
+          </Routes>
+        </BrowserRouter>
       )}
     </div>
   );

src/Components/Settings/Settings.js

@@ -0,0 +1,132 @@
+import React, { useState } from "react";
+import anonim from "./anonim.jpg";
+import * as BS from "react-bootstrap";
+
+export function Settings() {
+  return (
+    <>
+      <BS.Tabs fill className="mb-3">
+        <BS.Tab
+          className="mb-3 bg-white text-black"
+          eventKey="first"
+          title="Profile"
+        >
+          <BS.Container>
+            <BS.Row>
+              <BS.Col>
+                <h5>GENERAL INFORMATION</h5>
+                <div className="d-flex ">
+                  <img
+                    alt=""
+                    className="rounded-circle"
+                    src={anonim}
+                    width="100"
+                    height="100"
+                  />
+                </div>
+                <div className="mt-5">
+                  <BS.Form>
+                    <BS.Form.Group className="mb-3" controlId="formBasicEmail">
+                      <BS.Form.Label>Email address</BS.Form.Label>
+                      <BS.Form.Control type="email" placeholder="Enter email" />
+                      <BS.Form.Text className="text-muted">
+                        This will be displayed as your creator name on the
+                        Marketplace.{" "}
+                      </BS.Form.Text>
+                    </BS.Form.Group>
+
+                    <BS.Form.Group
+                      className="mt-5 mb-3"
+                      controlId="exampleForm.ControlTextarea1"
+                    >
+                      <BS.Form.Label>Example textarea</BS.Form.Label>
+                      <BS.Form.Control
+                        as="textarea"
+                        rows={3}
+                        placeholder="Tell us a little about yourself"
+                      />
+                      <BS.Form.Text className="text-muted">
+                        This will be displayed to all users and followers on the
+                        Marketplace.{" "}
+                      </BS.Form.Text>
+                    </BS.Form.Group>
+                    <div className="mt-5 d-grid gap-2">
+                      <BS.Button variant="primary" size="lg" type="submit">
+                        Update my profile
+                      </BS.Button>
+                    </div>
+                  </BS.Form>
+                </div>
+              </BS.Col>
+              <BS.Col></BS.Col>
+            </BS.Row>
+          </BS.Container>
+        </BS.Tab>
+        <BS.Tab
+          className="mb-3 bg-white text-black"
+          eventKey="second"
+          title="Notifications"
+        >
+          <BS.Container>
+            <BS.Row>
+              <BS.Col>
+                {" "}
+                <h5>Your Notifications</h5>
+                <BS.Row>
+                  <BS.Col>
+                    <BS.Form.Select size="lg">
+                      <option>Large select</option>
+                    </BS.Form.Select>
+                  </BS.Col>
+                  <BS.Col>
+                    <BS.Form.Select size="lg">
+                      <option>Large select</option>
+                    </BS.Form.Select>
+                  </BS.Col>
+                </BS.Row>
+              </BS.Col>
+              <BS.Col>
+                {" "}
+                <h5>Your Delivery Methods</h5>
+              </BS.Col>
+            </BS.Row>
+          </BS.Container>
+        </BS.Tab>
+        <BS.Tab
+          className="mb-3 bg-white text-black"
+          eventKey="third"
+          title="Security"
+        >
+          <BS.Container>
+            <BS.Row>
+              <BS.Col>
+                <h5>PASSWORD</h5>
+                <p>Change your password to a new one.</p>
+              </BS.Col>
+              <BS.Col>
+                {" "}
+                <BS.Button variant="outline-primary" size="lg">
+                  Change password
+                </BS.Button>{" "}
+              </BS.Col>
+            </BS.Row>
+            <BS.Row className="mt-5">
+              <BS.Col>
+                <h5>MULTI-FACTOR AUTHENTICATION</h5>
+                <p>Setup or remove MFA devices.</p>
+              </BS.Col>
+              <BS.Col>
+                {" "}
+                <BS.Button variant="outline-primary" size="lg">
+                  Setup or remove
+                </BS.Button>{" "}
+              </BS.Col>
+            </BS.Row>
+          </BS.Container>
+        </BS.Tab>
+      </BS.Tabs>
+    </>
+  );
+}
+
+export default Settings;