diff --git a/package-lock.json b/package-lock.json index 5976b9f..7c5ff34 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,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" @@ -8032,6 +8033,14 @@ "he": "bin/he" } }, + "node_modules/history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -13269,6 +13278,30 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "dependencies": { + "history": "^5.2.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "dependencies": { + "history": "^5.2.0", + "react-router": "6.3.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -21826,6 +21859,14 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -25465,6 +25506,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "requires": { + "history": "^5.2.0" + } + }, + "react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "requires": { + "history": "^5.2.0", + "react-router": "6.3.0" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 3a9bba3..b02634c 100644 --- a/package.json +++ b/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" diff --git a/src/App.js b/src/App.js index bed7f3b..2f694aa 100644 --- a/src/App.js +++ b/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 (
+ + } /> + + + +
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js new file mode 100644 index 0000000..10cc692 --- /dev/null +++ b/src/components/Button/Button.js @@ -0,0 +1,39 @@ +import styles from "./Button.module.css"; + +const Button = (...props) => { + console.log(props, "Button"); + return

Hey

; +}; + +// const Button = ({ +// variant, +// text, +// disableShadow, +// states, +// disabled, +// size, +// color, +// startIcon, +// endIcon, +// children +// }) => { +// return ( +// +// ); +// }; + +export default Button; diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css new file mode 100644 index 0000000..2c935ed --- /dev/null +++ b/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; +} diff --git a/src/components/Button/ButtonType.js b/src/components/Button/ButtonType.js new file mode 100644 index 0000000..74f2f11 --- /dev/null +++ b/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 ( +
+ {title} + + {types[set].map(type => { + item[set] = type; + return ( + + {`
+ ); +}; + +export default ButtonType; diff --git a/src/components/Main.js b/src/components/Main.js index 21ffc2f..76b27d2 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -1,148 +1,149 @@ -import Button from "./Button"; -import { FlexboxGrid, Divider, Col } from "rsuite"; -import { nanoid } from "nanoid"; +import Button from "./Button/Button"; +import ButtonType from "./Button/ButtonType"; +import { FlexboxGrid, Divider } from "rsuite"; let styleObj = { display: "block", height: "40px", - marginTop: "10px" }; -const variantTypes = ["normal", "outline", "bold", "text"]; -const colorTypes = ["default", "primary", "danger", "warning"]; -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", "bold", "text"], + startIcon: ["home", "bookmarks", "bolt", "book"], + endIcon: ["toys", "whatshot", "weekend", "vignette"], +}; const Main = () => { return (

Buttons


-
- Normal - - {variantTypes.map(type => ( - - {`
diff --git a/src/components/Menu.js b/src/components/Menu.js new file mode 100644 index 0000000..26696e7 --- /dev/null +++ b/src/components/Menu.js @@ -0,0 +1,102 @@ +import React, { useState } from "react"; +import { Sidenav, Nav, Dropdown, Navbar, Sidebar } from "rsuite"; +import { + ArrowRightLine as AngleRight, + Code, + SiteFill, + ArrowLeftLine as AngleLeft, + Peoples as Group, + Rate, + AdvancedAnalytics as LogoAnalytics, + Dashboard, + Grid +} from "@rsuite/icons"; +import "rsuite/dist/rsuite.min.css"; + +const headerStyles = { + padding: 18, + fontSize: 16, + height: 56, + background: "#34c3ff", + color: " #fff", + whiteSpace: "nowrap", + overflow: "hidden" +}; + +const NavToggle = ({ expand, onChange }) => { + return ( + + + + + + ); +}; + +const Menu = () => { + const [expand, setExpand] = useState(true); + return ( +
+ + +
+ + + Devchallenges.io + +
+ + + + + + + setExpand(!expand)} /> + +
+ ); +}; + +export default Menu; diff --git a/src/components/Page.js b/src/components/Page.js index d8a8ec9..b256567 100644 --- a/src/components/Page.js +++ b/src/components/Page.js @@ -1,118 +1,13 @@ -import React, { useState } from "react"; +import React from "react"; import Main from "./Main"; -import { - Sidenav, - Nav, - Dropdown, - Navbar, - Container, - Sidebar, - // Header, - Content -} from "rsuite"; -import { - ArrowRightLine as AngleRight, - Code, - SiteFill, - ArrowLeftLine as AngleLeft, - Peoples as Group, - Rate, - AdvancedAnalytics as LogoAnalytics, - Dashboard, - Grid -} from "@rsuite/icons"; -import "rsuite/dist/rsuite.min.css"; - -const headerStyles = { - padding: 18, - fontSize: 16, - height: 56, - background: "#34c3ff", - color: " #fff", - whiteSpace: "nowrap", - overflow: "hidden" -}; - -const NavToggle = ({ expand, onChange }) => { - return ( - - - - - - ); -}; +import Menu from "./Menu"; +import { Container, Content } from "rsuite"; const Page = () => { - const [expand, setExpand] = useState(true); return (
- - -
- - - Devchallenges.io - -
- - - - - - - setExpand(!expand)} /> - - +
diff --git a/src/index.js b/src/index.js index d563c0f..3d1e2a5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,13 +1,16 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import { BrowserRouter } from "react-router-dom"; +import "./index.css"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + + + );